搜索引擎优化指南2.0(《VuePress博客优化之增加Vssue评论功能》全文搜索)

　　搜索引擎优化指南2.0(《VuePress博客优化之增加Vssue评论功能》全文搜索)

　　如果网站有评论功能，它可以与读者建立交流，优化网站，还可以及时更新文章中的错误。

　　添加评论功能，主流是使用Valine和Vssue。

　　Valine 是基于 LeanCloud 的快速、简洁、高效的无后端评论系统，而 LeanCloud 是提供一站式后端服务的无服务器云服务，如数据存储、即时通讯等。要使用 Valine，您需要在 LeanCloud 注册。注册 LeanCloud 并使用该服务，您需要实名认证。最终效果如下：

　　

　　具体步骤请参考《VuePress博客优化：添加缬氨酸评论》

　　Vssue 是一个 Vue 驱动的、基于问题的评论插件。虽然有多个托管平台可用，但我这里使用的是 GitHub，并且已经实现了与我的 GitHub 文章 问题的同步。最终效果如下：

　　

　　具体步骤请参考《VuePress博客优化：添加Vssue评论》

　　6. 全文搜索

　　VuePress 的内置搜索只会为页面的标题、h2、h3 和标签构建搜索索引。如果需要全文搜索，可以使用 Algolia 搜索。

　　Algolia是一个数据库实时搜索服务，可以提供毫秒级的数据库搜索服务，其服务可以很方便的以API的形式部署到网页、客户端、APP等各种场景中。

　　例如，VuePress 官方文档使用 Algolia 搜索。使用 Algolia 搜索的最大优势是方便。它会自动爬取网站的页面内容并建立索引。你只需要申请一个Algolia服务，在网站里面加一些代码，就像加统计代码一样，然后就可以实现全文搜索功能了：

　　

　　具体步骤参考《VuePress博客优化：打开Algolia全文搜索》

　　7. 搜索引擎优化

　　如果你想让你的网站被搜索引擎做，你必须做好SEO，而且涉及到SEO的地方很多。建议新手阅读基础文档学习：

　　《百度搜索引擎优化指南2.0》谷歌搜索中心《搜索引擎优化（SEO）新手指南》

　　很多事情要做，比如自定义标题、描述、关键词、优化链接、重定向、生成站点地图、提交到搜索引擎平台，然后协助使用多个站长平台及时发现和优化问题.

　　详情请参阅：

　　VuePress博客的SEO优化（一）站点地图和搜索引擎收录VuePress博客的SEO优化（二）VuePress博客的重定向SEO优化（三）标题、链接优化VuePress博客SEO VuePress 博客优化（四） Open Graph 协议 VuePress 博客 SEO 优化（五）添加 VuePress 博客 JSON-LD 数据 SEO 优化）（六）站长工具8. PWA 兼容）

　　PWA，英文全称：Progressive Web Apps，中文翻译：Progressive Web Apps。

　　实现 PWA 可以很容易地让我们的 网站 实现桌面图标、离线缓存、推送通知等功能。

　　实现 PWA，参考《VuePress 博客优化兼容 PWA》

　　9. 修改样式

　　网站风格总有不符合你期待的东西。有时，您需要自己修改代码。

　　如果你想改变主题颜色，VuePress 定义了一些变量供以后使用，你可以创建一个 .vuepress/styles/palette.styl 文件：

　　// 颜色

$accentColor = #3eaf7c

$textColor = #2c3e50

$borderColor = #eaecef

$codeBgColor = #282c34

$arrowBgColor = #ccc

$badgeTipColor = #42b983

$badgeWarningColor = darken(#ffe564, 35%)

$badgeErrorColor = #DA5961

// 布局

$navbarHeight = 3.6rem

$sidebarWidth = 20rem

$contentWidth = 740px

$homePageWidth = 960px

// 响应式变化点

$MQNarrow = 959px

$MQMobile = 719px

$MQMobileNarrow = 419px

　　如果要自定义样式，可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件，但您也可以使用普通的 CSS 语法。

　　更多颜色修改参考 VuePress 的palette.styl。

　　10.手写插件

　　有时候，现有的插件不能满足要求，需要自己写插件，但也需要注意我们是写VuePress插件还是markdown-it插件，比如我们复制代码，可以使用VuePress插件来实现，但是如果我们想在代码块中添加一个try按钮，点击跳转到对应的playground页面，即展开markdown语法，我们需要写一个markdown-it插件。

　　但是无论你写什么插件都提供 文章：

　　VuePress 插件：“从头开始实现一个 VuePress 插件” Markdown-it 插件：“VuePress 博客优化：扩展 Markdown 语法”系列 文章

　　博客搭建系列，讲解如何使用VuePress搭建、优化博客，以及部署到GitHub、Gitee、私服等平台。

　　系列预计20篇左右，本文为第33篇，全系列地址文章：

　　微信：“mqyqingfeng”，一个低调务实的优秀中国青年群，PS：这是一个正经的前端群。

　　如果有任何错误或不准确之处，请务必纠正我，非常感谢。如果喜欢或者有灵感，欢迎star，也是对作者的一种鼓励。