Giscus评论系统的配置

---

日色欲尽花含烟，月明欲素愁不眠

---

Giscus 评论系统

“利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在你的网站上留下评论和反应吧！” “本项目深受 utterances 的启发!” ---摘自Giscus官网

⭐Yuami评论系统配置

Twikoo 评论系统配置位于 src/config.ts 文件中，编辑以控制博客的评论系统显示设置。

  comment: {
    enable: true,         // 启用评论功能。当设置为 false 时，评论组件将不会显示在文章区域,此时你不必更改此处内容
    system: 'twikoo',     // 评论系统选择: "twikoo" | "giscus",此时你不必更改此处内容
    twikoo: {
      envId: 'https://netlify-nt.netlify.app/.netlify/functions/twikoo',//此时你不必更改此处内容
      lang: 'zh-CN',//此时你不必更改此处内容
    },
    //此时需要更改的内容(下方//为注释内容):
    giscus: {
      repo: 'qitinyu/yuami-giscus',
      //GitHub用户名和giscus仓库名
      repoId: 'R_kXXXXmXsaA', 
      //仓库ID，可以通过 https://github.com/apps/giscus 安装 Giscus App 到该仓库后，查看仓库ID
      category: 'Announcements',
      //选择讨论分类，如 Announcements、General、Questions 等,可选择此处默认。
      categoryId: 'DIC_kwXXXXXXXX4C9uxi',
      //分类ID，可以通过 https://github.com/apps/giscus 安装 Giscus App 到该仓库后，查看分类ID
      mapping: 'pathname',
      //选择评论映射方式，如 pathname、url、title、id 等，推荐 pathname。
      strict: '1',
      //是否启用严格模式，1为启用，0为禁用。
      //启用严格模式后，只有在文章路径与 Discussions 分类路径完全匹配时，才会显示评论。
      reactionsEnabled: '1',
      //是否启用表情符号，1为启用，0为禁用。
      emitMetadata: '0',
      //是否启用评论元数据，1为启用，0为禁用。
      inputPosition: 'top',
      //评论输入框的位置，top为顶部，bottom为底部。
      theme: 'noborder_light',
      //主题，可选择 noborder_light、noborder_dark、dark_light、dark_dark、light_light、light_dark、dark、light、auto 等。
      //auto 为自动选择主题，根据浏览器主题自动切换。
      lang: 'zh-CN',
      //语言，可选择 zh-CN、en-US、ja-JP、zh-TW 等。
      loading: 'lazy',
      //加载方式，lazy为懒加载，eager为立即加载。
    },
  },

🌟Giscus 配置

1. 准备 GitHub 仓库:

• 创建一个公开的 GitHub 仓库（或使用已有的,如yuqi-giscus）。
• 进入仓库 Settings-General-下拉页面 ,勾选Features 中的 Discussions 选项-点击set up discussions。
• 前往 https://github.com/apps/giscus 安装 Giscus App 到该仓库(可选择全部仓库安装或指定仓库yuami-giscus,点击install按钮进行安装)。
• 获取配置参数:

2. 访问 Giscus 官网配置页面。

• 在配置-仓库栏中输入你的仓库路径（如 username/blog-comments）。
• 选择页面 ↔️ Discussions 映射方式（推荐 pathname）。
• 选择 Discussion 分类（推荐 Announcements）。
• 页面底部会自动生成一段配置代码，其中包含你需要的 repo、repoId、category、categoryId 等值。
• 可查看无需服务器！为任何页面对接评论区！还有反垃圾

3. 配置博客 config.ts 文件:

• 打开 src/config.ts 文件。
• 将 enable 设置为 true。
• 将 system 设置为 “giscus”。
• 将从 Giscus 官网获取的参数填入 giscus 配置块。 配置好的示例:

  comment: {
    enable: true,         // 启用评论功能。当设置为 false 时，评论组件将不会显示在文章区域。
    system: 'twikoo',     // 评论系统选择: "twikoo" | "giscus"
    twikoo: {
      -----
    },
    giscus: {
      repo: 'qitinyu/yuami-giscus',
      repoId: 'R_kXXXXXsaA',
      category: 'Announcements',
      categoryId: 'DIC_kwXXXXXXaM4C9uxi',
      mapping: 'pathname',
      strict: '1',
      reactionsEnabled: '1',
      emitMetadata: '0',
      inputPosition: 'top',
      theme: 'noborder_light',
      lang: 'zh-CN',
      loading: 'lazy',
    },
  },

4. 启动并测试:

• 保存 config.ts 文件。
• 启动或重启你的博客项目。
• 访问一篇文章的页面，滚动到文章底部，你应该能看到 Giscus 评论区已经加载出来了。
• 使用 GitHub 账号登录后，尝试发表一条评论，检查是否能成功提交和显示。

5. 评论管理:

• 进入你的yuqi-giscus进入你的 Discussion 分类，查看并管理评论。