教你使用Giscus在Vuepress2中开启评论功能

Chengyunlai

已于 2022-08-09 20:55:07 修改

阅读量1.3k

点赞数 1

分类专栏： Vue 文章标签：前端 vue

于 2022-08-09 20:53:23 首次发布

本文链接：https://blog.csdn.net/qq_33806001/article/details/126255433

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用的插件： vuepress-plugin-comment2

环境： vuepress2

官网连接

点击下方链接进入官网
主页 | 评论插件 (vuepress-theme-hope.github.io)

Npm安装方式

npm i -D vuepress-plugin-comment2@next

Yarn安装方式

yarn add -D vuepress-plugin-comment2@next

Pnpm安装方式

pnpm add -D vuepress-plugin-comment2@next

Tip：Node的镜像见我文章：NPM的镜像源管理工具：NRM

设置Vuepress配置文件

Js

// .vuepress/config.js
const { commentPlugin } = require("vuepress-plugin-comment2");

module.exports = {
  plugins: [
    commentPlugin({
      // 插件选项
    }),
  ],
};

Ts

// .vuepress/config.ts
import { commentPlugin } from "vuepress-plugin-comment2";

export default {
  plugins: [
    commentPlugin({
      // 插件选项
    }),
  ],
};

Tip：config.js/ts目录如下

├─ docs
│  ├─ .vuepress
│  │  └─ config.js/ts
│  └─ README.md
├─ .gitignore
└─ package.json

使用Giscus

准备工作

你需要创建一个公开仓库，并开启评论区，以作为评论存放的地点
你需要安装 Giscus Appopen in new window，使其有权限访问对应仓库。

Tip：开启仓库的Disscussions

在完成以上步骤后，请前往 Giscus 页面open in new window 获得你的设置。

只需要填写仓库和 Discussion 分类，之后滚动到页面下部的 “启用 giscus” 部分，获取 data-repo, data-repo-id, data-category 和 data-category-id 这四个属性。

示例

将记录下的四个值：data-repo, data-repo-id, data-category 和 data-category-id 作为插件选项传入 repo, repoId, category categoryId。Giscus 配置。

示例

const { commentPlugin } = require("vuepress-plugin-comment2");

module.exports = {
    ... // 省略Vuepress的配置
    ...
  plugins: [
    // vuepress-plugin-comment2评论与阅读量插件
    commentPlugin({
      // 插件选项
      provider: "Giscus", //评论服务提供者。
      comment: true, //启用评论功能
      repo: "Chengyunlai/Xxxx", //远程仓库
      repoId: "xxx", //对应自己的仓库Id
      category: "Announcements",
      categoryId: "xxx" //对应自己的分类Id
    }),
  ],
  ...
  ...
};