1.背景介绍
-
首先我使用的是 Hugo 的 Hextra 主题构建的博客网站
-
Hextra 内置了 Giscus 项目的接口，以下是 Hextra 的文档，但是 Giscus 只能登录 github 评论，感觉功能单一。
评论系统 – Hextra -
Hugo 官方推荐的项目是 Disqus，但是该项目是商业产品，可以个人免费使用但是可能存在广告，同时 Hugo 的一些其他项目样式又没有那么喜欢，所以最终的选择是，ai 推荐的有中文文档而且对国人相对友好的 @aline。
2.Waline 部署
1.Waline 部署
参考官方文档，简单易上手，用心看一遍，该懂的都懂了。
2.绑定域名（可选）
官方文档里的绑定域名的方法，不知道是现在需要修改还是如何，不能只填写 CNAME，需要按照 vercel 的规定，绑定域名时会出现，一键绑定按钮。
！！！先在 vercel 中添加域名，然后点击一键绑定会自动跳转到域名托管的 DNS 平台，之后验证就可以了。这里我将获取一个子域名即 waline.whynerve.top。
如果没有自动填写，那么手动找到下方的 DNS 中的记录填写。
注意这里的 A（托管在 CF 的主域名）或者 CNAME（如果自己设置里次级域名就会是 CNAME 别名，例如这里我设置的 waline....而不是我的主域名）。如果填写中有 TXT 记录，目的是为了让服务读取这个 TXT 内容从而验证当前域名确实是我在使用，验证完成可以删除。
如果是 cloudflare 平台托管域名，那么添加 DNS 的页面如下：
托管后，下方文档中涉及域名的地方，主要在yaml文件中，注意保持域名一致。
3.梳理结构
对于我这样的小白来说，本来对于 hugo 本身的结构就不清楚，但是可以使用 ai 直接分析 github 项目，例如 Google gemini 就有导入 github 代码库的功能。或者使用 vibe coding，claude code router 驱动的使用 GLM 的 claude code 等来分析 hugo 项目的结构，不同的主题可能不同。
这里是关于 hextra 主题的结构，首先我找到了，作者内置的评论功能相关的文件，分别是：
- hextra/layouts/partials/components/comments.html
- hextra/layouts/partials/components/giscus.html
- hextra/layouts/single.html
3.1 文件功能
- 在 comments.html 中作者主要规定了，comments 参数默认是 false，同时只有 type 是 giscus 的借口才接受。
- giscus.html 文件，就是对于 giscus 的设置，这个自己可以查看之前的文档，和通过 ai 解读一下。
- single.html 文件，将 comments 放在了规定的某些的页面的尾部。
3.2 修改文件
根据上面的原本的文件结构，自然而然就需要修改这些文件来添加 waline 的借口，在此之前，需要先完成 waline 的托管注册。
a.增加 Waline 类型
在 comments.html 中增加 Waline 类型：
修改后的文件
{{- $enableComments := site.Params.comments.enable | default false -}}
{{ if not (eq .Params.comments nil) }}
{{ $enableComments = .Params.comments }}
{{ end }}
{{- if $enableComments -}}
{{- if eq site.Params.comments.type "giscus" -}}
{{ partial "components/giscus.html" . }}
{{- else if eq site.Params.comments.type "waline" -}} {{/* 新增部分 */}}
{{ partial "components/waline.html" . }}
{{- end -}}
{{- end -}}
新增的语句
{{- else if eq site.Params.comments.type "waline" -}} {{/* 新增部分 */}}
{{ partial "components/waline.html" . }}
b.修改 yaml 文件
在配置文件中，这里是 hugo.yaml 中添加对应的参数：
comments:
enable: true
type: waline # 将类型改为 waline
# 新增 Waline 配置
waline:
serverURL: "https://walineserver.com" # 替换为你自己的 Waline 服务端地址
c.增加 waline.html 文件
在 comments.html 添加了这一段代码
{{- else if eq site.Params.comments.type "waline" -}} {{/* 新增部分 */}}
{{ partial "components/waline.html" . }}
所以，需要在 hextra/layouts/partials/components/ 目录下，新建一个 waline.html 文件，来获取 waline 的默认代码：
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css"/>
<div id="waline" class="hx-mt-8"></div>
{{- $showReaction := (default true .Params.reaction) -}}
{{- with site.Params.comments.waline -}}
{{- /* 映射大小写并构建配置对象 */ -}}
{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
{{- $replaceKeys := dict "serverurl" "serverURL" "pagesize" "pageSize" "requiredmeta" "requiredMeta" -}}
{{- range $key, $val := . -}}
{{- if ne $val nil -}}
{{- $k := index $replaceKeys $key | default $key -}}
{{- if eq $k "reaction" -}}
{{- $config = merge $config (dict $k (cond $showReaction $val false)) -}}
{{- else -}}
{{- $config = merge $config (dict $k $val) -}}
{{- end -}}
{{- end -}}
{{- end -}}
<script type="module">
import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
init({{ $config | jsonify | safeJS }});
</script>
{{- end -}}
d.添加 waline 的 css 文件
由于 waline 的非默认样式没有那么华丽，所以可以通过添加 css 代码来自己优化一些格式，例如，外观跟随明亮主题和暗黑主题变化，或者是一些简单的动效等等。
文件分享，可以嵌入上面的 wline.html 中，也可以在 hextra/assets/css/custom.css 中添加这段代码来美化格式，这一段 css 的主要功能就是跟随主题变化，和简单动效。
custom.css(waline 主题部分)--gists 代码
4.运行 hugo、查看效果
登录和使用，第一个登录的用户会变成管理员，通过管理员可以指定其它用户为管理员，以及删除和管理评论。
查看主题是否与自己预期相同，如果不同，可以在浏览器使用 F12 打开开发者工具，然后使用元素查看工具，一个个改代码，并不难，只是需要花费一些时间。