如何为网站添加评论功能：Valine与Vssue的详细比较与使用指南

[id_[id_361535448]25413921]

[id_1174046325]

Valine 是一款无后端评论系统，它基于 LeanCloud ，具有快速、简洁且高效的特点。LeanCloud 是一种 Serverless 云服务，能提供一站式的后端服务，像数据存储、即时通讯等等。使用 Valine 时，需要先注册 LeanCloud。注册 LeanCloud 并且使用其服务，还需要进行实名认证。最终能达到的效果如下：

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

Vssue 是一个由 Vue 驱动且基于 Issue 的评论插件，它有多个托管平台可供使用，其中我使用的是 GitHub。我实现了它与我的 GitHub 文章 issues 的打通，从而实现了同步，最终的效果如下：

具体的操作步骤可以参考《VuePress 博客优化之增加 Vssue 评论功能》这篇文章。

[id_1662016682]

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 的文件。

// 颜色
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor 的值为将 #ffe564 调暗后的颜色。35%)
$badgeErrorColor = #DA5961

// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
[id_316195921]740px
$homePageWidth = 960px

// 响应式变化点
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

如果你要自定义样式，那么你能够创建一个名为.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 篇。