给fuwari主题添加giscus评论区

giscus简介#

giscus 加载时，会使用 GitHub Discussions 搜索 API 根据选定的映射方式（如 URL、pathname、<title> 等）来查找与当前页面关联的 discussion。如果找不到匹配的 discussion，giscus bot 就会在第一次有人留下评论或回应时自动创建一个 discussion。

配置Github#

该仓库是公开的，否则访客将无法查看 discussion。
giscus app 已安装，否则访客将无法评论和回应。
Discussions 功能已在你的仓库中启用。

配置giscus#

打开giscus官网，填入仓库地址。自动生成下面的配置文件

1
<script src="https://giscus.app/client.js"
2
        data-repo="Ham0mer/giscus-fuwari"
3
        data-repo-id="xxxx"
4
        data-category="General"
5
        data-category-id="xxxx"
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文件#

创建GiscusComment#

在 src\components\misc 目录下面创建 GiscusComment.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>

通用引入方法#

例如我准备在文章页面引入评论，编辑 src\pages\posts\[...slug].astro 文件

头部引入刚刚创建的文件

1
import GiscusComment from "../../components/misc/GiscusComment.astro";

在下方找到你想放评论区的位置，粘贴下方代码

1
<GiscusComment repo="csl0p/jksb" repoId="xxx" category="Announcements" categoryId="xxx" />