使用Waline添加了评论功能

发表于 更新于 分类于 阅读次数： Waline：

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

评论头像显示很大

看了一下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是一个很好用的评论系统，配置起来也很简单，而且功能也很强大。因为懒得上传图片到图床有些表述可能不清楚，所以如果大家有什么问题欢迎在下方评论呀，我会尽力帮助大家的。