1.背景介绍

首先我使用的是Hugo的Hextra主题构建的博客网站
Hextra内置了Giscus项目的接口，以下是Hextra的文档，但是Giscus只能登录github评论，感觉功能单一。
评论系统 – Hextra
Hugo官方推荐的项目是Disqus，但是该项目是商业产品，可以个人免费使用但是可能存在广告，同时Hugo的一些其他项目样式又没有那么喜欢，所以最终的选择是，ai推荐的有中文文档而且对国人相对友好的@aline。
评论 | Hugo官方文档 | Waline | Waline

2.Waline部署

2.1 Waline部署

参考官方文档，简单易上手，用心看一遍，该懂的都懂了。

快速上手 | Waline

简单来说，就是利用了LeanCloud的免费数据库和Vercel的免费托管。这样通过vercel托管了Waline应用，然后在leancloud中储存数据，然后在自己的网站可以调用这个系统。

2.2 绑定域名（可选）

官方文档里的绑定域名的方法，不知道是现在需要修改还是如何，不能只填写CNAME，需要按照vercel的规定，绑定域名时会出现，一键绑定按钮。

！！！先在vercel中添加域名，然后点击一键绑定会自动跳转到域名托管的DNS平台，之后验证就可以了。

如果是cloudflare平台托管域名，那么添加DNS的页面如下：

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打开开发者工具，然后使用元素查看工具，一个个改代码，并不难，只是需要花费一些时间。

‍

Gemini 白嫖测试