428 字

2 分钟

为你的Blog添加giscus评论

2025-10-01

主题魔改

blog

/

astro

/

giscus

最近把博客的主题从Akiba换到了功能更加完善的Fuwari，非常蛋疼的是，Fuwari默认并不支持任何一款评论系统。想要评论，只能对源码进行一些修改。好在有现成的作业可以抄 ~~Good-Github-Copy-And-Paste~~

Giscus#

先在Github创建一个公开的仓库并开启评论用来存放评论。

IMPORTANT
该仓库必须是公开的，否则访客将无法查看 discussion。

然后在这里安装Giscus App 在这里填入用来存储评论的仓库映射填pathname：以文章路径区分评论区，即使换域名也能匹配特性我只开启了懒加载生成的js应该如下所示

1
<script src="https://giscus.app/client.js"
2
        data-repo="YOUR_REPO_NAME"
3
        data-repo-id="REPO_ID"
4
        data-category="Announcements"
5
        data-category-id="CATEGORY_ID"
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>

Astro的魔改#

创建Giscus的预制代码#

在src目录下的components目录中新建Giscus.astro 把上面生成的js粘贴进去

修改文章页面#

找到负责渲染文章的 astro 文件，其应该在pages目录下（这其实与其他框架是类似的，也就是网站由 “页面” 构成，其中会有一个页面是显示文章的）

在 Fuwari 主题中，其应该在src->pages->posts->[...slug].astro，对其进行修改：

1
---
2
import CommentSection from '@components/Giscus.astro'
3
---
4
...
5
  <!-- 文章渲染主元素 -->
6
  <div>
7
    ...
8
    <!-- 最后一个元素 -->
9
    <div>
10
      ...
11
    </div>
12
    <CommentSection />
13
  </div>
14
...

如果以 Fuwari 主题为例，其应该放置在版权信息下

1
<div>
2
  ...
3

4
  {licenseConfig.enable && <License ...></License>}
5

6
  <CommentSection />
7
</div>

应该就可以了

一些问题#

由于Giscus的js并没有使用主题的css,所以在某些情况下，比如说深色模式下有些文字和太刺眼/难以看清，还需要进一步的优化。

为你的Blog添加giscus评论

https://www.suikol.top/posts/astro-giscus/

作者

Suikol

发布于

2025-10-01

许可协议

CC BY-NC-SA 4.0