1
interface Props {
2
  repo: string;
3
  repoId: string;
4
  category: string;
5
  categoryId: string;
6
  mapping?: string;
7
  reactionsEnabled?: boolean;
8
  emitMetadata?: boolean;
9
  inputPosition?: 'top' | 'bottom';
10
  lang?: string;
11
}
12

13
const {
14
  repo,
15
  repoId,
16
  category,
17
  categoryId,
18
  mapping = 'pathname',
19
  reactionsEnabled = true,
20
  emitMetadata = false,
21
  inputPosition = 'bottom',
22
  lang = 'zh-CN'
23
} = Astro.props;
24
---
25

26
<div id="giscus-container"></div>
27

28
<script define:vars={{ repo, repoId, category, categoryId, mapping, reactionsEnabled, emitMetadata, inputPosition, lang }}>
29
  function loadGiscus() {
30
    const container = document.getElementById('giscus-container');
31
    if (!container) return;
32

33
    const isDark = document.documentElement.classList.contains('dark');
34
    const theme = isDark ? 'dark' : 'light';
35

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

53
    container.appendChild(script);
54
  }
55

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

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

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

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

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

1
import path from "node:path";
2
import License from "@components/misc/License.astro";
3
import Markdown from "@components/misc/Markdown.astro";
4
import AISummary from "@components/misc/AISummary.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";
9
import { getSortedPosts } from "@utils/content-utils";
10
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
11
import { Icon } from "astro-icon/components";
12
import { licenseConfig } from "src/config";
13
import ImageWrapper from "../../components/misc/ImageWrapper.astro";
14
import PostMetadata from "../../components/PostMeta.astro";
15
import { profileConfig, siteConfig } from "../../config";
16
import { formatDateToYYYYMMDD } from "../../utils/date-utils";

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>

1
-   首先导入 Giscus 组件：

1
import { getEntry, render } from "astro:content";
2
import Giscus from "@components/misc/Giscus.astro";
3
import Markdown from "@components/misc/Markdown.astro";
4
import MainGridLayout from "@layouts/MainGridLayout.astro";
5
import { Icon } from "astro-icon/components";
6
import { siteConfig } from "../config";
7
import { friends } from "../friends_data";

1
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
2
            {friends.map((friend) => (
3
                <a href={friend.url} target="_blank" rel="noopener noreferrer" class="friend-card">
4
                    <div class="flex items-center gap-2">
5
                        <img src={friend.avatar} loading="lazy" class="w-5 h-5 rounded" alt={friend.name}>
6
                        <div class="font-bold text-black dark:text-white">{friend.name}</div>
7
                    </div>
8
                    <div class="text-sm text-black/50 dark:text-white/50">{friend.description}</div>
9
                </a>
10
            ))}
11
        </div>
12

13
        <Giscus
14
             repo="worhllo2/Blog-fuwari"
15
             repoId="R_kgDOR4xu1A"
16
             category="General"
17
             categoryId="DIC_kwDOR4xu1M4C58lt"
18
        />
19

20
        </div>
21
</MainGridLayout>