本篇讲讲如何使用 Vssue 快速的实现评论功能。

主题内置

因为我用的是 vuepress-theme-reco 主题，主题内置评论插件 @vuepress-reco/vuepress-plugin-comments，可以根据自己的喜好选择 Valine 或者 Vssue。
那我们来介绍下 Vssue。

Vssue

官网：https://vssue.js.org/zh/
Vssue 是一个 Vue 驱动的、基于 Issue 的评论插件。
特点是支持多个代码托管平台，包括 GitHub、GitLab、Bitbucket、 Gitee 和 Gitea。因为基于 Vue，可以作为 Vue 插件使用，轻松集成到 Vue 应用中。
你可以点击官网链接，进入首页，直接在页面的评论框中体验评论效果。

开始

1. 创建 GitHub OAuth App

这里我们使用 GitHub 作为托管平台，打开 GitHub 的开发者设置：https://github.com/settings/developers
VuePress 博客优化之增加 Vssue 评论功能 - 图1
选择「Oauth Apps」，然后点击「Register a new application」:
VuePress 博客优化之增加 Vssue 评论功能 - 图2
为了方便本地测试，Homepage URL 和 Authorization callback URL 我们都写成 http://localhost:8080，创建应用后，我们再点击 Generate a new client secret 生成 Client secrets：
VuePress 博客优化之增加 Vssue 评论功能 - 图3
最后就会获取 Client ID 和 Client secrets。

2. 修改 config.js

  1. module.exports = {
  2.   theme: 'reco',
  3.   themeConfig: {
  4.     vssueConfig: {
  5.       platform: 'github',
  6.       owner: 'OWNER_OF_REPO',
  7.       repo: 'NAME_OF_REPO',
  8.       clientId: 'YOUR_CLIENT_ID',
  9.       clientSecret: 'YOUR_CLIENT_SECRET',
  10.     }
  11.   }  
  12. }

3. 效果展示

运行项目，就可以看到效果：
VuePress 博客优化之增加 Vssue 评论功能 - 图4
但是注意，在一开始没有评论的时候，需要点击图中的 「点击创建 Issue」，才能正常的进行评论，当你点击「点击创建 Issue」的时候，你对应的 Github 仓库也会建立一条 issue，接下来的回复都会出现在这条 issue 中。
这是有评论后的效果：
VuePress 博客优化之增加 Vssue 评论功能 - 图5

4. 评论部分开启

如果你想默认不加载评论，而只在某些页面显示评论功能，可以在 valineConfig 或 vssueConfig 中设置 showComment: false，并在需要展示评论的页面 设置 isShowComments: true。
如果仅是某篇文章不想设置开启评论功能，可以在 front-matter 设置 isShowComments: false。

问题 ：多个页面的评论混合在一起

如果你多在几个页面创建评论，你会发现，所有的评论都是在一起的，这是因为 Vssue 在尝试加载评论时，是根据 labels 和 title 来请求对应的 Issue。
参照 Vssue 的配置文档：https://vssue.js.org/zh/options/，其实我们是可以配置 labels 等属性的，但因为我们没有配置，所以请求的时候请求的都是同一条，自然就混合在了一起。
如果我们只是做一个留言板，那倒没有什么问题，但比如我的是 TypeScript 文档，每篇文章的评论我肯定希望是分开的，那该怎么实现呢？
虽然我们可以直接在 config.js里这样写：

  1. module.exports = {
  2.   theme: 'reco',
  3.   themeConfig: {
  4.     vssueConfig: {
  5.       platform: 'github',
  6.       owner: 'OWNER_OF_REPO',
  7.       repo: 'NAME_OF_REPO',
  8.       clientId: 'YOUR_CLIENT_ID',
  9.       clientSecret: 'YOUR_CLIENT_SECRET',
  10.       labels: 'xxx'
  11.     }
  12.   }  
  13. }

但如果不能动态的设置 lables ，其实还是没有什么用。
最终我决定，不使用 reco 主题内置的这个评论插件，而是改为使用 Vssue 提供的插件，其实 reco 内置的这个评论插件是基于 Vssue 提供的插件进行的一层封装。
那怎么实现呢？参照 Vssue 提供的 VuePress 指南：

1. 安装插件

  1. yarn add @vssue/vuepress-plugin-vssue -D
  2. yarn add @vssue/api-github-v3 -D

2. 使用插件

  1. // .vuepress/config.js
  3. module.exports = {
  4.   plugins: {
  5.     '@vssue/vuepress-plugin-vssue': {
  6.       platform: 'github',
  7.       owner: 'OWNER_OF_REPO',
  8.       repo: 'NAME_OF_REPO',
  9.       clientId: 'YOUR_CLIENT_ID',
  10.       clientSecret: 'YOUR_CLIENT_SECRET',
  11.     },
  12.   },
  13. };

3. 使用 Vssue 组件

Vssue 已经注册为 Vue 组件，你可以在你的 VuePress Markdown 文件中直接使用它。

  1.  <template>
  2.   <Vssue :issue-id="228" />
  3. </template>

参照 Vssue 提供的配置文档：
Vssue 组件支持传入三个属性：

  1. title

    labels 和 title 是存储评论的对应 Issue 的标识符。

所以请确保不同页面的 Vssue 使用不同的 title。拥有相同 title 的 Vssue 会对应到同一个 Issue，也就会有同样的评论。

  1. issueId

    如果设置了 issueId，Vssue 将会直接使用它来确定要使用哪个 Issue，而不是根据 labels 和 title 来查找对应的 Issue。这会加快 Vssue 的初始化过程。

但是在这种情况下，你必须要 手动创建 Issue。如果对应的 Issue 不存在，Vssue 不会尝试为你创建一个新的 Issue。

  1. options

    在 prop options 中设置的属性，会覆盖通过 Vue.use() 设置的属性。它可以接收 VssueOptions 中的所有配置。

你可以把通过 Vue.use() 设置的配置当作 Vssue 的 全局 / 默认 配置，把通过 prop options 设置的配置当作 局部 配置。

因为我翻译的 TypeScript 文档也同时同步在我的 GitHub 上，所以我希望评论也是同步的，为此我选择使用 issueId 来获取指定 issue 的评论数据，普通使用的话，还是使用自定义的 title 属性。

4. 效果展示

我们来看看效果：
VuePress 博客优化之增加 Vssue 评论功能 - 图6

问题：评论区位置调整

上图之所以用红色矩形进行了标注，是想让大家注意到，因为我们的 Vssue 组件代码是写在 md 文件里的，所以评论和内容是连在一起的，而更新时间和上下文链接则是在底部的，如果评论内容比较长的话，会略显奇怪。
那如果我们像让评论区域出现在最底部呢？该怎么实现呢？
为此我尝试了很多方法，比如在挂载的时候将 DOM 元素移动到底部，在 enhanceApp.js 中挂载组件，但最终都以失败告终。
最后，我决定，不讲武德了，直接改 reco 内置的 vuepress-plugin-comments 组件源码：

1. 修改 vuepress-plugin-comments 源码

在 node_modules 中找到 vuepress-plugin-comments 的代码目录，修改 /.bin/Vssue.vue文件：

  1. // 组件加了一行 :issue-id="issueId"
  2. <template>
  3.   <VssueComponent
  4.     class="vssue-wrapper"
  5.     :issue-id="issueId"
  6.     :key="key"
  7.     :options="vssueOptions"
  8.   />
  9. </template>
  11. // script 中加入 issueId 计算属性
  12. <script>
  13. export default {
  14.   // ...
  15.   computed: {
  16.     vssueOptions () {
  17.       // ...
  18.     },
  19.     issueId () {
  20.       return this.$page.frontmatter.issueId || null
  21.     }
  22.   },
  23.     // ...
  24. }
  25. </script>

2. 修改 config.js

  1. module.exports = {
  2.   theme: 'reco',
  3.   themeConfig: {
  4.   vssueConfig: {
  5.       platform: 'github',
  6.       owner: 'mqyqingfeng',
  7.       repo: 'Blog',
  8.       clientId: 'YOUR_CLIENT_ID',
  9.       clientSecret: 'YOUR_CLIENT_SECRET'
  10.    },
  11.   }  
  12. }

3. md 文件加入 issueId 属性

在每个 markdown 文件的最开头添加 Front Matter，写入文章对应的 issueId：

  1. ---
  2. issueId: 228
  3. ---

4. 效果展示

VuePress 博客优化之增加 Vssue 评论功能 - 图7