使用 Waline 添加了评论功能

发表于 分类于 字数： 2.4k

第二篇博客日志。说来惭愧，拖了这么久才做评论功能，这几个月过来干什么都提不起精神，除了玩游戏。昨天喝饮料时，不知道什么时候有一只蜜蜂飞进了我的饮料罐，我喝了一口，发现有东西就咬了一下，尝到了蜜蜂的味道，同时口腔也被蛰了一下，大年初二，好倒霉啊！然后晚上睡觉时喉咙就发炎了，不知道是蜜蜂毒针的感染还是感冒了，虽然蛰的地方根本没有肿但是今天浑身无力感觉好难受。今天也懒得玩游戏了，闲着就把评论功能加上了，使用的是 Waline。主打的是一个随心所欲哈哈哈。

前情提要：我使用的是 hexo next 主题，此文章是基于该条件编写的。

为什么要使用 Waline

刚开始读 next 主题文档时，使用了文档提到的一个中国评论平台 changyan 畅言，使用后发现 UI 有些丑，而且排版也没那么好看，然后就开始寻找其他方案，了解到了 valine，后来发现一篇博客写了一篇 waline 的教程，发现 waline 和 valine 差不多，但功能更多一些，于是开始折腾 waline。下面写一些经验分享吧！

如何使用 Waline

这里直接推荐官方的文档吧，我也是照着文档一步步走的，还是记录一下遇到的问题和解决方法吧（主要还是懒）。这是 Waline 官方的教程,也可以看我 上边提到的博客文章。如果大家在设置的过程中遇到什么问题可以在下方评论，我会尽力帮助大家。

遇到的问题和解决方法

在 hexo next 主题中使用 Waline

因为在 Waline 官方文档上没有写，所以在这里补充。在 hexo next 主题中使用 Waline，首先需要安装 Waline 插件，然后在主题的配置文件中配置 Waline。教程可以在 Github 中找到 Hexo NexT Waline。安装完后直接在主题配置文件中粘贴 github 上教程提供的配置进行修改即可。以下是关于配置的一些设置。

  1. 启用 Waline 插件：将 enable 设置为 true（注意冒号后面要有空格）；
  2. serverURL：这里写的是 vercel 部署后得到的链接（建议绑定到的自己的域名）。

其他的设置根据自己需要把注释去掉，根据需求更改即可。

设置完成后评论时显示 failed to fatch

这个问题我是在这里找到解决方案的：Hexo Btterfly 引入 Waline 评论系统以及常见问题解决。解决方案就是 vercel 部署后要绑定到自己的域名。我这里是使用的 Cloudflare，添加一条 DNS 记录，类型选择 CNAME，Name 就写你想要的子域名名字，Value 写cname.vercel-dns.com.。最后到 Vercel 中绑定域名后，将 serverURL 改为绑定的域名即可。一开始我是先在 vercel 中填了域名后才添加 DNS 记录，发现在 Vercel 中绑定时出现 invalid configuration 的错误, 虽然能访问但是评论不了。之后我先添加 DNS 记录再绑定域名就可以了。

2025.11.23

之前用的 zone.id 的域名，现在想统一放到 Cloudflare 上管理，所以改成了 us.kg 域名，直接添加域名，然后根据它给的 CNAME DNS 记录到 Cloudflare 中设置即可，但要注意的是需要关闭小黄云代理，否则会显示 Proxy Detected 导致访问不了。

发现需要下滑到底部才加载评论，好不喜欢，折腾来折腾去，最后发现配置里就能关掉所有评论系统的懒加载设置，害~

评论头像显示很大

看了一下 CSS，似乎头像没有设置宽高，直接使用了图像原尺寸。在 CSS 添加以下代码即可（应该可以吧）：

1
2
3
4
5
6
7
8
9
10
11
12
.wl-user img {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: cover;
    border-radius: 50%;
}

:root {
    --waline-m-avatar-size: calc(var(--waline-avatar-size)) !important;
    /* 修改认证下标的位置（因为下标位置是根据这个值算的，发现算得不对，
    就让它设为和头像大小一样的值），如果没问题可以不用改 */
}

CSS 样式不更新

提交了更改，也成功部署了，但是浏览器中 CSS 的样式没有更新，看了源码还是未更改的样式。想到了浏览器缓存的问题，就手动去删除了换成，发现还是没成功就问了 GPT，得到的回答是这样的：

  • 在浏览器中，按下以下快捷键强制刷新页面，跳过缓存：
    • Windows / Linux：按 Ctrl + F5 或 Shift + F5；
    • Mac：按 Cmd + Shift + R。

果然成功了。
关于 CSS 样式设置，可以看看官方文档 - CSS 变量，根据文档里提供的变量来修改自己想要的样式。或者直接 F12 看着调也行。

使用邮箱接收评论通知

Waline 官方文档提供了许多接收通知的方法，这里我选择使用 QQ 邮箱来接收通知。直接在主题配置中添加 Waline 官方提供的配置，根据自己的实际情况修改即可参考了这两篇文章：060 Waline 新评论邮箱提醒、Hexo + NexT8.1 + Waline 踩坑记录。发现了巨大的乌龙，怪不得接收不到通知，原来文档里说的环境变量不是添加在主题配置中的，而是在创建的 vercel 项目的环境变量中添加的，添加完成后需要点击顶部的 Deployments，然后点击顶部最新的一次部署右侧的按钮，点击 Redeploy 进行重新部署才会生效（这里和 Waline 官方文档添加环境变量的步骤是一样的）。这里使用了 SMTP 协议来接收邮件, 所以 QQ 邮箱需要开启 SMTP 服务（我设置时发现以经开启了）。对于官方提供的配置，文档已经说清楚了，唯一需要注意的是 SMTP_PASS，这个密码是 SMTP 服务的授权码，不是 QQ 邮箱密码。下面分享获取授权码的步骤：

  1. 首先登陆 QQ 邮箱；
  2. 打开设置（在左上角 Logo 旁边可以找到）；
  3. 点击账号设置，往下滑就能看到 SMTP 服务了；
  4. 点击管理服务，往下滑就能看到生成授权码了；
  5. 会让你发短信（也可以选择其他方法），之后就能获得授权码了；
  6. 复制授权码，粘贴到 SMTP_PASS 的配置中即可。

修改了文章文件名后评论消失的解决方法

这个问题在这里找到了解决方法的思路：博客更换为 Waline 评论系统。文章提到了：如果无法发布评论，比如报错说格式不对（要求 Number 结果是 String）之类的，建议查看 LeanCloud 数据中的单元格式是否正确。于是我去 LeanCloud 去查看，果然发现了问题所在：评论所对应的 url 因为文件名的更改而无法匹配到对应的文章。而解决方案也很简单，直接把原来的 url 改成新的 url 即可。以下是解决步骤：

  1. 打开 LeanCloud 控制台，进入之前创建的应用；
  2. 点击左侧菜单栏中的数据存储，点击结构化数据；
  3. 可以看到左侧有一系列变量，点击 Comment 就可以看到评论的数据了，往右滑找到 url，这就是我们要修改的数据；
  4. 如果数据少的话可以直接在表格上更改，如果数据多的话，点击表格上方的批量操作进行修改；
  5. 进行批量操作：点击增加条件，列选择 url，条件选择 equals，输入原来的 url，点击测试条件，然后点击下一步；
  6. 点击更新对象，列选择 url，中间选 set，然后填入新的 url，点击下一步，点击连续运行即可。

waline 文章反应栏配置

一开始没太注意到文章反应栏，后来在看官方文档时看到别人提到才想着要去配置。在 waline 相关配置中写一下代码即可。reaction 下是四个反应表情图片，只要提供图片链接就设置成功了。如果想在表情下面设置对应的文字就需要在 locale 中设置，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Custom locales
locale:
   placeholder: 欢迎评论呀！！！留下邮箱会收到回复通知邮件哟！ # Comment box placeholder
   # 反应相关文字 (用于 SEO 和无障碍访问)
   #reactionTitle: '对文章的反应'
   reaction0: '爱了爱了'      # weibo_heart_eyes
   reaction1: '笑死了'  # weibo_dog_joy
   reaction2: '陷入沉思'  # weibo_dog_consider
   reaction3: '呜呜呜'      # weibo_sob

# Reactions (emojis) for comments
reaction: 
- https://unpkg.com/@waline/emojis@1.1.0/weibo/weibo_heart_eyes.png
- https://unpkg.com/@waline/emojis@1.1.0/weibo/weibo_dog_joy.png
- https://unpkg.com/@waline/emojis@1.1.0/weibo/weibo_dog_consider.png
- https://unpkg.com/@waline/emojis@1.1.0/weibo/weibo_sob.png

总结

目前只设置到这，如果后续有什么添加的也会更新到这篇文章里。总的来说，Waline 是一个很好用的评论系统，配置起来也很简单，而且功能也很强大。因为懒得上传图片到图床有些表述可能不清楚，所以如果大家有什么问题欢迎在下方评论呀，我会尽力帮助大家的。