Hugo博客中集成waline评论系统

缘起

之前已经搞定了从Obsidian自动发布到Hugo的流程，今天则是折腾了一下Hugo的评论系统。试验了一些基于GitHub issues的评论系统，但是感觉都太简陋了，而且不是每个读者都有Github账号的，它们都需要绑定Github账号才能评论，有点鸡肋。

综合考量后，选择的是Valine这个无后端评论系统的，这个集成很简单，只需到LeanCloud国内版弄一个账号，创建一个应用就行，把参数AppID、AppKey、MasterKey在hugo.toml里面配置一下，就几乎完成了。

但是后来发现Valine在有人评论时是无法收到邮件提醒的，这就有点坑了。看它的文档，好像1.4.0以后就不支持了，而且Valine两年都没更新了。所以只好看看有没有其他方案。

幸好，找到了一个基于Valine升级的Waline，这个评论系统很新，最近的Github更新是4小时前的。

在Vercel里面配置Waline服务端的环境变量

一步一步按照它的文档来：

注册LeanCloud国际版账号，
创建一个应用，获得3个参数：AppID、AppKey、MasterKey
通过Waline的模版一键发布到Vercel,然后再填写几个环境变量，重新发布。

环境变量配置如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


# LeanCloud国际版参数
LEAN_ID=XXXXXXXXX
LEAN_KEY=XXXXXXXXX
LEAN_MASTER_KEY=XXXXXXXXX

# 博客站点
SITE_URL=https://blog.fishyer.com
SITE_NAME=blog-hugo

# 邮件通知
SMTP_SERVICE=QQ
SMTP_SECURE=true
SMTP_HOST=smtp.qq.com
SMTP_PORT=465
SMTP_USER=630709658@qq.com
SMTP_PASS=XXXXXXXXX
AUTHOR_EMAIL=fishyer@foxmail.com

其实foxmail邮箱和qq邮箱是一个邮箱，我这里配置AUTHOR_EMAIL是为了方便测试，因为默认自己评论是不会给自己发邮件提醒的。

注意：不能在.env文件里面设置，得在Vercel管理页面设置，有点坑，我本来还想通过vercel-cli在本地配置环境变量的，结果不行了，浪费了一些时间

发布完成后，可以在Vercel绑定一下自己的评论系统的域名。我的Waline服务就是：https://waline.fishyer.com。然后注册一下管理员账号(第一个人用户就是管理员)，就可以在Waline的后台页面查看评论记录了: https://waline.fishyer.com/ui

注意：waline服务和你的博客站点是不同的域名，比如我的waline服务是waline.fishyer.com，博客站点是 blog.fishyer.com。环境变量里面的SITE_URL不要写错了，不然就不方便从后台评论列表那里直接点击链接跳转到自己的博客文章页面了。

收到的邮件示意图如下，这里我没有改通知模板，就是默认的，可以通过邮件通知直达文章页面，还是蛮方便的。

配合微信上的QQ邮箱提醒，嘿嘿，再也不怕漏过文章评论了。

在Hugo里面添加Waline客户端

在模版的themes/even/layouts/partials/comments.html文件里面，添加如下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<link
  rel="stylesheet"
  href="https://unpkg.com/@waline/client@v3/dist/waline.css"
  />
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      reaction: true, // 开启快速反应 就是那几个表情按钮
      serverURL: 'https://waline.fishyer.com',
    });
  </script>

结语

好了，Obsidian写作系统、Hugo博客系统和Waline评论系统的一整套工作流都搭建好了，后面就是享受记录、分享、交流的乐趣。

分享，不是为了显摆自己知道多少，而是为了寻找同道。谁是全知全能的？谁又没有知识漏洞？敢于暴露自己的无知，也是一种勇气。有的时候，读者的一句关键评论，可能就让困惑许久的自己茅塞顿开。

新的博客站点，新的写作旅程，期待未来能和大家多多交流，一起学习成长。

Hugo博客中集成waline评论系统

文章目录

缘起

在Vercel里面配置Waline服务端的环境变量

在Hugo里面添加Waline客户端

相关推荐

结语