本文所介绍的VuePress开启评论功能使用的是Vssue，如果您不喜欢该方式的话，请查阅其他相关文档。

效果预览：

一、Vssue介绍

官网直达:Vssue

Vssue (/'vɪʃuː/，由 “V” 和 “Issue” 组合而来) 是一个 Vue 组件 / 插件，可以为你的静态页面开启评论功能。

由于你的页面是“静态”的，你没有数据库和后端 API 的支持。但是你希望让你的页面拥有评论功能，让用户可以登录和发表评论。代码托管平台（如 Github、Gitlab、Bitbucket、Coding 等平台）提供了 OAuth API ，在它们的帮助下，Vssue 可以让用户通过这些平台的帐号登录，将评论存储在这些平台的 Issue 系统中，并在当前页面展示。

这也是 Vssue 名字的由来：由 Vue 驱动并基于 Issue 实现。

二、在GitHub创建 OAuth App

Vssue 支持通过 Github, Gitlab, Bitbucket, Gitee 或者 Gitea 的 Issue 系统来为你的静态页面提供评论功能，你可以选择其中之一来使用。

这里我们使用 GitHub作为示例。详细创建方式如下：创建一个新的 OAuth App

创建完成后，我们把 Client ID 和 Client secret保存下来，等下会用到。

三、安装 Vssue

这里我使用的是 V4

V3 与 V4 最大的差别就是：

• V3 可以不登录浏览评论，但 API 有调用频率限制
• V4 要求登陆后才能浏览评论

3.1 安装

首先需要安装 VuePress的 Vssue插件：
npm install @vssue/vuepress-plugin-vssue

然后安装 Vssue:
npm install @vssue/api-github-v4

如果你希望使用V3版本的 Vssue,则：
npm install @vssue/api-github-v3

四、使用插件

// .vuepress/config.js

module.exports = {
  plugins: {
    '@vssue/vuepress-plugin-vssue': {
      // 设置平台，而不是 `api` 
      platform: 'github-v4',

      // 其他的 Vssue 配置
      owner: 'OWNER_OF_REPO', // 仓库的拥有者的名称
      repo: 'NAME_OF_REPO', // 存储 Issue 和评论的仓库的名称
      clientId: 'YOUR_CLIENT_ID', // 刚保存下来的  Client ID
      clientSecret: 'YOUR_CLIENT_SECRET', //  刚才保存下来的 Client secrets
    },
  },
};

@vssue/vuepress-plugin-vssue 会自动根据你设置的 platform 为你解析对应的 api 包：

platform github - api 包 @vssue/api-github-v3
platform github-v4 - api 包 @vssue/api-github-v4

关于其他的一些配置，你可以访问Vssue 配置参考了解。

五、启用

5.1 使用

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

<!-- README.md -->

# Vssue Demo

<Vssue/>

5.2 自动创建评论

但是这样启用的话，我们需要为每个文章手动 click to create issue 创建评论，这显然不是我们需要的。

找到我们的 config.js 在插件@vssue/vuepress-plugin-vssue配置中，手动添加如下代码：

autoCreateIssue: true,//自动创建评论

这样就不用我们每次去点击 click to create issue了。

5.3 自动为每个页面添加 Vssue

修改默认主体，

首先我们先在 .vuepress 文件目录下 新建 theme,再在该目录下新建layouts目录：
然后下载git clone https://gitee.com/mirrors/VuePress.git

进入该文件的 packages\@vuepress\theme-default\layouts\ 把 Layout.vue拷贝到 我们刚才新建的 Layouts目录下。

进入该文件的 packages\@vuepress\theme-default\目录下把 util文件夹，也拷贝到 我们的 theme文件夹下。

接下来在我们的theme 目录下新建index.js,并添加如下配置：

module.exports = {
  extend: '@vuepress/theme-default'
}

接着我们重写 默认主题的样式，也就是 theme 文件夹下 layouts文件夹下的 Layout.vue组件。
找到该组件的 Page 组件部分，在插槽下方把我们的 <Vssue>组件给写进去，即可在每个页面都拥有评论。

这里的 :options="{ locale: 'zh' }" 意思是把地区改为中国。
由于该组件默认没有VuePress的居中效果，我们在页面中找了一个带有居中效果的类 copy 过来即可居中。

效果：