VuePress开启评论、VuePress评论功能。

11/7/2020 VueVuePress

# 文章目录

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

效果预览:
在这里插入图片描述

# 一、Vssue 介绍

官网直达:Vssue (opens new window)

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
    },
  },
};
1
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 />
1
2
3
4
5

# 5.2 自动创建评论

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

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

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

在这里插入图片描述
这样就不用我们每次去点击 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",
};
1
2
3

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

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

在这里插入图片描述

效果:
在这里插入图片描述

最后更新于: 2021年9月15日星期三晚上10点10分
Dawn
DDRKirby(ISQ)