Hexo: Next 主题使用 Waline 评论系统

发表于 更新于 分类于 阅读次数： Waline：

文章发出之后，往往我们想要得到读者更多地反馈，那么拥有一个评论系统是至关重要的。

本篇带大家通过一些简单的配置，在 Hexo Next 主题下添加 Waline 评论系统。

为啥要用Waline

不少使用Hexo博主所用的评论系统是Valine，NexT也天然支持（配置也就简单）。但是它存在安全性问题，而Waline就是在Valine的基础上衍生出来的，同时解决了Valine的安全性问题
Waline介绍

更新NexT到v8.5.0

next有两个repo: https://github.com/theme-next/hexo-theme-next 和 https://github.com/next-theme/hexo-theme-next

简单来说，问题就是 theme-next 团队的 owner 始终拒绝向其它任何团队成员提供足够的权限，且 owner 本人自 2019 年 10 月起已连续半年不在线，导致其它活跃的团队成员无法管理仓库，也无法邀请新的成员。
由于对 theme-next 团队的未来不抱有期望，我作为 theme-next 的主要贡献者，自 2020 年 4 月起停止为旧的仓库贡献代码，并创建了新的组织，以确保维护工作正常进行。

按照官方推荐的方式更新到v8.5.0： https://theme-next.js.org/docs/getting-started/upgrade.html

安装Waline

LeanCloud配置评论数据库

Waline 和 Valine 一样，也是支持基于 LeanCloud 作为数据存储的：

  1. 我们需要注册一个 Leancloud 国际版的账号，如果是国内版，域名需要备案，会比较麻烦。
  2. 注册完成后，登录，然后我们找到创建应用。
  3. 填写你的应用名称,名称可以自己定义，然后，下面选择开发版点击创建。
  4. 然后点击应用进入设置。点击应用凭证，取得我们 AppKey 、App id 、以及 MasterKey。

Vercl安装服务端

首先，点击一键部署：

一键部署Vercel

应该需要注册一个账号，支持使用 Github 账号直接登录

登录后重新点进来，点击 Create

然后等待下面 Deploy 构建完成，点击 Go to Dashboard

找到 Settings => Environment Variables，配置环境变量

我们需要配置三个环境变量，对应如下表：

Lean Cloud Vercel Environment
AppID LEAN_ID
AppKey LEAN_KEY
MasterKey LEAN_MASTER_KEY

如果你使用 LeanCloud 国内版，请额外配置 LEAN_SERVER 环境变量，值为你绑定好的域名。

为了使环境变量生效，我们需要重新构建一次。在上方找到 Deployments ，选择第一个右边的三个点，点击 Redeploy 。

等待其构建结束，然后记住 DOMAINS 中的域名地址。

在Hexo Next主题中配置

由于 Next 主题中并不自带 Waline 的评论配置，我们需要安装官方提供的插件。在 Hexo 根目录执行：

npm install @waline/hexo-next

找到 Next 的主题配置文件，在最后加上

# Waline
# For more information: https://waline.js.org, https://github.com/walinejs/waline
waline:
  enable: true #是否开启
  serverURL: waline-server-pearl.vercel.app # Waline #服务端地址，我们这里就是上面部署的 Vercel 地址
    locale:
    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 ，就可以看到结果了。

serverURL需要写成https://waline-server-pearl.vercel.app这样，否则首页的显示评论数量会有问题

登录服务端

由于 Waline 有服务端，支持评论管理。我们需要注册一个账号作为管理员。

找到评论框，点击 登录 按钮，会弹出一个窗口，找到用户注册，默认第一个注册的用户为管理员，所以部署好一定要记得及时注册。

注册好，登录之后即可进入评论管理的后台，可以对评论进行管理。

自定义服务端域名

在Vercl中点击顶部的 Settings - Domains 进入域名配置页

输入需要绑定的域名并点击 Add

在域名服务器商处添加新的 CNAME 解析记录

Type Name Value
CNAME example cname.vercel-dns.com

等待生效，你可以通过自己的域名来访问了

  • 评论系统：example.yourdomain.com
  • 评论管理：example.yourdomain.com/ui

服务端增加通知功能

官方文档

增加邮件通知

在服务端增加以下环境变量，增加后从新部署即可

邮件通知需要配置以下环境变量:

SMTP_SERVICE: SMTP 邮件发送服务提供商。

SMTP_USER: SMTP 邮件发送服务的用户名，一般为登录邮箱。

SMTP_PASS: SMTP 邮件发送服务的密码，一般为邮箱登录密码，部分邮箱(例如 163)是单独的 SMTP 密码。

SITE_NAME: 网站名称，用于在消息中显示。

SITE_URL: 网站地址，用于在消息中显示。

AUTHOR_EMAIL: 博主邮箱，用来接收新评论通知。如果是博主发布的评论则不进行提醒通知。

以下是选填的环境变量:

SENDER_NAME: 自定义发送邮件的发件人

SENDER_EMAIL: 自定义发送邮件的发件地址

MAIL_SUBJECT: 自定义评论回复邮件标题

MAIL_TEMPLATE: 自定义评论回复邮件内容

MAIL_SUBJECT_ADMIN: 自定义新评论通知邮件标题

MAIL_TEMPLATE_ADMIN: 自定义新评论通知邮件内容