hexo:为next主题添加评论系统

为hexo的next主题添加评论系统,就能在评论区和网友激情对线了[doge]

早就想为自己的博客添加一个评论系统了,能在评论区发表自己的所思所得,还能和网友激情对线,想想都刺激。

还要清楚的是,Valine 评论系统在 Next 主题高版本 (7.+) 以上已没有支持,且 Valine 已经很久没有更新维护了。不过,有大佬在 Valine 的基础之上开发了 Waline 。还有Gitment最新版next也不支持了。

这次,我们添加的是能够快速上手安装,配置更加人性化且带后端的 Waline 评论系统

1.配置数据库

我们需要注册一个 Leancloud 国际版 的账号,注意,一定要是 国际版,国内版需要绑定备案的域名,比较麻烦。具体可以在注册时的左上角看到:

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

然后点击设置,进入应用凭证页面,取得我们 AppKeyApp id 、以及 MasterKey

数据库配置完毕,接下来安装服务端。

2.安装服务端

Waline 支持多种服务端,这里我们使用第一种方式,即在 Vercl 上安装服务端。

Vercel

点击上方按钮,跳转至 Vercel 进行 Server 端部署。

如果你未登录的话,Vercel 会让你注册或登录,请使用 GitHub 账户进行快捷登录。

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

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

image-20220211123356740

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

image-20220211124013867

提示

如果你使用 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 自定义头像

参考:头像配置 | Waline

注意:官方头像配置教程已过时,需要在服务端进行设置

已过时

建议配合最新版本的服务端,通过服务端的 AVATAR_PROXY 配置。

在服务器设置中添加AVATAR_PROXYGRAVATAR_STR设置,记得value要添加上默认的值,然后注册 Libravatar账号,可以上传自己的喜欢的头像。

5.2 参考

快速入门 | Waline

服务器配置 | Waline

------------- 本文结束 感谢阅读 -------------