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
    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
     <!-- always show cover as long as it has one -->
2

3
    {entry.data.image &&
4
        <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
5
    }
6

7
    <Markdown class="mb-6 markdown-content onload-animation">
8
        <Content />
9
    </Markdown>
10

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

13
   <Giscus
14
       repo="username/repo"
15
       repoId=""
16
       category="Announcements"
17
       categoryId=""
18
   />
19
   <br>
20
</div>
21
</div>