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>

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: "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
};

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>

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

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;