Skip to content
0

评论 原创

Giscus 是一个开源、免费的评论系统,基于 GitHub Discussions 存储数据,基于 GitHub 登录,基于 GitHub 样式。

安装

Giscus 需要用户确保:

  1. 该仓库是公开的,否则访客将无法查看 discussion。
  2. giscus app 在仓库上已安装,否则访客将无法评论和回应。
  3. Discussions 功能已在你的仓库中启用。

对于第 1 步,需要我们访问仓库的设置页面,在最下方将仓库的 visibility 设置为 Public

对于第 2 步,需要我们访问 GitHub Apps - giscus,点击 Install 按钮,选择仓库,并确认。这里推荐仅为需要的仓库安装。

对于第 3 步,需要我们访问仓库的设置页面,找到 Discussions 功能,并启用。

配置

访问 giscus 官网,输入目标仓库,该网站会自动检查目标仓库是否已经符合要求。

检查通过后,往下找到 Discussion 分类 段落,推荐选择 Announcements 分类。

其他设置根据个人偏好进行设置。

设置完成后,往下找到 启用 giscus 段落,将其中的配置复制到 teekConfig.mts 中。

实例注入

提示

comment 配置项里,评论区的实例都是通过传入在线 JS、CSS 链接来实现,如果网速不好或者在线链接无法访问,那么评论区会无法正常加载。
Teek 支持手动传入评论区的实例,因此您可以安装评论区的依赖,然后按照官方的 API 初始化实例后传给 Teek。
参考:评论区实例注入

首先安装评论插件依赖:

shell
$ pnpm add -D @giscus/vue

然后在 .vitepress/theme/index.ts 里面注入评论区的实例。

ts
// .vitepress/theme/index.ts
import Teek, { giscusContext } from "vitepress-theme-teek";
import { provide } from "vue";
import Giscus from "@giscus/vue";

export default {
  extends: Teek,
  setup: () => {
    // 注入评论区实例
    provide(giscusContext, () => Giscus);
  },
};

最后可以把 config 里的在线链接配置项删除,当然您也可以保留,当两者同时存在,以评论区实例注入为主。

最近更新