1
src/components/misc/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,
16
  repoId,
17
  category,
18
  categoryId,
19
  mapping = 'pathname',
20
  reactionsEnabled = true,
21
  emitMetadata = false,
22
  inputPosition = '根据你的设置定 ‘top’ or ‘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
    const isDark = document.documentElement.classList.contains('dark');
35
    const theme = isDark ? 'dark' : 'light';
36

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

54
    container.appendChild(script);
55
  }
56

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

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

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

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

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

1
src/pages/posts/[...slug].astro

1
<!-- 开头 -->
2
import path from "node:path";
3
import License from "@components/misc/License.astro";
4
import Markdown from "@components/misc/Markdown.astro";
5
import Giscus from "../../components/misc/Giscus.astro";
6
import I18nKey from "@i18n/i18nKey";
7
import { i18n } from "@i18n/translation";
8
import MainGridLayout from "@layouts/MainGridLayout.astro";

1
<!-- 中间 -->
2
            <Markdown class="mb-6 markdown-content onload-animation">
3
                <Content />
4
            </Markdown>
5

6
            {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
7

8
            <Giscus
9
               repo="你的用户名/仓库名"
10
               repoId="仓库ID"
11
               category="Announcements"
12
               categoryId="分类 ID"
13
               lang="语言，默认‘zh-CN’"
14
            />
15
            <br>