在Hugo-PaperMod中加入Waline评论区

 1<!-- layouts/partials/comments.html -->
 2{{- if .Site.Params.comments }}
 3    <!-- 评论容器 -->
 4    <div class="waline-container" data-path="{{ .Permalink | relURL }}"></div>
 5    <link href="https://unpkg.com/@waline/client@v3/dist/waline.css" rel="stylesheet" />
 6
 7    <!-- 初始化 Waline 的脚本 -->
 8    <script>
 9        document.addEventListener("DOMContentLoaded", () => {
10
11            // 初始化 Waline
12            const walineInit = () => {
13                import('https://unpkg.com/@waline/client@v3/dist/waline.js').then(({ init }) => {
14                    const walineContainers = document.querySelectorAll('.waline-container[data-path]');
15                    walineContainers.forEach(container => {
16                        if (!container.__waline__) {
17                            const path = container.getAttribute('data-path');
18                            container.__waline__ = init({
19                                el: container,
20                                serverURL: '{{ .Site.Params.waline.serverURL }}',
21                                lang: '{{ .Site.Params.waline.lang }}',
22                                visitor: '{{ .Site.Params.waline.visitor | default "匿名者" }}',
23                                emoji: [
24                                    {{- range .Site.Params.waline.emoji }}
25                                        '{{ . }}',
26                                    {{- end }}
27                                ],
28                                requiredMeta: [
29                                    {{- range .Site.Params.waline.requiredMeta }}
30                                        '{{ . }}',
31                                    {{- end }}
32                                ],
33                                locale: {
34                                    admin: '{{ .Site.Params.waline.locale.admin }}',
35                                    placeholder: '{{ .Site.Params.waline.locale.placeholder }}',
36                                },
37                                path: path,
38                                dark: '{{ .Site.Params.waline.dark | default "body.dark" }}', 
39                            });
40                        }
41                    });
42                }).catch(error => {
43                    console.error("Waline 初始化失败：", error);
44                });
45            };
46
47            walineInit();
48        });
49    </script>
50{{- end }}

 1params:
 2  comments: true
 3  waline:
 4    serverURL: # 上方绑定的waline服务端域名
 5    lang: zh-cn
 6    visitor: "匿名者" # 当不输入昵称时显示的名称
 7    requiredMeta: # 必填项，包括nick,mail,link
 8      - nick
 9    emoji:
10      - "https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo"
11    locale:
12      admin: "作者本人" # 作者标签文案
13      placeholder: "🍗所以我配有一条评论吗！" # 评论输入框占位文案内容
14    dark: 'body.dark' # 适配暗黑模式