外观
Giscus：从GitHub仓库到VuePress Theme Plume集成
约 980 字大约 3 分钟
进阶工具GitHubPlume
2025-10-25
📋 文档说明
本文档完整记录在 Giscus：从GitHub仓库到VuePress Theme Plume集成的全过程，包含所有步骤、问题排查和解决方案。
🚀 使用Giscus：从GitHub仓库到网站集成
Giscus是一个基于GitHub Discussions的评论系统。它允许你将博客文章的评论直接存储在GitHub的Discussions中，访客使用GitHub账号即可评论。所有数据都存储在GitHub上，无需自建数据库，而且是完全免费的。
创建与配置GitHub仓库
首先，你需要准备一个符合条件的GitHub仓库。
- 创建公开仓库 登录GitHub，点击右上角"+"号，选择"New repository"。仓库名称可设为例如
my-blog-comments，并确保仓库 Visibility 设置为"Public"（公开）。这是因为只有公开仓库的Discussions才能被访客查看。 - 启用Discussions功能 进入你新建的仓库，点击顶部的"Settings"（设置）选项卡。在左侧边栏找到"Features"（功能）部分，勾选"Discussions"复选框以启用该功能。
- 安装Giscus App 为了让Giscus有权限访问你的仓库，需要在GitHub上安装Giscus App。访问 Giscus App安装页面。在安装过程中，你可以选择将权限授予所有仓库，或仅授权给特定的仓库（例如刚才创建的
my-blog-comments仓库）。
在Giscus官网生成配置
完成仓库准备后，前往 Giscus官网 进行配置。页面上有多个配置项，请根据你的需求进行选择。
| 配置步骤 | 关键选项与说明 |
|---|---|
1. 关联仓库 在"Repository"栏位输入你的仓库，格式为用户名/仓库名。 | 确保页面提示"We found the repository and it meets all the requirements!"。 |
| 2. 设置页面与Discussion映射 选择"title"（映射关系）。 | pathname：根据页面的路径映射。 title：根据页面的<title>标签映射。 |
| 3. 选择Discussion分类 选择"Discussion category"。 | 通常可选择"General"（通用）或"Announcements"。你也可以在仓库的Discussions中创建新的分类。 |
| 4. 配置特性 配置"Features"。 | reactions-enabled：是否允许对评论点赞。 input-position：评论框的位置（顶部或底部）。 loading：设置为"lazy"可实现懒加载，提升页面性能。 |
| 5. 选择主题和语言 配置"Theme"和"Language"。 | 选择你喜欢的主题，如light, dark，或选择preferred_color_scheme跟随系统设置。建议将语言"Language"设置为"zh-CN"。 |
完成所有配置后，Giscus官网会实时生成一段对应的<script>代码。这就是你需要嵌入到自己网站中的代码。
集成到你的网站
获取到Giscus生成的脚本代码后，你需要将其嵌入到你的网站中。
请配置 provider: 'Giscus' 并将 data-repo, data-repo-id, data-category 和 data-category-id 作为插件选项传入 repo, repoId, category, categoryId 。
comment: {
provider: 'Giscus', // "Artalk“ | "Giscus" | "Twikoo" | "Waline"
comment: true,
repo: 'Your_Repo',
repoId: 'Your_RepoId',
category: 'Your_Category',
categoryId: 'Your_CategoryId',
}验证与排查
完成集成后，访问你的网站并打开一篇已部署Giscus的文章。尝试发表一条评论，然后检查你的GitHub仓库的"Discussions"板块，确认是否创建了新的讨论帖。
如果评论区没有正常加载，可以尝试以下排查步骤：
- 确认仓库为公开，且已启用Discussions功能。
- 确认已正确安装Giscus App并授权对应仓库。
- 检查Giscus配置中的Repository ID、Category ID等是否填写正确。