vitepress站点的Giscus评论

一、为什么使用 Giscus？

评论系统	说明
Valine	不用登录账号即可评论，但容易产生垃圾评论，而且没有评论提醒通知
Waline	是Valine的升级版，登录后方可评论，有通知，但是需要自己部署服务端
Twikoo	不用登录账号即可评论，但容易产生垃圾评论，有通知，但是需要自己部署服务端
Artalk	可设置是否启用登录账号后评论，有通知，但是需要自己部署服务端
utteranc	GitHub登录后方可评论，评论数据在 GitHub issues 中，评论后有邮件通知，无需部署服务端，但UI样式一般，且移动端不显示头像
gitalk	GitHub登录后方可评论，评论数据在 GitHub issues 中，评论后有邮件通知，无需部署服务端，UI样式一般，评论不支持点赞
⭐Giscus	GitHub登录后方可评论，评论数据在 GitHub Discussions 中，评论后有邮件通知，无需部署服务端，UI好看

二、安装giscus

Giscus 是一个基于 GitHub Discussion 的评论系统，启用简便。

（1）进 Giscus App官网：giscus 。

（2）点击 Install 安装（或者Configure）

（3）选择 Only select repositories，再指定一个想开启讨论的仓库：

（4）仓库必须是公开的，私有的不行。要是想单独放评论，新建一个也可以

（5）完成后可以在【个人头像】-【设置】-【应用 Applications】 中看到

三、开启讨论

giscus会把评论数据都放到讨论 discussions 中我们进入要开启讨论的仓库，找到【Features】 - 【勾选discussions】

四、生成数据

（1）进入官网：https://giscus.app/zh-CN

（2）输入自己的仓库链接，满足条件会提示可用

（3）下拉到 Discussion 分类推荐选 General ，懒加载评论也可以勾选下：

关于讨论的类型，分类如下： Github的讨论文档

类别	中文	说明
Announcements	公告	每次评论都会推送所有人
General	常规	开放式讨论
Ideas	想法	开放式讨论
Polls	投票	可投票与讨论
Q&A	问答	问答形式
Show and tell	展示和说明	开放式讨论
:::

（4）下方就自动生成了关键数据

其中 data-repo 、 data-repo-id 、 data-category 和 data-category-id 这4个是我们的关键数据

<script src="https://giscus.app/client.js"
        data-repo="github repository" // [!code focus:4]
        data-repo-id="R_******"
        data-category="General"
        data-category-id="DIC_******"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

五、安装使用

可以用官方给的js数据封装，也可以用 @T-miracle/vitepress-plugin-comment-with-giscus 的插件

npm install vitepress-plugin-comment-with-giscus

然后在 .vitepress/theme/index.ts 中填入下面代码，并将我们之前获取的4个关键数据填入，其他保持默认保存

// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme';
import giscusTalk from 'vitepress-plugin-comment-with-giscus';
import { useData, useRoute } from 'vitepress';

export default {
  extends: DefaultTheme,

  setup() {
    // Get frontmatter and route
    const { frontmatter } = useData();
    const route = useRoute();
        
    // giscus配置
    giscusTalk({
      repo: 'your github repository', //仓库
      repoId: 'your repository id',   //仓库ID
      category: 'Announcements',      // 讨论分类
      categoryId: 'your category id', //讨论分类ID
      mapping: 'pathname',
      inputPosition: 'bottom',
      lang: 'zh-CN',
      }, 
      {
        frontmatter, route
      },
      //默认值为true，表示已启用，此参数可以忽略；
      //如果为false，则表示未启用
      //可以使用“comment:true”序言在页面上单独启用它
      true
    );

}

如果某一页不想启用，我们可以在当前页使用 Frontmatter 关闭

---
comment: false
---

六、实际效果