使用Vssue添加评论功能

vuepress的页面是“静态”的，没有数据库和后端 API 的支持。为静态页面添加评论功能，可以通过Github等代码托管平台提供的 OAuth API ，使用Vssue 插件让用户通过这些平台的帐号登录，将评论存储在这些平台的 Issue 系统中，并在页面中展示。

Vssue的官方文档：https://vssue.js.org/zh/guide/

1. 安装插件

GitHub的 OAuth API有两个版本，区别如下：

Github REST API V3

• Vssue API 包： @vssue/api-github-v3 (opens new window)
• 特点 / 缺点：
  • 需要设置 clientSecret (opens new window)
  • 评论无法排序
  • 评论可以编辑
  • 评论可以删除
  • 可以不登录浏览评论，但 API 有调用频率限制
• 开发者参考： 官方文档 (opens new window)

Github GraphQL API V4

• Vssue API 包： @vssue/api-github-v4 (opens new window)
• 特点 / 缺点：
  • 需要设置 clientSecret (opens new window)
  • 评论可以排序
  • 评论可以编辑
  • 评论可以删除
  • 要求登陆后才能浏览评论
• 开发者参考： 官方文档 (opens new window)

按照你的需要选择版本。这里以v4为例。

在vueprees的根目录打开Git Bash，输入下面的命令

npm install @vssue/vuepress-plugin-vssue
npm install @vssue/api-github-v4
# 如果使用v3，上一行改为 npm install @vssue/api-github-v3 

2. 创建Github OAuth App

打开Github，点击右上角的头像，点击setting。

向下拉，找到Developer settings。

点击OAuth Apps，然后点击中间的Register a new application

输入OAuth App的名字，还有你的vuepress博客的访问地址，点击Register application。

点击Generate a new client secret，需要输入身份验证，然后会生成Client secrets

妥善保存Client ID和Client secret，下一步中要用。另外Client secret只会出现一次。

3. 配置插件

打开docs/.vuepress/config/plugins.js，在里面添加下面的配置。按照注释修改里面的信息。

  [
    '@vssue/vuepress-plugin-vssue',
    {
      // 设置 `platform` 而不是 `api`
      platform: 'github-v4', //如果使用github-v3，这里改为github
      locale: 'zh', //语言：中文

      // 其他的 Vssue 配置
      owner: 'OWNER_OF_REPO', //你的Gihub用户名
      repo: 'NAME_OF_REPO',  //你的vuepress所在仓库名称
      clientId: 'YOUR_CLIENT_ID',  //OAuth app的Client ID
      clientSecret: 'YOUR_CLIENT_SECRET',  //OAuth app的Client secret
    },
  ],

配置完成就可以正常使用了

4. 页面添加评论功能

在markdown文章中，需要添加评论区的位置输入

<Vssue />

即可使用。如果需要自定义标题，可以输入

<Vssue :title="自定义标题" />

开启后的效果如下：

5. 自定义样式变量

打开docs/.vuepress/styles/index.styl，添加下面的样式变量可以使 Vssue 的样式变量与 VuePress 的样式变量相等：

$vssue-theme-color ?= $accentColor //主题颜色
$vssue-text-color ?= $textColor //文字颜色
$vssue-border-color ?= $borderColor  //边框颜色
$vssue-breakpoint-mobile ?= $MQMobile  // 切换为移动端模式的屏幕宽度

如果想要自定义，可以在docs/.vuepress/styles/palette.styl中修改，示例如下：

$accentColor = blue

$vssue-theme-color = red