在Hugo-PaperMod中加入Waline评论区

❗️ 20250325更新：
本文已过时，请使用主题Drifting-PaperMod，参考文档Drifting-PaperMod主题文档

Waline服务端部署

LeanCloud 设置

参考Waline官方文档： LeanCloud 设置 (数据库)

Vercel部署

参考Waline官方文档： Vercel 部署 (服务端)

绑定域名（可选）

参考Waline官方文档：绑定域名 (可选)

在Hugo-PaperMod中引入Waline

HTML 引入 (客户端)

在layouts/partials文件夹下新增comments.html:

layouts/partials/comments.html

<!-- layouts/partials/comments.html -->
{{- if .Site.Params.comments }}
    <!-- 评论容器 -->
    <div class="waline-container" data-path="{{ .Permalink | relURL }}"></div>
    <link href="https://unpkg.com/@waline/client@v3/dist/waline.css" rel="stylesheet" />

    <!-- 初始化 Waline 的脚本 -->
    <script>
        document.addEventListener("DOMContentLoaded", () => {

            // 初始化 Waline
            const walineInit = () => {
                import('https://unpkg.com/@waline/client@v3/dist/waline.js').then(({ init }) => {
                    const walineContainers = document.querySelectorAll('.waline-container[data-path]');
                    walineContainers.forEach(container => {
                        if (!container.__waline__) {
                            const path = container.getAttribute('data-path');
                            container.__waline__ = init({
                                el: container,
                                serverURL: '{{ .Site.Params.waline.serverURL }}',
                                lang: '{{ .Site.Params.waline.lang }}',
                                visitor: '{{ .Site.Params.waline.visitor | default "匿名者" }}',
                                emoji: [
                                    {{- range .Site.Params.waline.emoji }}
                                        '{{ . }}',
                                    {{- end }}
                                ],
                                requiredMeta: [
                                    {{- range .Site.Params.waline.requiredMeta }}
                                        '{{ . }}',
                                    {{- end }}
                                ],
                                locale: {
                                    admin: '{{ .Site.Params.waline.locale.admin }}',
                                    placeholder: '{{ .Site.Params.waline.locale.placeholder }}',
                                },
                                path: path,
                                dark: '{{ .Site.Params.waline.dark | default "body.dark" }}', 
                            });
                        }
                    });
                }).catch(error => {
                    console.error("Waline 初始化失败：", error);
                });
            };

            walineInit();
        });
    </script>
{{- end }}

修改hugo.yaml配置

toml文件自行改写。

在params下：

comments值改为true；
增加waline配置。

hugo.yaml

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

Waline服务端部署#

LeanCloud 设置#

Vercel部署#

绑定域名（可选）#

在Hugo-PaperMod中引入Waline#

HTML 引入 (客户端)#

修改hugo.yaml配置#

更多Waline属性#