评论 原创
Giscus 是一个开源、免费的评论系统,基于 GitHub Discussions 存储数据,基于 GitHub 登录,基于 GitHub 样式。
安装
Giscus 需要用户确保:
- 该仓库是公开的,否则访客将无法查看 discussion。
- giscus app 在仓库上已安装,否则访客将无法评论和回应。
- 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 里的在线链接配置项删除,当然您也可以保留,当两者同时存在,以评论区实例注入为主。