为你的 Fuwari 添加 Artalk 评论系统

TIP
本喂饭级教程用的是 1Panel 使用 Docker Compose 部署 Artalk 。
有一说一，1Panel 真香。

用 Fuwari 的小伙伴可以火速来前来围观，为你的博客添加 Artalk 评论系统。

Q ：为什么选择使用 Artalk 作为我的评论系统？

来自 Artalk ：

Artalk 是一款简单易用但功能丰富的评论系统，你可以开箱即用地部署并置入任何博客、网站、Web 应用。
🍃 前端 ~40KB，纯天然 Vanilla JS
🍱 后端 Golang，高效轻量跨平台
🐳 通过 Docker 一键部署，方便快捷
🌈 开源程序，自托管，隐私至上

Artalk 功能完善，轻量高效，同时还支持缓存，并且不用登录游客也能发表评论。

萌樱觉得，确实是一个很不错的评论系统。（虽然没用过别的

安装 Artalk#

打开 1Panel ➡️ 容器 ➡️ 编排 ➡️ 创建编排
来源：编辑，文件夹填 Artalk ，然后在下方输入 docker-compose.yml 的内容，保存即可

1
 version: "3.8"
2
 services:
3
   artalk:
4
     container_name: artalk
5
     image: artalk/artalk-go
6
     restart: unless-stopped
7
     build:
8
       context: ./
9
       dockerfile: Dockerfile
10
     ports:
11
       - 23366:23366 # 端口号可以自定义，这里映射原来的端口
12
     volumes:
13
       - ./data:/data
14
     environment:
15
       - TZ=Asia/Shanghai
16
       - ATK_LOCALE=zh-CN
17
       - ATK_SITE_DEFAULT=你的博客名称 # 记得改
18
       - ATK_SITE_URL=你的博客地址 # 记得改
19
     networks:
20
       - 1panel-network
21

22
 networks:
23
   1panel-network:
24
     external: true

等进度条跑完，就算是安装成功了。

配置 Artalk#

安装完成后，点击操作里面的终端连接到容器内部配置管理员账户。

1
 artalk admin

根据提示输入你的信息即可。

配置反代#

网站 ➡️ 创建网站 ➡️ 选择反向代理
域名：填入你的 Artalk 域名
代理地址：http://127.0.0.1:23366

保存后就能访问你的 Artalk 域名进行登录操作了。

需要配置 HTTPS 的话请自行配置，这里就不在赘述了。

WARNING
登录之后千万不要手滑把账号删了，不然会登录进不去，别问我是怎么知道的。(￣へ￣)

接入 Artalk#

IMPORTANT
组件使用 CDN 加载 Artalk 资源，不一定适合所有人。不想使用 CDN 的小伙伴请自行修改代码。

特性
是否开启文章评论
公共 CDN 加载资源
全适配 Fuwari 主题色
组件懒加载

创建 Artalk 组件#

1
---
2
interface Props {
3
    pageKey: string;
4
    pageTitle?: string;
5
    server: string;
6
    site: string;
7
    cdnCss?: string;
8
    cdnJs?: string;
9
}
10

11
const {pageKey, pageTitle, server, site, cdnCss, cdnJs} = Astro.props;
12
const serverOrigin = new URL(server).origin;
13

14
const cssUrl = cdnCss || `${server}/dist/Artalk.css`;
15
const jsUrl = cdnJs || `${server}/dist/Artalk.js`;
16

17
const cssOrigin = new URL(cssUrl).origin;
18
const jsOrigin = new URL(jsUrl).origin;
19
const origins = [...new Set([serverOrigin, cssOrigin, jsOrigin])];
20
---
21

22
{origins.map(origin => (
23
<Fragment key={origin}>
24
    <link rel="preconnect" href={origin} crossorigin/>
25
    <link rel="dns-prefetch" href={origin}/>
26
</Fragment>
27
    ))}
28

29
<div
30
        id="artalk-comments"
31
        data-page-key={pageKey}
32
        data-page-title={pageTitle}
33
        data-server={server}
34
        data-site={site}
35
        data-css-url={cssUrl}
36
        data-js-url={jsUrl}
37
></div>
38

39
<script>
40
    interface ArtalkInstance {
41
        destroy: () => void;
42
        setDarkMode: (dark: boolean) => void;
43
    }
44

45
    interface ArtalkConfig {
46
        el: string;
47
        pageKey: string;
48
        pageTitle?: string;
49
        server: string;
50
        site: string;
51
        darkMode: boolean;
52
    }
53

54
    declare global {
55
        interface Window {
56
            Artalk: {
57
                init: (config: ArtalkConfig) => ArtalkInstance;
58
            };
59
        }
60
    }
61

62
    const state = {
63
        artalkInstance: null as ArtalkInstance | null,
64
        themeObserver: null as MutationObserver | null,
65
        intersectionObserver: null as IntersectionObserver | null,
66
        currentDarkMode: null as boolean | null,
67
        scriptLoadPromise: null as Promise<void> | null,
68
        isInitializing: false,
69
        hasInitialized: false,
70
    };
71

72
    function cleanup(): void {
73
        if (state.artalkInstance) {
74
            try {
75
                state.artalkInstance.destroy();
76
            } catch {
77
                // 静默处理
78
            }
79
            state.artalkInstance = null;
80
        }
81

82
        state.themeObserver?.disconnect();
83
        state.themeObserver = null;
84

85
        state.intersectionObserver?.disconnect();
86
        state.intersectionObserver = null;
87

88
        state.currentDarkMode = null;
89
        state.isInitializing = false;
90
        state.hasInitialized = false;
91
    }
92

93
    function loadCSS(url: string): void {
94
        if (document.getElementById('artalk-css')) return;
95

96
        const link = document.createElement('link');
97
        link.id = 'artalk-css';
98
        link.rel = 'stylesheet';
99
        link.href = url;
100
        link.media = 'print';
101
        link.onload = () => {
102
            link.media = 'all';
103
        };
104
        document.head.appendChild(link);
105
    }
106

107
    function loadJS(url: string): Promise<void> {
108
        if (state.scriptLoadPromise) return state.scriptLoadPromise;
109
        if (window.Artalk) return Promise.resolve();
110

111
        state.scriptLoadPromise = new Promise((resolve, reject) => {
112
            const script = document.createElement('script');
113
            script.src = url;
114
            script.async = true;
115
            script.onload = () => resolve();
116
            script.onerror = () => {
117
                state.scriptLoadPromise = null;
118
                reject(new Error('Failed to load Artalk.js'));
119
            };
120
            document.body.appendChild(script);
121
        });
122

123
        return state.scriptLoadPromise;
124
    }
125

126
    function isDarkMode(): boolean {
127
        return document.documentElement.classList.contains('dark');
128
    }
129

130
    function setupThemeObserver(): void {
131
        if (state.themeObserver) return;
132

133
        state.themeObserver = new MutationObserver(() => {
134
            if (!state.artalkInstance) return;
135

136
            const dark = isDarkMode();
137
            if (dark !== state.currentDarkMode) {
138
                state.currentDarkMode = dark;
139
                state.artalkInstance.setDarkMode(dark);
140
            }
141
        });
142

143
        state.themeObserver.observe(document.documentElement, {
144
            attributes: true,
145
            attributeFilter: ['class'],
146
        });
147
    }
148

149
    async function initArtalk(): Promise<void> {
150
        const container = document.getElementById('artalk-comments');
151

152
        if (!container || state.hasInitialized || state.isInitializing) {
153
            return;
154
        }
155

156
        state.isInitializing = true;
157

158
        const {pageKey, pageTitle, server, site, cssUrl, jsUrl} = container.dataset;
159

160
        if (!pageKey || !server || !site || !cssUrl || !jsUrl) {
161
            console.error('Artalk: Missing required configuration');
162
            state.isInitializing = false;
163
            return;
164
        }
165

166
        try {
167
            loadCSS(cssUrl);
168
            await loadJS(jsUrl);
169

170
            if (!document.getElementById('artalk-comments')) {
171
                state.isInitializing = false;
172
                return;
173
            }
174

175
            state.currentDarkMode = isDarkMode();
176

177
            state.artalkInstance = window.Artalk.init({
178
                el: '#artalk-comments',
179
                pageKey,
180
                pageTitle,
181
                server,
182
                site,
183
                darkMode: state.currentDarkMode,
184
            });
185

186
            state.hasInitialized = true;
187
            setupThemeObserver();
188
        } catch (error) {
189
            console.error('Artalk initialization failed:', error);
190
        } finally {
191
            state.isInitializing = false;
192
        }
193
    }
194

195
    function setupLazyLoad(): void {
196
        const container = document.getElementById('artalk-comments');
197

198
        if (!container || state.hasInitialized) return;
199

200
        state.intersectionObserver?.disconnect();
201

202
        state.intersectionObserver = new IntersectionObserver(
203
            (entries) => {
204
                if (entries[0]?.isIntersecting && !state.hasInitialized) {
205
                    initArtalk();
206
                    state.intersectionObserver?.disconnect();
207
                }
208
            },
209
            {rootMargin: '400px 0px', threshold: 0}
210
        );
211

212
        state.intersectionObserver.observe(container);
213
    }
214

215
    document.addEventListener('astro:before-swap', cleanup);
216
    document.addEventListener('astro:page-load', setupLazyLoad);
217

218
    if (document.readyState === 'loading') {
219
        document.addEventListener('DOMContentLoaded', setupLazyLoad, {once: true});
220
    } else {
221
        setupLazyLoad();
222
    }
223
</script>
224

225
<style is:global>
226
    #artalk-comments {
227
        --atk-color-main: var(--primary, #3b82f6);
228
        --atk-color-bg: var(--card-bg, #ffffff);
229
    }
230

231
    :root.dark #artalk-comments {
232
        --atk-color-bg: var(--card-bg, #1e1e1e);
233
    }
234

235
    #artalk-comments a:not(.atk-send-btn) {
236
        color: var(--atk-color-main) !important;
237
        transition: opacity 0.2s ease;
238
    }
239

240
    #artalk-comments a:not(.atk-send-btn):hover {
241
        opacity: 0.8;
242
    }
243

244
    #artalk-comments .atk-send-btn {
245
        background: var(--atk-color-main) !important;
246
        transition: opacity 0.2s ease;
247
    }
248

249
    #artalk-comments .atk-send-btn:hover {
250
        opacity: 0.9;
251
    }
252

253
    #artalk-comments .atk-dropdown .atk-dropdown-item.active span,
254
    #artalk-comments .atk-dropdown .atk-dropdown-item:hover,
255
    #artalk-comments .atk-dropdown .atk-dropdown-item:hover span {
256
        color: var(--atk-color-main) !important;
257
    }
258

259
    #artalk-comments .atk-text {
260
        color: var(--atk-color-main) !important;
261
    }
262

263
    #artalk-comments .atk-comment-count .atk-text,
264
    #artalk-comments .atk-text .atk-comment-count-num {
265
        color: inherit !important;
266
    }
267

268
    #artalk-comments .atk-list-footer {
269
        margin-bottom: 1rem;
270
    }
271

272
    #artalk-comments .atk-main-editor,
273
    #artalk-comments .atk-textarea {
274
        background-color: var(--atk-color-bg) !important;
275
    }
276
</style>

修改配置文件#

IMPORTANT
使用 jsDelivr 公共 CDN 加载 Artalk 资源。
如果想使用其他 CDN ，修改 CDN 配置即可。

WARNING
server: “你的博客地址” 末尾不能有 / 。
❌ https://example.com/
✅️ https://example.com

1
export const expressiveCodeConfig: ExpressiveCodeConfig = {
2
    // Note: Some styles (such as background color) are being overridden, see the astro.config.mjs file.
3
    // Please select a dark theme, as this blog theme currently only supports dark background color
4
    theme: "github-dark",
5
};
6

7
export const artalkConfig = {
8
    server: "你的博客地址",
9
    site: "你的博客名称",
10
    // CDN 配置
11
    cdn: {
12
        css: "https://cdn.jsdelivr.net/npm/artalk/dist/Artalk.css",
13
        js: "https://cdn.jsdelivr.net/npm/artalk/dist/Artalk.js",
14
    },
15
};

修改布局#

1
import ImageWrapper from "../../components/misc/ImageWrapper.astro";
2
import PostMetadata from "../../components/PostMeta.astro";
3
import { profileConfig, siteConfig } from "../../config";
4
import { formatDateToYYYYMMDD } from "../../utils/date-utils";
5
import Artalk from "@components/Artalk.astro";
6

7
<!-- 其他代码-->
8

9
            {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
10

11
        </div>
12
    </div>
13

14
    <!-- 添加评论区,只在启用评论时渲染-->
15
    {!entry.data.disableComments && (
16
            <Artalk
17
                    pageKey={Astro.url.pathname}
18
                    pageTitle={entry.data.title}
19
                    server={artalkConfig.server}
20
                    site={artalkConfig.site}
21
            />
22
    )}
23

24
    <div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
25
        <a href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}

1
const postsCollection = defineCollection({
2
    schema: z.object({
3

4
        // 其他代码
5

6
        category: z.string().optional().nullable().default(""),
7
        lang: z.string().optional().default(""),
8
        disableComments: z.boolean().optional().default(false),
9

10
        // 其他代码
11
    }),
12
});

修改创建文章脚本（可选）#

1
image: ''
2
tags: []
3
category: ''
4
draft: false
5
lang: ''
6
disableComments: false

食用方法#

WARNING
本地环境会出现 Artalk Error 。

接入 Artalk 之后，就可以在文章中看到评论区了。

如果需要关闭评论，把 disableComments 改为 true 就可以了。

如果修改了new-post.js，那么在创建文章的时候就会自动填入 disableComments 来控制是否显示评论区。

最后，希望大家食用愉快~