为你的 Fuwari 添加 Artalk 评论系统

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

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

8
const isEnabled = commentConfig.enable;
9

10
const config = isEnabled
11
  ? {
12
      server: commentConfig.server,
13
      el: "#artalk",
14
      site: siteConfig.title,
15
      pageKey: Astro.props.path,
16
      darkMode: "auto",
17
      pageTitle: "",
18
    }
19
  : null;
20
---
21
{isEnabled && config && (
22
    <!-- Artalk -->
23
<div class="relative w-full">
24
    <!-- 挂载点 -->
25
    <div id="artalk" style="--at-color-main: var(--primary); --at-color-bg: var(--card-bg); --at-color-border: var(--line-divider);"></div>
26
    <!-- 引入 Artalk 样式 -->
27
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/artalk/dist/Artalk.css"/>
28

29
    <!-- 脚本逻辑 -->
30
    <script type="module" is:inline define:vars={{config}}>
31
        import Artalk from 'https://cdn.jsdelivr.net/npm/artalk/dist/Artalk.mjs';
32

33
        // 初始化 Artalk
34
        const artalk = Artalk.init(config);
35

36
        // 深色模式
37
        function updateTheme() {
38
            const isDark = document.documentElement.classList.contains('dark');
39
            artalk.setDarkMode(isDark);
40
        }
41

42
        updateTheme();
43

44
        const observer = new MutationObserver((_mutations) => {
45
            updateTheme();
46
        });
47

48
        observer.observe(document.documentElement, {
49
            attributes: true,
50
            attributeFilter: ['class'],
51
        });
52
    </script>
53
</div>
54
)}

1
export type ExpressiveCodeConfig = {
2
    theme: string;
3
};
4

5
export type CommentConfig = {
6
    enable: boolean;
7
    server: string;
8
};

1
import type {
2
    CommentConfig,
3
    ExpressiveCodeConfig,
4
    LicenseConfig,
5
    NavBarConfig,
6
    ProfileConfig,
7

8
    // 其他代码
9

10
    theme: "github-dark",
11
};
12

13
export const commentConfig: CommentConfig = {
14
    enable: true,
15
    server: "https://artalk.example.com", // 填写你的 Artalk 后端地址
16
};

1
    tags: z.array(z.string()).optional().default([]),
2
    category: z.string().optional().nullable().default(""),
3
    lang: z.string().optional().default(""),
4
    comment: z.boolean().optional().default(true),

1
---
2
import path from "node:path";
3
import Artalk from "@components/comment/Artalk.astro";
4
import License from "@components/misc/License.astro";
5
import Markdown from "@components/misc/Markdown.astro";
6
import I18nKey from "@i18n/i18nKey";
7
import { i18n } from "@i18n/translation";
8

9
// 其他代码
10

11
            </div>}
12
        </a>
13
    </div>
14

15
    <!-- 评论区 -->
16
    {entry.data.comment && <Artalk path={getPostUrlBySlug(entry.slug)} />}
17

18
</MainGridLayout>