Firefly博客添加评论功能

归档29

文章示例10 Docker5 博客指南3 互联网备忘录2 机场2 云电脑1 域名1 技术笔记1 文学印记1 时代观察1 评论区1 诗海拾贝1

491 字

2 分钟

Firefly博客添加评论功能

2026-08-07

除了友链之外，再加个评论的功能，那就可以收到大伙的评论了！

我选择使用giscus来实现评论功能。主要是它不需要依赖于数据库，而且配置也比较简单，最主要的是依赖于Github并且纯免费！！！

配置giscus##

首先，你需要创建一个新的GitHub库用来保存博客的那些评论，你需要确保该仓库是公开的,否则访客将无法查看 Discussion。
然后，你需要给你的这个仓库repo安装giscus app,否则访客将无法评论和回应。
最后，你需要确保 Discussions 功能已在你的仓库中启用。

打开giscus官方网站 https://giscus.app/，进行配置：

语言：选择你目前正在使用的语言
仓库：填写你刚刚创建的仓库(格式为你的用户名/仓库名)
页面 ↔️ discussion 映射关系(默认即可)
Discussion 分类（默认即可）
特性（默认即可）
主题（默认即可）

按照顺序配置好之后，下方会自动生成

1
`<script src="https://giscus.app/client.js"
2
 data-repo="[在此输入仓库]"
3
 data-repo-id="[在此输入仓库 ID]"
4
 data-category="[在此输入分类名]"
5
 data-category-id="[在此输入分类 ID]"
6
 data-mapping="pathname"
7
 data-strict="0"
8
 data-reactions-enabled="1"
9
 data-emit-metadata="0"
10
 data-input-position="bottom"
11
 data-theme="preferred_color_scheme"
12
 data-lang="zh-CN"
13
 crossorigin="anonymous"
14
 async>
15
</script>`

添加评论到指定页面##

只需要在每个页面对应的.astro文件中的</MainGridLayout>前面添加上方生成的代码即可。

比如我要在文章页面添加评论，找到src\pages\posts\[...slug].astro文件，在文件中找到</MainGridLayout>标签，在其前面添加上方生成的代码即可。

1
 `<Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
2
 </div>}
3
 </a>
4
 </div>
5
<!-- giscus评论 -->
6
+ <script src="https://giscus.app/client.js"
7
+    data-repo="AULyPc/aulypc.github.io"
8
+    data-repo-id="xxxxxxxxxxx"
9
+    data-category="Announcements"
10
+    data-category-id="xxxxxxxxxxxxx"
11
+    data-mapping="pathname"
12
+    data-strict="0"
13
+    data-reactions-enabled="1"
14
+    data-emit-metadata="0"
15
+    data-input-position="top"
16
+    data-theme="preferred_color_scheme"
17
+    data-lang="zh-CN"
18
+    crossorigin="anonymous"
19
+    async>
20
+</script>
21
</MainGridLayout>
22
<style is:global>
23
#post-container :nth-child(1) { animation-delay: calc(var(--content-delay) + 0ms) }
24
#post-container :nth-child(2) { animation-delay: calc(var(--content-delay) + 50ms) }
25
#post-container :nth-child(3) { animation-delay: calc(var(--content-delay) + 100ms) }
26
#post-container :nth-child(4) { animation-delay: calc(var(--content-delay) + 175ms) }
27
#post-container :nth-child(5) { animation-delay: calc(var(--content-delay) + 250ms) }
28
#post-container :nth-child(6) { animation-delay: calc(var(--content-delay) + 325ms) }
29
</style>`