为你的Fuwari添加Giscus评论

相信大家都能在某些神秘博客里看见这种主题像Github的评论区，如下图：

展示评论

那么，Astro-Fuwari该怎么搭建这该死的评论呢？哎，我有一计！

准备工作#

1个Github的新存储库

存储库安装Giscus#

首先，打开你的新存储库，点开Settings，接着往下滑，滑到一个带Discussions字样时，将前面的对勾选上，如下图：

接着，访问Giscus官网，滑倒仓库板块，找到giscus app已安装，否则访客将无法评论和回应，点击那里的giscus app，进到安装页面后，选择Only select repositories ，选择你刚刚开启了Discussions的仓库，点击Save，初步的安装就完成了

回到giscus，往下滑，回到仓库板块，填写你的Github用户名/仓库名，我这里是TheLittleQuteGDH/GiscusComments，等到出现成功！该仓库满足所有条件。字样时，那么请进行下一步，如果显示无法在该仓库上使用 giscus。请确保以上条件均已满足。，请从第一步重新开始检查。

下面配置，说一下我的：（按自己需求进行配置）

建议勾选使用严格的标题匹配，防止一个评论被用于多篇博客，Discussion 分类请选择Announcements，我勾选了懒加载评论和将评论框放在评论上方，主题我就选择用户偏好，在启用Giscus中，复制或记住代码，比如我是

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

Fuwari的配置#

1、在\src\components\misc创建一个GiscusComments.astro文件，并写入以下内容：

1
---
2
interface Props {
3
  repo: string;
4
  repoId: string;
5
  category: string;
6
  categoryId: string;
7
  mapping?: string;
8
  reactionsEnabled?: boolean;
9
  emitMetadata?: boolean;
10
  inputPosition?: 'top' | 'bottom';
11
  lang?: string;
12
}
13

14
const {
15
  repo,
16
  repoId,
17
  category,
18
  categoryId,
19
  mapping = 'pathname',
20
  reactionsEnabled = true,
21
  emitMetadata = false,
22
  inputPosition = 'bottom',
23
  lang = 'zh-CN'
24
} = Astro.props;
25
---
26

27
<div id="giscus-container"></div>
28

29
<script define:vars={{ repo, repoId, category, categoryId, mapping, reactionsEnabled, emitMetadata, inputPosition, lang }}>
30
  function loadGiscus() {
31
    const container = document.getElementById('giscus-container');
32
    if (!container) return;
33

34
    // 获取当前主题
35
    const isDark = document.documentElement.classList.contains('dark');
36
    const theme = isDark ? 'dark' : 'light';
37

38
    // 创建Giscus脚本
39
    const script = document.createElement('script');
40
    script.src = 'https://giscus.app/client.js';
41
    script.setAttribute('data-repo', repo);
42
    script.setAttribute('data-repo-id', repoId);
43
    script.setAttribute('data-category', category);
44
    script.setAttribute('data-category-id', categoryId);
45
    script.setAttribute('data-mapping', mapping);
46
    script.setAttribute('data-strict', '0');
47
    script.setAttribute('data-reactions-enabled', reactionsEnabled ? '1' : '0');
48
    script.setAttribute('data-emit-metadata', emitMetadata ? '1' : '0');
49
    script.setAttribute('data-input-position', inputPosition);
50
    script.setAttribute('data-theme', theme);
51
    script.setAttribute('data-lang', lang);
52
    script.setAttribute('data-loading', 'lazy');
53
    script.crossOrigin = 'anonymous';
54
    script.async = true;
55

56
    container.appendChild(script);
57
  }
58

59
  // 监听主题变化
60
  function updateGiscusTheme() {
61
    const giscusFrame = document.querySelector('iframe[src*="giscus"]');
62
    if (giscusFrame) {
63
      const isDark = document.documentElement.classList.contains('dark');
64
      const theme = isDark ? 'dark' : 'light';
65

66
      giscusFrame.contentWindow.postMessage({
67
        giscus: {
68
          setConfig: {
69
            theme: theme
70
          }
71
        }
72
      }, 'https://giscus.app');
73
    }
74
  }
75

76
  // 监听DOM变化来检测主题切换
77
  const observer = new MutationObserver((mutations) => {
78
    mutations.forEach((mutation) => {
79
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
80
        updateGiscusTheme();
81
      }
82
    });
83
  });
84

85
  // 页面加载时初始化
86
  if (document.readyState === 'loading') {
87
    document.addEventListener('DOMContentLoaded', loadGiscus);
88
  } else {
89
    loadGiscus();
90
  }
91

92
  // 开始观察主题变化
93
  observer.observe(document.documentElement, {
94
    attributes: true,
95
    attributeFilter: ['class']
96
  });
97
</script>

2、修改\src\pages\posts的[…slug].astro文件，修改两处：

在顶部添加引用GiscusComments.astro文件的代码。
在许可下方处添加代码：（这里的参数在你刚刚获取的Giscus参数处）

1
import GiscusComments from "../../components/misc/GiscusComments.astro";
2
……
3
……
4
{licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
5

6
<GiscusComments
7
  repo="Your repo"
8
  repoId="Your repoId"
9
  category="Announcements"
10
  categoryId="Your categoryId"
11
/>

添加引用

addgiscus

配置好后，打包push到Github上，部署完成就可以看到Giscus启用了

参考资料#

让你的fuwari有一个自适应的giscus评论区 - fulie blog

你是否在寻找一个评论系统而又不想自托管？又饱受垃圾评论的叨扰？ | 二叉树树的博客