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>