hexo:为next主题添加评论系统
为hexo的next主题添加评论系统,就能在评论区和网友激情对线了[doge]
早就想为自己的博客添加一个评论系统了,能在评论区发表自己的所思所得,还能和网友激情对线,想想都刺激。
还要清楚的是,Valine 评论系统在 Next 主题高版本 (7.+) 以上已没有支持,且 Valine 已经很久没有更新维护了。不过,有大佬在 Valine 的基础之上开发了 Waline 。还有Gitment最新版next也不支持了。
这次,我们添加的是能够快速上手安装,配置更加人性化且带后端的 Waline 评论系统
1.配置数据库
我们需要注册一个 Leancloud 国际版 的账号,注意,一定要是 国际版,国内版需要绑定备案的域名,比较麻烦。具体可以在注册时的左上角看到:

注册完成后,登录,然后我们找到创建应用
在这里填写你的应用名称,名称可以自己定义,然后,下面选择开发版
点击创建
。

然后点击设置,进入应用凭证页面,取得我们 AppKey
、App id
、以及 MasterKey
:
数据库配置完毕,接下来安装服务端。
2.安装服务端
Waline
支持多种服务端,这里我们使用第一种方式,即在 Vercl
上安装服务端。
点击上方按钮,跳转至 Vercel 进行 Server 端部署。
如果你未登录的话,Vercel 会让你注册或登录,请使用 GitHub 账户进行快捷登录。

GIT POST
那里绑定你的github
账号,第二栏输入一个你喜欢的 Vercel 项目名称并点击 Create
继续,等待一小会时间

创建成功还会有烟花,嗯,不错

点击 Go to Dashboard
,点击顶部的 Settings
- Environment Variables
进入环境变量配置页,并配置三个环境变量LEAN_ID
, LEAN_KEY
和 LEAN_MASTER_KEY
。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID
, APP KEY
, Master Key
。

提示
如果你使用 LeanCloud 国内版,请额外配置
LEAN_SERVER
环境变量,值为你绑定好的域名。
环境变量配置完成之后点击顶部的 Deployments
点击顶部最新的一次部署右侧的 Redeploy
按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。
此时会跳转到 Overview
界面开始部署,等待片刻后 STATUS
会变成 Ready
。此时请点击 Visit
,即可跳转到部署好的网站地址,此地址即为你的服务端地址。
3. 在Hexo Next主题中配置
由于 Next 主题中并不自带 Waline
的评论配置,我们需要安装官方提供的插件。在 Hexo
根目录执行:
npm install @waline/hexo-next
找到 Next 的主题配置文件,在最后加上,记得修改servarURL
# Waline
# For more information: https://waline.js.org, https://github.com/walinejs/waline
waline:
enable: true #是否开启
serverURL: waline-server-pearl.vercel.app # Waline #服务端地址,我们这里就是上面部署的 Vercel 地址
placeholder: 请文明评论呀 # #评论框的默认文字
avatar: mm # 头像风格
meta: [nick, mail, link] # 自定义评论框上面的三个输入框的内容
pageSize: 10 # 评论数量多少时显示分页
lang: zh-cn # 语言, 可选值: en, zh-cn
# Warning: 不要同时启用 `waline.visitor` 以及 `leancloud_visitors`.
visitor: false # 文章阅读统计
comment_count: true # 如果为 false , 评论数量只会在当前评论页面显示, 主页则不显示
requiredFields: [] # 设置用户评论时必填的信息,[nick,mail]: [nick] | [nick, mail]
libUrl: # Set custom library cdn url
重新部署 Hexo
,就可以看到结果了。
4. 登录管理端
由于 Waline
有服务端,支持评论管理。我们需要注册一个账号作为管理员。
找到评论框,点击 登录
按钮,会弹出一个窗口,找到用户注册,默认第一个注册的用户为管理员,所以部署好一定要记得及时注册。注册好了之后,登录之后即可进入评论管理的后台,可以对评论进行管理。
5. 其他
5.1 自定义头像
注意:官方头像配置教程已过时,需要在服务端进行设置
已过时
建议配合最新版本的服务端,通过服务端的
AVATAR_PROXY
配置。
在服务器设置中添加AVATAR_PROXY
和GRAVATAR_STR
设置,记得value要添加上默认的值,然后注册 Libravatar账号,可以上传自己的喜欢的头像。