# 文章目录
本文所介绍的 VuePress开启评论功能使用的是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 (opens new window)
创建完成后,我们把 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
},
},
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@vssue/vuepress-plugin-vssue 会自动根据你设置的 platform 为你解析对应的 api 包:
platform github - api 包 @vssue/api-github-v3
platform github-v4 - api 包 @vssue/api-github-v4
关于其他的一些配置,你可以访问Vssue 配置参考 (opens new window)了解。
# 五、启用
# 5.1 使用
Vssue 已经注册为 Vue 组件,你可以在你的 VuePress Markdown 文件中直接使用它。
<!-- README.md -->
# Vssue Demo
<Vssue />
2
3
4
5
# 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",
};
2
3
接着我们重写 默认主题的样式,也就是 theme 文件夹下 layouts 文件夹下的 Layout.vue
组件。
找到该组件的 Page 组件部分,在插槽下方把我们的 <Vssue>
组件给写进去,即可在每个页面都拥有评论。
这里的 :options="{ locale: 'zh' }"
意思是把地区改为中国。
由于该组件默认没有VuePress
的居中效果,我们在页面中找了一个带有居中效果的类 copy 过来即可居中。
效果: