将 Giscus 评论插件添加到博客

前言

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

需求

一个 GitHub 账号。

配置 Giscus

在博客仓库存放评论

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

在专用仓库存放评论

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

获取专用代码

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

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

配置完成后，将会获得一串独特的 JavaScript 代码（例如下面的）。将其复制下来：

1
<script src="https://giscus.app/client.js"
2
        data-repo="Ad-closeNN/blog-friends"
3
        data-repo-id="R_kgDOPb5ZJw"
4
        data-category="Announcements"
5
        data-category-id="DIC_kwDOPb5ZJ84CuPmR"
6
        data-mapping="title"
7
        data-strict="0"
8
        data-reactions-enabled="1"
9
        data-emit-metadata="0"
10
        data-input-position="top"
11
        data-theme="preferred_color_scheme"
12
        data-lang="zh-CN"
13
        data-loading="lazy"
14
        crossorigin="anonymous"
15
        async>
16
</script>

插入代码

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

143
        <a href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
144
           class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.prevSlug}]}>
145
            {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">
146
                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
147
                    {entry.data.prevTitle}
148
                </div>
149
                <Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
150
            </div>}
151
        </a>
152
    </div>
153

154
    <!-- 上面是你的其他原本的代码 -->
155
    <!-- 评论区在这 -->
156
    <script src="https://giscus.app/client.js"
157
            data-repo="Ad-closeNN/blog-friends"
158
            data-repo-id="R_kgDOPb5ZJw"
159
            data-category="General"
160
            data-category-id="DIC_kwDOPb5ZJ84CuPmR"
161
            data-mapping="title"
162
            data-strict="0"
163
            data-reactions-enabled="1"
164
            data-emit-metadata="0"
165
            data-input-position="top"
166
            data-theme="preferred_color_scheme"
167
            data-lang="zh-CN"
168
            data-loading="lazy"
169
            crossorigin="anonymous"
170
            async>
171
    </script>
172
</MainGridLayout>

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

1
---
13 collapsed lines
2
import { getEntry, render } from "astro:content";
3
import Markdown from "@components/misc/Markdown.astro";
4
import I18nKey from "../i18n/i18nKey";
5
import { i18n } from "../i18n/translation";
6
import MainGridLayout from "../layouts/MainGridLayout.astro";
7

8
const aboutPost = await getEntry("spec", "about");
9

10
if (!aboutPost) {
11
  throw new Error("About page content not found");
12
}
13

14
const { Content } = await render(aboutPost);
15
---
16
<MainGridLayout title={i18n(I18nKey.about)} description="关于">
17
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
18
        <div class="card-base z-10 px-9 py-6 relative w-full ">
19
            <Markdown class="mt-2">
20
                <Content />
21
            </Markdown>
22
        </div>
23
    </div>
24

25
    <br>
26
    <!-- 评论区 -->
27
    <script src="https://giscus.app/client.js"
28
        data-repo="Ad-closeNN/blog-friends"
29
        data-repo-id="R_kgDOPb5ZJw"
30
        data-category="General"
31
        data-category-id="DIC_kwDOPb5ZJ84CuPmR"
32
        data-mapping="title"
33
        data-strict="0"
34
        data-reactions-enabled="1"
35
        data-emit-metadata="0"
36
        data-input-position="top"
37
        data-theme="preferred_color_scheme"
38
        data-lang="zh-CN"
39
        data-loading="lazy"
40
        crossorigin="anonymous"
41
        async>
42
</script>
43
</MainGridLayout>

配置网站源 Origin

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

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

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

1
{
2
  "origins": ["https://adclosenn.top"] // 这个域名填你自己的
3
}

注意

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

1
{
2
  "origins": ["https://adclosenn.top", "http://localhost:4321"]
3
}

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

反垃圾评论

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

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