搭建 VuePress 站点必做的 10 个优化

　　搭建 VuePress 站点必做的 10 个优化

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

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

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

　　具体的操作步骤参考《VuePress 博客优化之增加 Valine 评论功能》[7]

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

　　具体的操作步骤参考 《VuePress 博客优化之增加 Vssue 评论功能》[8]

　　6. 全文搜索

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

　　Algolia 是一个数据库实时搜索服务，能够提供毫秒级的数据库搜索服务，并且其服务能以 API 的形式方便地布局到网页、客户端、APP 等多种场景。

　　像 VuePress 官方文档就是使用的 Algolia 搜索，使用 Algolia 搜索最大的好处就是方便，它会自动爬取网站的页面内容并构建索引，你只用申请一个 Algolia 服务，在网站上添加一些代码，就像添加统计代码一样，然后就可以实现一个全文搜索功能：

　　具体的步骤参考 《VuePress 博客优化之开启 Algolia 全文搜索》[9]

　　7. SEO

　　如果希望自己的站点能被搜索引擎做到，就要做好 SEO，而 SEO 牵涉的地方有很多，新手建议先看下基础的文档进行学习：

　　《百度搜索引擎优化指南2.0》[10]Google 搜索中心《搜索引擎优化 (SEO) 新手指南 》[11]

　　很多事情是一定要做的，比如自定义标题、描述、关键词，优化链接、重定向、生成 sitemap，并提交到搜索引擎平台，再辅助使用多个站长平台，及时发现和优化问题。

　　具体可以参考：

　　VuePress 博客之 SEO 优化（一）sitemap 与搜索引擎收录[12]VuePress 博客之 SEO 优化（二）重定向[13]VuePress 博客之 SEO 优化（三）标题、链接优化[14]VuePress 博客之 SEO 优化（四） Open Graph protocol[15]VuePress 博客之 SEO 优化（五）添加 JSON-LD 数据[16]VuePress 博客之 SEO 优化（六）站长工具[17]8. PWA 兼容

　　PWA，英文全称：Progressive Web Apps， 中文翻译：渐进式 Web 应用。

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

　　要实现 PWA 参考 《VuePress 博客优化之兼容 PWA》[18]

　　9. 修改样式

　　网站样式总有一些不满足你期望的地方，有的时候，就需要自己修改代码。

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

　　// 颜色<br />$accentColor = #3eaf7c<br />$textColor = #2c3e50<br />$borderColor = #eaecef<br />$codeBgColor = #282c34<br />$arrowBgColor = #ccc<br />$badgeTipColor = #42b983<br />$badgeWarningColor = darken(#ffe564, 35%)<br />$badgeErrorColor = #DA5961<br /><br />// 布局<br />$navbarHeight = 3.6rem<br />$sidebarWidth = 20rem<br />$contentWidth = 740px<br />$homePageWidth = 960px<br /><br />// 响应式变化点<br />$MQNarrow = 959px<br />$MQMobile = 719px<br />$MQMobileNarrow = 419px<br />

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

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

　　10. 手写插件

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

　　但无论你写哪种插件，都提供了文章：

　　VuePress 插件：《从零实现一个 VuePress 插件》[20]Markdown-it 插件：《VuePress 博客优化之拓展 Markdown 语法》[21]系列文章

　　博客搭建系列，讲解如何使用 VuePress 搭建博客，并部署到 GitHub、Gitee、个人服务器等平台，预计 20 篇左右，本篇是第 33 篇。