1
<script src="https://giscus.app/client.js"
2
        data-repo="yCENzh/Fuwari-yCENzh"
3
        data-repo-id="114514"
4
        data-category="Announcements"
5
        data-category-id="1919810"
6
        data-mapping="pathname"
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配置#

接下来对项目动刀,打开src/components/目录下创建一个.astro文件,名字随意,这里以src/components/misc/Giscus.astro为例,粘贴复制好的配置,保存退出

1
<script src="https://giscus.app/client.js"
2
        data-repo="yCENzh/Fuwari-yCENzh"
3
        data-repo-id="R_kgDOPe85cQ"
4
        data-category="Announcements"
5
        data-category-id="DIC_kwDOPe85cc4CuYZG"
6
        data-mapping="pathname"
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>

在你想要放评论区的地方导入元素,以本框架Fuwari为例,元素位置放在许可证卡片下~(好像叫版权信息)~,修改动态路由src/pages/posts/[...slug].astro

1
import Giscus from "../../components/misc/Giscus.astro"; // 导入Giscus
2
...
3
    <div>
4
      <div>
5
        ...
6

7
        {licenseConfig.enable && <License ...></License>}
8

9
        <Giscus /> // Giscus
10
      </div>
11
    </div>
12
...

初入门径#

Giscus自带的preferred_color_scheme只会监听系统级的主题变化,并不会监听Fuwari的setTheme函数,会导致手动切换Fuwari主题时,Giscus并不会同步更新,因此这里手动写出逻辑,并添加comments元数据来控制评论区是否显示

对Giscus.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 = "yCENzh/Fuwari-yCENzh" // 替换成你自己的
16
  repoId = "114514" // 替换成你自己的
17
  category = "Announcements" // 替换成你自己的
18
  categoryId = "1919810" // 替换成你自己的
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
---
2
import { getCollection } from 'astro:content'
3
import MainGridLayout from '@layouts/MainGridLayout.astro'
4
import License from '@components/misc/License.astro'
5
import Giscus from '@components/misc/Giscus.astro'  // 导入 Giscus
6
// ... 其他导入
7
---
8

9
<MainGridLayout banner={entry.data.image} title={entry.data.title}>
10
  <div slot="main" class="flex w-full flex-col">
11
    <div class="mb-6">
12
      <!-- 文章内容 -->
13
      <Content />
14
    </div>
15

16
    <div class="flex w-full flex-col gap-4">
17
      <!-- 其他组件 -->
18

19
      <!-- 版权信息 -->
20
      {licenseConfig.enable && (
21
        <License
22
          title={entry.data.title}
23
          pubDate={entry.data.published}
24
          url={Astro.url.href}
25
        />
26
      )}
27

28
      <!-- 渲染评论区 -->
29
      <Giscus />
30
    </div>
31
  </div>
32

33
  <!-- 侧边栏等其他内容 -->
34
</MainGridLayout>