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

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

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

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

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

1.配置数据库

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

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

然后点击设置,进入应用凭证页面,取得我们 AppKey 、App 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_KEY 和 LEAN_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_PROXY和GRAVATAR_STR设置,记得value要添加上默认的值,然后注册 Libravatar账号,可以上传自己的喜欢的头像。

5.2 参考

快速入门 | Waline

服务器配置 | Waline

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