如果你有一个个人博客，你可能正在使用一个评论系统来管理你的博客的讨论和评论。如果是这样，现在是时候考虑更新你的评论系统了。
在GitHub讨论区的帮助下，你可以把你的博客的评论提升到一个新的水平。在这篇文章中，我将解释如何将GitHub讨论整合到你的博客中，并使其发挥最大作用。
什么是 "GitHub 讨论"？
GitHub 讨论是一个可以在每个 GitHub 仓库中启用的论坛。它使开发者能够轻松地讨论新功能，从社区获得反馈，创建投票，发布公告等。
GitHub 讨论区是开发者和社区成员的一站式合作场所。
如何使用GitHub讨论区作为聊天系统
为了将GitHub讨论整合到你的博客，我们将使用giscus
giscus是一个由GitHub讨论支持的评论系统。它可以让你把讨论从你的仓库整合到你的博客。
你的读者可以在你的博客上留下评论，这些评论会同时出现在博客和版本库的讨论页面。
使用讨论区作为你的博客聊天系统的优点
- 它是完全免费的
- 没有广告或跟踪
- 它非常强大
- 你对评论有完全的控制权和完全的修改权。
- 有很多的主题
- 它是相当可定制的
- 你可以在你自己的服务器上自行托管
请记住，这个工具主要适用于开发博客，因为大多数开发人员使用GitHub。
如何在你的博客中整合giscus
前提条件
- 一个博客（你必须有访问源代码的权限）
- 一个GitHub账户
- 你选择的仓库必须是公开的
首先，你需要为你的仓库启用讨论功能。
进入仓库设置-> 在功能部分 -> 勾选讨论框。
启用讨论
接下来，在你的版本库中安装giscus应用程序。
转到github.com/apps/giscus…按照提示，只给选定的 repo 以访问权。
仓库访问
现在是重要的部分：我们需要配置giscus widget。
首先，进入giscus主页，滚动到配置部分。
选择你的小工具语言。这是你想显示你的小组件的语言。
选择语言
然后输入你的版本库名称和你的用户名，如username/reponame 。
输入版本库名称和用户名
对于 Page ↔️ Discussions Mapping，我建议选择 "Discussion title contains pageURL"。但根据你的需要，选择最适合你的那一个。
Page ↔️讨论区映射
接下来，在你的GitHub repo的讨论页面上创建一个类别--类似 "评论"--或者选择现有的类别。
创建一个讨论类别
选择一个类别
然后如果你想的话，启用可选的功能。
接下来，选择主题。别担心--你可以通过编程来切换不同的主题。
最后，复制并粘贴生成的代码。
Giscus将根据你的设置生成一个脚本标签，你可以将其粘贴到你的代码中。但我们将看到如何使用giscus组件。
如何使用giscus-component
如果你的博客是用React/Vue/Svelte或Web组件构建的，那么你可以安装giscus组件。
例如，要在React中集成giscus，请执行以下操作。
- 安装giscus包：
npm i @giscus/react
or
yarn add $giscus/react
- 然后在你的组件中导入
giscus，并使用它。复制我们在上一步得到的属性，从所有的属性中删除data-，并将属性转换为有效的jsx属性。
import Giscus from '@giscus/react';
export default function MyApp() {
return (
<Giscus
id="comments"
repo="giscus/giscus-component"
repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
category="Announcements"
categoryId="DIC_kwDOF1L2fM4B-hVS"
mapping="specific"
term="Welcome to @giscus/react component!"
reactionsEnabled="1"
emitMetadata="0"
inputPosition="top"
theme="light"
lang="en"
loading="lazy"
/>
);
}
(来源：Giscus-component)
对于其他框架来说，这基本上是同样的程序。
下面是最终的结果
这就是整个事情的过程：
最终结果
总结
在这篇文章中，我们学习了使用 GitHub 讨论作为聊天系统的好处。我们还学习了如何在我们的网站上创建和整合giscus小部件。
