1795 字
9 分钟
将 Giscus 评论插件添加到博客

前言#

如果你的静态博客没有评论区,又不想自己搭建一个评论系统,那么 Giscus 就是一个不错的选择。
接下来就手把手教你添加这个件并配置它。

注意

接下来的教程将以 Astro 网站为例子。由于 Giscus 使用 JavaScript 脚本,所以大多数博客网站都能顺利接入。
如果你用的博客是 Astro 或以它为架构的 Fuwari,那么这篇文章或许 99% 适合。

需求#

  1. 一个 GitHub 账号。

配置 Giscus#

在博客仓库存放评论#

注意

如果你博客是开源的(选择这种方法必须要开源!如果不想开源可以选择存放评论于 #在专用仓库存放评论 ),那么我更推荐你直接跟下面这个步骤配置使用前的安装,这么做是为了更好地集中管理关于博客的东西
当然,如果你想分开来存放,把博客源代码评论区的内容分开,那么请选择使用第二种方法,然后这里的内容可以不用看了,可以前往 #在专用仓库存放评论 查看对应的方法。

  1. 打开 GitHub 上你博客的仓库地址,点击顶部 Settings(设置),拉到 Features(功能),选择 Discussions 前面的小方格,点击一下,打开 Discussions 功能。等到出现一个小勾即代表开启了 Discussions 讨论功能。 github-settings-features-discussions
  2. 点击打开 https://github.com/apps/giscus ,选择带色按钮 Install ,将其安装在你的 GitHub 个人账户中(如果你博客仓库在别的组织,请选择安装到组织)。
  3. 安装完毕,可以跳到 #获取专用代码 查看需要插入的 JS 代码了。

在专用仓库存放评论#

提示

这是个通用的方法,你依然可以将其设置为你博客评论存放的仓库,即使你的博客是开源的;但是如果你的博客不开源,那么请务必使用这个方法。
注意:使用这种方法并不能更好地集中管理关于博客的东西,但是能防止某些脑残人物的评论污染了你的主仓库。

  1. 打开 https://github.com/new ,创建一个新的仓库。
  2. 在新仓库内,点击顶部 Settings(设置),拉到 Features(功能),选择 Discussions 前面的小方格,点击一下,打开 Discussions 功能。等到出现一个小勾即代表开启了 Discussions 讨论功能。 github-settings-features-discussions
  3. 点击打开 https://github.com/apps/giscus ,选择带色按钮 Install ,将其安装在你的 GitHub 个人账户中(如果你博客仓库在别的组织,请选择安装到组织)。
  4. 安装完毕。

获取专用代码#

打开 https://giscus.app/zh-CN ,在其页面进行必要的配置:

  • 语言:如果你的博客不搞 i18n 国际化,那我推荐选择 简体中文(博客使用的语言)。反之推荐选择 English
  • 仓库:如果你选择上面第一种方案(在博客仓库内),那么就填写你博客仓库地址(以 用户名/仓库名 形式填写,填你自己的。比如 Ad-closeNN/blog-fuwari)。如果是新的专用仓库,那么就填写新的专用仓库地址,格式同理。成功了为如图所示: giscus-repo-successful
  • 页面 ↔️ discussion 映射关系:这个有说法。如果你博客没有很多重复标题的页面,且不更换文章标题,推荐选择 Discussion 的标题包含页面的 <title>,这将会以 页面标题 -或/或其他分隔符 网站名 为 title 开一个新讨论。如: github-giscus-conversation 其他如 pathname,将会把 /post/xxx 显示出来。但是显示效果(特别是中文路径)可能没那么好?
    参考&图片原出处: https://www.2x.nz/posts/you-is-me-huh/ image.png
  • Discussion 分类:推荐选择 General。如果你只想让访客在博客发布评论,就选择 Announcements。这样即使能在 GitHub 看到评论,也无法直接在 GitHub 回复,必须在博客的评论区内回复。没啥用,不如 *General
  • 特性:推荐启用 启用主帖子上的反应(reaction) 将评论框放在评论上方 懒加载评论
  • 其他无关紧要的请自行配置。

配置完成后,将会获得一串独特的 JavaScript 代码(例如下面的)。将其复制下来:

<script src="https://giscus.app/client.js"
data-repo="Ad-closeNN/blog-friends"
data-repo-id="R_kgDOPb5ZJw"
data-category="Announcements"
data-category-id="DIC_kwDOPb5ZJ84CuPmR"
data-mapping="title"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>

插入代码#

打开 src/pages/posts/[..slug].astro,在最下方的 </MainGridLayout> 的上面插入你在 Giscus 复制的 JavaScript 代码:

src/pages/posts/[..slug].astro
<a href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.prevSlug}]}>
{entry.data.prevSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-end gap-4">
<div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
{entry.data.prevTitle}
</div>
<Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
</div>}
</a>
</div>
<!-- 上面是你的其他原本的代码 -->
<!-- 评论区在这 -->
<script src="https://giscus.app/client.js"
data-repo="Ad-closeNN/blog-friends"
data-repo-id="R_kgDOPb5ZJw"
data-category="General"
data-category-id="DIC_kwDOPb5ZJ84CuPmR"
data-mapping="title"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
</MainGridLayout>

放在这个文件 src/posts/[..slug].astro 内,仅仅只有 /posts/ 下的文章拥有评论区。
如果你需要在特定的页面(比如 /about/ )中使用 Giscus,仅需打开和 Markdown 同名的文件(如 /about/ 的 Markdown 文件是 about.md)如 src/pages/about.astro,用刚才的方法插入 Giscus 代码即可实现特定页面拥有 Giscus 评论区

---
13 collapsed lines
import { getEntry, render } from "astro:content";
import Markdown from "@components/misc/Markdown.astro";
import I18nKey from "../i18n/i18nKey";
import { i18n } from "../i18n/translation";
import MainGridLayout from "../layouts/MainGridLayout.astro";
const aboutPost = await getEntry("spec", "about");
if (!aboutPost) {
throw new Error("About page content not found");
}
const { Content } = await render(aboutPost);
---
<MainGridLayout title={i18n(I18nKey.about)} description="关于">
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
<div class="card-base z-10 px-9 py-6 relative w-full ">
<Markdown class="mt-2">
<Content />
</Markdown>
</div>
</div>
<br>
<!-- 评论区 -->
<script src="https://giscus.app/client.js"
data-repo="Ad-closeNN/blog-friends"
data-repo-id="R_kgDOPb5ZJw"
data-category="General"
data-category-id="DIC_kwDOPb5ZJ84CuPmR"
data-mapping="title"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
</MainGridLayout>

配置网站源 Origin#

参考:https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#origins

如果你的博客是开源的,那么有些人可能会直接 Fork 你的博客仓库,转为自己用。
这时候如果那人不会配置评论区,那么有意思的来了,他发的评论会直接到达你 Giscus 配置的仓库,而不是在他仓库。

所以我们可以配置一个 giscus.json 在你 Giscus 设置的仓库 的根目录(如我在上面 #在专用仓库存放评论 中设定了仓库为 Ad-closeNN/blog-friends,那就去到这个仓库),新建一个文件 giscus.json,例如:

giscus.json
{
"origins": ["https://adclosenn.top"] // 这个域名填你自己的
}
注意

origins 里面不推荐填写 localhost 等本地地址,这样会导致别人把博客 Fork 在本地依然能发表评论到你仓库。 如果你确认这个风险,那么可以直接填 本地地址 + 端口,比如 Astro 的本地地址为 localhost,端口为 4321,那么填写 http://localhost:4321

giscus.json
{
"origins": ["https://adclosenn.top", "http://localhost:4321"]
}

配置好后,本地开发环境(localhost) 和除你设定之外的域名将会直接被 Giscus 切断评论区的连接: chrome-github-deny-connection

反垃圾评论#

一般来说不会有人无缘无故就对你的文章评论区发布脑残降智虚假的评论,因为 Giscus 的评论需要通过 GitHub 授权登录才能发布,所以这算是一个初级发布门槛。

如果真的有,那么确实很不幸了。你可以通过删评论的方法解决。
也可以通过 配置 Akismet 等来实现自动化反垃圾评论。但是 Akismet 的效果据说十分鸡肋。

将 Giscus 评论插件添加到博客
https://adclosenn.top/posts/giscus/
作者
Ad_closeNN
发布于
2025-08-17
许可协议
CC BY-NC-SA 4.0