Mizuki实现Giscus评论区 - SuzuhaYuki's Blog

SuzuhaYuki

统计加载中...

标签

SuzuhaYuki

统计加载中...

标签

ADB Cloudflare Comments Docker Domain Friends Hadoop Linux Misskey Mizuki Movie Python UpdateLog Windows YearInReview

393 字

1 分钟

Mizuki实现Giscus评论区

2025-09-13

2025-12-05

Technology

Mizuki

/

Comments

统计加载中...

准备工作#

创建专属仓库
- 登录你的GitHub账户，新建一个 公开（public） 仓库，这个仓库用于存储评论数据。
- 进入仓库的 Settings → General 页面，向下滚动找到 Features 区域，勾选 Discussions 功能并保存。
生成配置代码
- 访问 giscus.app，根据页面引导完成配置向导。
- 填写你的仓库信息，选择合适的话题分类和显示偏好。
- 配置完成后，页面会生成一段类似下面的<script>代码块，请完整复制它：

1
<script src="https://giscus.app/client.js"
2
  data-repo="你的用户名/你的仓库名"
3
    data-repo-id="你的仓库ID"
4
    data-category="Announcements"
5
    data-category-id="你的分类ID"
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>

配置 Mizuki 主题#

1. 修改评论配置文件#

找到项目中的 src/config.ts 文件，定位到评论配置部分。我们需要将原有的Twikoo配置替换为Giscus配置：
原内容：

1
export const commentConfig: CommentConfig = {
2
  enable: false, // 启用评论功能。当设置为 false 时，评论组件将不会显示在文章区域。
3
  twikoo: {
4
    envId: "https://twikoo.vercel.app",
5
    lang: "en", // 设置 Twikoo 评论系统语言为英文
6
  },
7
};

修改为：

1
export const commentConfig: CommentConfig = {
2
  enable: true, // 启用评论功能。当设置为 false 时，评论组件将不会显示在文章区域。
3
  giscus: {
4
    enable: true,
5
    repo: "你的用户名/你的仓库名",
6
    repoId: "你的仓库ID",
7
    category: "Announcements",
8
    categoryId: "你的分类ID",
9
    mapping: "pathname",
10
    strict: "0",
11
    reactionsEnabled: "1",
12
    emitMetadata: "0",
13
    inputPosition: "top",
14
    theme: "preferred_color_scheme",
15
    lang: "zh-CN",
16
  },
17
};

2. 添加 Giscus 组件#

在 src/components/comment/ 目录下，新建一个名为 Giscus.astro 的文件。你可以删除原有的 Twikoo.astro 文件，然后将以下代码完整复制到新文件中：

1
---
2
import { commentConfig } from "@/config";
3

4
interface Props {
5
  path: string;
6
}
7

8
const giscusConfig = commentConfig.giscus;
9
---
10

11
<div class="giscus-container"></div>
12

13
<script is:inline define:vars={{ giscusConfig }}>
14
  (() => {
15
    // 1. 获取当前主题
16
    const getTheme = () => document.documentElement.classList.contains('dark') ? 'dark' : 'light';
17

18
    // 2. 核心加载函数
19
    const loadGiscus = () => {
20
      const root = document.querySelector('.giscus-container');
21
      // 如果没有容器，或者容器内已经有 iframe 了，直接返回
22
      if (!root || root.querySelector('iframe.giscus-frame')) return;
23

24
      const s = document.createElement('script');
25
      s.src = 'https://giscus.app/client.js';
26
      s.async = true;
27

28
      // 展开配置
29
      Object.entries({
30
        'data-repo': giscusConfig.repo,
31
        'data-repo-id': giscusConfig.repoId,
32
        'data-category': giscusConfig.category,
33
        'data-category-id': giscusConfig.categoryId,
34
        'data-mapping': giscusConfig.mapping || 'pathname',
35
        'data-strict': giscusConfig.strict || '0',
36
        'data-reactions-enabled': giscusConfig.reactionsEnabled || '1',
37
        'data-emit-metadata': giscusConfig.emitMetadata || '0',
38
        'data-input-position': giscusConfig.inputPosition || 'top',
39
        'data-lang': giscusConfig.lang || 'zh-CN',
40
        'data-loading': 'lazy',
41
        'data-theme': getTheme() // 优化：直接在此处设置初始主题
42
      }).forEach(([key, value]) => s.setAttribute(key, value));
43

44
      root.appendChild(s);
45
    };
46

47
    // 3. 动态更新主题
48
    const updateTheme = () => {
49
      const iframe = document.querySelector('iframe.giscus-frame');
50
      if (iframe?.contentWindow) {
51
        iframe.contentWindow.postMessage({ giscus: { setConfig: { theme: getTheme() } } }, 'https://giscus.app');
52
      }
53
    };
54

55
    // 4. 初始化
56
    loadGiscus();
57

58
    // 5. 监听主题变化
59
    if (!window._giscusObserver) {
60
      const observer = new MutationObserver((mutations) => {
61
        // 过滤 class 变化，且 iframe 存在时才发消息
62
        if (mutations.some(m => m.type === 'attributes' && m.attributeName === 'class')) {
63
          updateTheme();
64
        }
65
      });
66
      observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
67
      window._giscusObserver = observer;
68
    }
69

70
    // 6. Swup 页面切换支持
71
    const handleSwup = () => loadGiscus();
72
    if (window.swup) {
73
      window.swup.hooks.on('content:replace', handleSwup);
74
    } else {
75
      document.addEventListener('swup:enable', () => {
76
        window.swup?.hooks.on('content:replace', handleSwup);
77
      }, { once: true });
78
    }
79
  })();
80
</script>
81

82
<style>
83
  .giscus-container {
84
    width: 100%;
85
    margin-top: 1rem;
86
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
87
  }
88
  .giscus-container iframe.giscus-frame {
89
    width: 100% !important;
90
    border-radius: var(--radius-large);
91
    border: 1px solid var(--line-divider);
92
    background: transparent;
93
    transition: border-color 0.15s, background-color 0.15s;
94
  }
95
  .giscus-container:hover iframe.giscus-frame {
96
    border-color: var(--primary);
97
  }
98
  :root:not(.dark) .giscus-container {
99
    color-scheme: light;
100
  }
101
  :root.dark .giscus-container {
102
    color-scheme: dark;
103
  }
104
</style>

3. 更新评论组件入口#

接下来，编辑 src/components/comment/index.astro 文件，将原有的Twikoo引用替换为Giscus：
原内容：

1
import Twikoo from "./Twikoo.astro"; //文件内第4行
2

3
if (commentConfig?.enable && commentConfig?.twikoo) { //文件内第16行
4
  commentService = "twikoo"; //文件内第17行
5

6
{commentService === 'twikoo' && <Twikoo path={path} />} //文件内第22行

修改为：

1
import Giscus from "./Giscus.astro";
2

3
if (commentConfig?.enable) {
4
  if (commentConfig?.giscus) {
5
    commentService = "giscus";
6
  }
7

8
{commentService === 'giscus' && <Giscus path={path} />}

4. 更新类型定义#

最后，我们需要在TypeScript类型定义文件中添加Giscus配置的支持。打开 src/types/config.ts，找到评论配置相关的部分：
原内容：

1
twikoo?: TwikooConfig; //文件内第134行
2

3
type TwikooConfig = { //文件内第137行
4
  envId: string; //文件内第138行
5
  region?: string; //文件内第139行

修改为：

1
giscus?: GiscusConfig;
2

3
type GiscusConfig = {
4
  enable: boolean;
5
  repo: string;
6
  repoId: string;
7
  category: string;
8
  categoryId: string;
9
  mapping?: string;
10
  strict?: string;
11
  reactionsEnabled?: string;
12
  emitMetadata?: string;
13
  inputPosition?: string;
14
  theme?: string;