Hugo | 给博客添加评论系统

Posted on Oct 14, 2022

Update：用过 Cataus、Disqus，Cataus 和同名主题配合起来很可爱，用了一段时间 Disqus 后对它的 UI 不太满意，再加上强制登录比较恼人，就换成象友推荐的 Twikoo 试试

Twikoo

设置数据库 MongoDB

按照官方文档，我用的 Vercel 部署

创建数据库，选 Free 方案，区域选择 AWS / N. Virginia (us-east-1)，设置并保存好用户名和密码

在 Where would you like to connect from? 这一步填 0.0.0.0，然后点 Add Entry，最后确认创建数据库

进入数据库，connect - Drivers - Node.js，把实例的用户名和密码改成自己的，例如：

mongodb+srv://twikoo:fhahflanclal3o2u0@cluster0.tke1htc.mongodb.net/?retryWrites=true&w=majority

Vercel 部署

按照文档的一键部署，等待…

在控制台 - settings - Environment Variables，添加环境变量 MONGODB_URI，值为之前的数据库连接字符串

进入 Deployments , 然后在任意一项后面点击更多（三个点） , 然后点击 Redeploy , 最后点击下面的 Redeploy

访问 Vercel 分配的域名，如果环境配置正确，可以看到 “Twikoo 云函数运行正常” 的提示

因为 vercel.app 域名已经被中国政府屏蔽，大陆用户无法评论。不过没关系，在 twikoo-api > settings > domains 添加自定义域名可解决

配置到博客

comments:
  enabled: true
  provider: twikoo

  twikoo:
    envId: <你的域名或vercel分配的域名>

部署成功后点右下角 ↘️ 的齿轮 ⚙️ 图标，设置管理密码

更新

管理页面提示：Client version: 1.5.11， Server version: 1.6.16，请参考版本更新进行升级

在 twikoo.html 里把引入的 js 文件版本修改到 1.6.16

进阶

多个页面共用评论区

参考 Twikoo 多个页面共用一个评论区实现 About && Friends 页面共用评论区

设置主题的 Twikoo path 配置为

# config.yaml
twikoo:
  path: window.TWIKOO_MAGIC_PATH||window.location.pathname

在两个页面的 .md 正文部分添加 <script>window.TWIKOO_MAGIC_PATH="xxx"</script>

经测试生效 🎉

Disqus

选择 Disqus 是因为 Hugo 内置了它的模板，同时它对迁移的支持较好，本身功能非常齐全，比较遗憾的是从 2015 年开始被墙了

参考官方文档

基础设置

在 Disqus 注册并登录账号，添加站点（选择 I want to install Disqus on my site）

输入你想要的 Website Name，用作插入 config 文件的名字，后期可以在 Disqus -> Setting -> General 下查看和修改

在 Configure Disqus for Your Site 页面输入 Website URL，要输入完整的地址，比如如果像我一样使用的是 GitHub Pages ，就要加上 https:// 的协议名；

选择 Category，点击 Create Site 完成注册

选择方案，我选 free

编辑博客的配置文件 config.yaml，添加 disqusShortname 设置

# 在第 23 行左右
disqusShortname: YOURSITENAME

可选项

添加可信域

Disqus 的站点名称是公开的，如果要防止被别人滥用，可以进行域名绑定，只允许信任的域名使用你的评论

在 Disqus -> Site -> Advanced 添加 Trusted Domains

特定博文开启/关闭评论

https://lvv.me/posts/2019/12/10_hugo_disqus/