HOW - 从0到1搭建自己的博客站点（四）

博客站点的评论系统接入，推荐 giscus。

下面我将详细讲解接入 Giscus 评论系统的原理与步骤，包括：

• Giscus 是什么，它如何工作？
• GitHub 如何保存评论？
• 如何配置 Giscus？
• 如何在你的博客页面中嵌入 Giscus？
• 安全性与限制说明

---

一、Giscus 是什么？

Giscus 是一个基于 GitHub Discussions 的评论系统。它允许你：

• 把 博客文章的评论 存储在 GitHub 的 Discussions 中
• 自动根据文章 URL 创建讨论线程
• 嵌入到你的网站里展示评论框，读者可以用 GitHub 登录后发表评论

优点：

优点	说明
免费	依赖 GitHub，自身不收费
无后台	评论直接存在 GitHub，不需要你搭建数据库
登录安全	用户通过 GitHub 登录评论，防止垃圾评论
开源可信	完全开源，安全、稳定
支持 Markdown	评论支持富文本 & 代码块

---

二、它是如何工作的？（原理）

1. 你将 Giscus 嵌入到博客页面

2. Giscus 通过 GitHub API：

   • 查询是否已有与文章 URL 对应的 Discussion
   • 如果没有，它会自动创建一个新的 Discussion（只在首次访问时）

3. 所有评论保存在 GitHub Discussions 中（你自己的仓库）

4. 后续每次访问，该页面会拉取并显示对应讨论帖子的评论内容

所以它依赖 GitHub 的 OAuth 登录机制来确保用户身份，并且使用 Discussions 作为评论数据库。

---

三、配置步骤详解

第一步：准备 GitHub 仓库

1. 登录 GitHub，创建一个公开仓库（例如：my-blog-comments）

2. 打开该仓库的 Discussions 功能：

   • 进入仓库 → Settings → Features → 勾选 Discussions

第二步：前往 Giscus 官网配置

进入：https://giscus.app/

填写以下信息：

项目	示例
Repository	your-username/my-blog-comments
Repository ID	Giscus 会自动帮你填写
Discussion Category	通常选 General 或创建一个新分类
Mapping	pathname（常用）—— 每个页面根据路径唯一对应一条讨论
Reaction	是否允许点赞
Input position	bottom 或 top
Theme	Light / Dark / Auto
Language	zh-CN（可选）

勾选完成后，Giscus 会为你生成一段 <script> 脚本代码。

四、将 Giscus 嵌入博客文章详情页

在你博客的文章详情页组件中加入：

<div id="giscus-container"></div>
<scriptsrc="https://giscus.app/client.js"data-repo="your-username/my-blog-comments"data-repo-id="你的repo ID"data-category="G