由于 Hexo 一类静态博客的自身限制,最终生成的东西本身是无法有过多交互的,不论后端,评论都需要外接。在这之前,我曾见有 giscus、Gittalk 等程序,虽国内也可使用,可需要 GitHub 账户,很显然不符合“即时评论”的要求,因此我将其归为“备选”。浏览一圈下来,简洁的、稳定的,也就只有 Valine 和 Waline 符合我的要求。

本文对应的环境为

NodeJS -> 18.16.0
hexo-cli -> 4.3.1
hexo-theme -> Butterfly-4.9.0

国内访问,请提前准备没被 墙 的域名!!!

一、应用配置【最好二选一】

Valine 配置

Valine 诞生于 2017 年 8 月,是一款基于 LeanCloud 的快速、简洁且高效的无后端评论系统。所以配置 Valine 只需要去 LeanCloud 注册个账号就能操作,这注册账号有手就行不作解释。

【!如果你的博客面向国内为主,还是去国内站点吧,虽然备案、自备域名什么的很麻烦,但为了你面向的用户,也只能这样。后文会讲到这点】目前该问题已经解决,通过绑定域名或反代的方式可以正常访问评论系统。

注册后进入控制台,在左下角有两个按钮快速入门和创建应用。点击创建应用,自定义名称(例如 valine),选择开发版,其他默认,点击创建。控制台出现了你刚刚创建的应用,点击这个应用的右上角****图标进入设置界面,之后在数据储存->结构化数据选项卡中创建 Comment 这一 Class。

随后找到 valine 开发版下面那栏里的应用 Keys,你会看到 AppID 和 AppKey,这两个是下一步我们需要使用的。

国内版大同小异,不同的是,国内版需要自备域名,而且还要备案等事。国际版不必绑定域名,地址可以使用设置->应用凭证->服务器地址->REST API 服务器地址

但这样会存在一个问题,现在国际版 LeanCloud 提供的 REST API 在大陆不能正常访问。解决方法是过绑定自己域名,之后填写 serverURL/REST API 的地方替换为你在 LeanCloud 项目控制台中绑定的域名以解决(绑定成功会刷新为你设置的域名。Cloudflare 记得关代理,即“仅 DNS”。)

Waline 配置

很显然,由于 Serverless 的原因,一些数据只能在前端处理后存入后面的数据库。在用户传入数据到存储之前这段过程中存在隐患。Waline 与 Valine 最大的不同就是增加了服务端中间层,解决 Valine 暴露出来的安全问题。

Vercel

点击这个按钮部署服务端,如果 Vercel 没号的自己注册个就行,推荐 GitHub 注册。

选个你喜欢的名字,下面的东西看着写就行,之后 Vercel 会帮你初始化好一切(你可能还需要在 GitHub 新建个仓库给 Vercel 用,你自己尝试你就知道了)

一两分钟后,满屏的烟花会庆祝你部署成功,点击 Go to Dashboard,前往控制台。

在 Vercel 的 Dashboard 页面点击顶部的 Settings->Environment Variables 进入环境变量配置页,配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY ,前面写名称,后面写数据(就是你先前在 LeanCloud 相应仓库弄的 AppID、AppKey、MasterKey),全部保存。如果你使用 LeanCloud 国内版,请额外配置 LEAN_SERVER 环境变量,值为你绑定好的域名。

配置完成后点击顶部的 Deployments ,点击最新的一次部署右侧的 Redeploy 按钮进行重新部署以让配置生效。之后 Vercel 会跳转到 Overview 界面开始部署,等待片刻后 STATUS 变成 Ready。点击 Visit ,即可跳转到部署好的网站地址,此地址即为你的服务端地址(serverUrl)

由于这个“serverUrl”默认为.vercel.app,其在国内无法正常访问,还需在该项目中进入Settings->Domains添加自己的域名,DNS 服务商那里解析 CNAME 填写下面这个:

1
cname-china.vercel-dns.com

或者填写 A 记录:

1
76.223.126.88

两边设置完后等待 vercel 项目中域名处刷新成功,之后访问绑定自定义域名后的【serverURL】/ui/register 进行注册,注册的第一个用户即为管理员。

补充:CF 用户在此处可能会出现域名重定向次数过多的问题

二、Hexo 配置

这二者在 Hexo 配置的过程大同小异,引入也比较简单。此处以 Butterfly 为例。

找到博客根目录的、_config.yml 和主题文件夹下的、_config.butterfly.yml 文件(其实这个文件你放在博客根目录下也是没有问题的,后续也可以只修改根目录下的主题配置文件),确保你的、_config.yml 中【#Extensions】这一条已经启用主题【例如 theme: butterfly】

之后打开_config.butterfly.yml文件,有以下几处需要修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
comments:
# Up to two comments system, the first will be shown as default
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
use: Waline # Valine,Disqus
text: true # Display the comment name next to the button
# lazyload: The comment system will be load when comment element enters the browser's viewport.
# If you set it to true, the comment count will be invalid
lazyload: true
count: true # Display comment count in top_img
card_post_count: true # Display comment count in Home Page

#...

# valine
# https://valine.js.org
valine:
appId: # leancloud app id
appKey: # leancloud app key
avatar: # monsterid # gravatar style https://valine.js.org/#/avatar
serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
bg: # valine background
requiredFields: # required fields (nick/mail)
visitor: false
option:

# waline - A simple comment system with backend support fork from Valine
# https://waline.js.org/
waline:
serverURL: # Waline server address url. 如果按照本文流程进行,则此处应填写刚才在 Vercel 项目中绑定的那个域名
bg: # waline background
pageview: false
option:
# locale: {placeholder: '提示文字'}

#...

option:
valine: [https://cdn.jsdelivr.net/npm/[email protected]/dist/Valine.min.js] # 这里请务必注意与博客根目录下 package.json 里的版本号对应,不知道或未安装的请前往 Valine 官方文档进行阅读

Waline 的改法与之相似,只需要把上述内容换成 Waline 的部分即可,实在不行就打开你编辑器的 Ctrl+F 搜索一下。option 是另外添加内容,可以不修改。

修改完,保存,Hexo 三连,完成。

官方文档:

Valine -> https://valine.js.org/
Waline -> https://waline.js.org/
LeanCloud 官方文档 -> https://docs.leancloud.cn/