vuepress入门详解（七）vuepress如何添加评论功能

小半 • 2022年5月23日下午2:18 • Java • 阅读 303

vuepress如何添加评论功能

选择评论插件vssue

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

安装

npm install @vssue/vuepress-plugin-vssue
npm install @vssue/api-github-v3 或者 npm install @vssue/api-github-v4

配置

// .vuepress/config.js

module.exports = {
  plugins: {
    '@vssue/vuepress-plugin-vssue': {
      platform: 'github', //v3的platform是github，v4的是github-v4
      locale: 'zh', //语言
      // 其他的 Vssue 配置
      owner: 'OWNER_OF_REPO', //github账户名
      repo: 'NAME_OF_REPO', //github一个项目的名称
      clientId: 'YOUR_CLIENT_ID',//注册的Client ID
      clientSecret: 'YOUR_CLIENT_SECRET',//注册的Client Secret
      autoCreateIssue:true // 自动创建评论，默认是false，最好开启，这样首次进入页面的时候就不用去点击创建评论的按钮了。
    },
  },
};

::: tip
@vssue/api-github-v3 和@vssue/api-github-v4的区别是v3不用登录，但是有调用次数限制，v4必须登录但没有次数限制
v3的platform是github，v4的是github-v4
用的是github的评论功能，所以必须有github账号
:::

如何获取clientId和clientSecret

第一步：

登录github后点击 settings

第二步：

点击 Developer settings

第三步：

点击 New OAuth App

第四步：

点击注册按钮

第五步：

这里的Client ID和Client Secret就是我们想要的了。

页面添加评论功能

在*.md文件底部加上<Vssue />或者<Vssue title="自定义名字" />就可以了，示例如下：

<!-- README.md -->
# Vssue Demo

<Vssue title="test评论" />

或者

<!-- README.md -->
---
title: 页面标题
---
# Vssue Demo

<Vssue  />

::: warning
最好就是直接在最后写个<Vssue />就可以了，系统会默认把当前页面标题传到github，并且创建一个评论。自定义标题比较麻烦，还容易重名。
:::

🍉🍉🍉 欢迎大家来博客了解更多内容：java乐园 🍉🍉🍉

vuepress入门详解（一）vuepress介绍
 vuepress入门详解（二）vuepress 快速搭建
 vuepress入门详解（三） vuepress 目录结构
 vuepress入门详解（四）vuepress 基本配置
 vuepress入门详解（五）vuepress Markdown详解
 vuepress入门详解（六）vuepress 实用插件
 vuepress入门详解（七）vuepress如何添加评论功能

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/13533.html