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

准备工作#

新建一个github仓库，必须为public，开启discussion

打开giscus官网根据需求更改配置，配置完成后复制配置文件

1
<script src="https://giscus.app/client.js"
2
        data-repo="Leaf-0w0/blog-giscus"
3
        data-repo-id="***"
4
        data-category="Announcements"
5
        data-category-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#

打开src/config.ts，将

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

修改为，将giscus: {}内的内容修改为你在官网获取到的配置文件

1
export const commentConfig: CommentConfig = {
2
  enable: true, // 启用评论功能。当设置为 false 时，评论组件将不会显示在文章区域。
3
  giscus: {
4
    enable: true,
5
    repo: "Leaf-0w0/blog-giscus",
6
    repoId: "***",
7
    category: "Announcements",
8
    categoryId: "***",
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
};

在src/components/comment目录中添加一个文件，命名为Giscus.astro，可将Twikoo.astro文件删除

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

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

8
const { path } = Astro.props;
9
const giscusConfig = commentConfig.giscus;
10
---
11

12
<div class="giscus-container">
13
  {giscusConfig && (
14
    <script src="https://giscus.app/client.js"
15
      data-repo={giscusConfig.repo}
16
      data-repo-id={giscusConfig.repoId}
17
      data-category={giscusConfig.category}
18
      data-category-id={giscusConfig.categoryId}
19
      data-mapping={giscusConfig.mapping || "pathname"}
20
      data-strict={giscusConfig.strict || "0"}
21
      data-reactions-enabled={giscusConfig.reactionsEnabled || "1"}
22
      data-emit-metadata={giscusConfig.emitMetadata || "0"}
23
      data-input-position={giscusConfig.inputPosition || "top"}
24
      data-theme={giscusConfig.theme || "preferred_color_scheme"}
25
      data-lang={giscusConfig.lang || "zh-CN"}
26
      data-loading="lazy"
27
      crossorigin="anonymous"
28
      async>
29
    </script>
30
  )}
31
</div>
32

33
<style>
34
  .giscus-container {
35
    width: 100%;
36
    margin-top: 1rem;
37
  }
38
</style>

修改同一目录下的index.astro，将

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} />}

将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;

完成修改#

修改完毕后你的Mizuki主题就能使用giscus评论区了