在Hexo博客网站中添加Waline评论系统

引言

在构建个人博客的过程中，与读者建立互动是至关重要的一环。一个良好的评论系统不仅可以让读者留下他们的见解和反馈，还能增强社区感和归属感。
今天，我们就来介绍如何为你的 Hexo 博客网站添加 Waline 评论系统。一款简洁美观的界面设计、高效稳定的性能和强大的评论管理功能脱颖而出。无论是表情包支持、Markdown 编辑器，还是黑夜模式，Waline 都能满足你的需求。
支持主流的博客框架：Hexo、VuePress、Hugo

什么是 Waline ？

一款从 Valine 衍生的带后端评论系统，样式精美，操作简单，部署高效的评论系统。

轻量 53kb gzip 的完整客户端大小
完全免费部署 可免费部署在 Vercel 上
易于部署 多种部署部署方式和存储服务支持
登录支持 在允许匿名评论的基础上，支持账号注册，保持身份
自由评论 完全的 Markdown 支持，同时包含表情、数学公式、HTML 嵌入
强大的安全性 内容校验、防灌水、保护敏感数据等
文章反应 快速表达你对文章的态度
浏览量统计 通过 <1kb 代码可靠统计文章浏览量

搭建方式

通过LeanCoud+Vercel+GitHub+个性域名+Waline组合方式，教你搭建免费的文章评论系统。

LeanCloud（存数据）
LeanCloud 是一个提供数据存储服务的平台，用于存储评论数据。它支持国内外版本，国际版无需身份证验证，适合大多数用户。
Vercel 部署（部服务端）
Vercel 是一个基于云的开源平台，用于和管理网站及应用程序，无需管理服务器。提供免费的Domain（如：xxx-projects.vercel.app）
绑定个性域名（解决访问）
免费域名内网已屏蔽，无法访问，所以需要一个新的域名，来避免使用默认域名可能带来的访问问题。
Waline 配置（装客户端）
Waline 是一个简洁、高效的评论系统，适合静态网站使用。
添加 Waline 配置，通常填入 Vercel 的服务端地址，使用个性域名的填入新域名地址。

graph LR

    A[Start] --> B(1.注册 LeanCloud 账号)
    B --> C(创建应用-国际版)
    C --> D[获取AppID、AppKey和MasterKey]
    
    A[Start]  --> G(2.Vercel 上创建服务端)
    G --> H[基于Waline模板
    新建并初始化仓库]
    H --> I[配置环境变量：LEAN_ID, LEAN_KEY, LEAN_MASTER_KEY]
    I --> J[部署到 Vercel]
  
    A[Start]  --> K(3.绑定域名)
    K --> L(在vercel上绑定域名)
    L --> M(在域名服务商上解析域名)
    
    A[Start] --> O(4.Hexo中开启Waline插件)
    O --> P[编辑 Hexo 配置文件
	_config.主题名.yml
    添加 Waline 相关配置]
    P --> Q[Waline 管理端]
    P --> R[提交评论测试]
    R --> S[End]
    Q --> S

搭建 Waline 评论系统步骤

1、LeanCloud 配置数据库

注册账号：访问 LeanCloud 国际版，使用邮箱注册账号并验证邮箱。
创建应用：点击“创建应用”，选择“开发版”，应用名称可自定义。
获取应用凭证：点击应用的”设置”，找到“应用凭证”，记下 AppID、AppKey 和 MasterKey。
如果你正在用的是Leancloud国内版应用，则需要额外”域名绑定”，且已备案的域名，同时购买独立 IP 并完成备案接入。
- 登录国内版并进入需要使用的应用。
- 选择 设置 > 域名绑定 > API 访问域名 > 绑定新域名 > 输入域名 > 确定。
- 按照页面上的提示按要求在 DNS 上完成 CNAME 解析。
- 购买独立 IP 并提交工单完成备案接入。(独立 IP 目前价格为￥ 50/个/月)

2、在 Vercel 上创建 Waline 服务端

注册账号：先注册Vercel 官网、Github 官网，然后登录账户。
部署创建：点击Vercel Deploy，跳转至 Vercel 进行 Server 端部署。
创建项目：点击“GitHub”，创建一个私有的 Git 仓库，名称可自定义（如comment）；等待Waline 模板自动新建并初始化仓库过程，2~3分钟后创建成功，点击 Go to Dashboard 去控制台。

配置环境变量：点击顶部的 Settings → Environment Variables 进入环境变量配置页，配置3个环境变量：LEAN_ID、LEAN_KEY 和 LEAN_MASTER_KEY，分别填入 LeanCloud 中的AppID、AppKey 和 MasterKey。

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

点击顶部的 Deployments ，在部署列表中选择最新的一次部署，点击 ... → Redeploy 按钮进行重新部署，使其配置参数生效。
点击 Overview 界面可查看部署过程，等待片刻后 STATUS 会变成 Ready，即成功。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。
如果你是国内访问大概率是访问不通的，所以需要用到自定义域名，接着下面绑定域名的步骤。

3、绑定域名

点击顶部的 Settings → Domains 中添加自己的域名，并在域名的 DNS 中做好CNAME解析。

评论系统访问：comment.yourdomain.com，就可以访问到评论系统界面了。
评论系统管理：comment.yourdomain.com/ui，就可以访问到评论系统后台管理界面，第一个注册的用户为管理员。
- 可以管理评论：编辑、回复、删除等
- 可以管理用户：查看用户信息，设置标签等

4、配置开启 Waline 客户端

确认Hexo 使用的主题是否已安装插件？通常都会有相应的评论系统，无需安装直接按步骤1配置即可；如未安装则看步骤2

启用配置插件：打开对应的yml主题配置文件（如 _config.主题名.yml），常用开启参数示例如下：

comment:
   enable: true   # 是否启用评论系统
  system: waline   # 支持的评论系统名
  config: # 评论系统参数配置 See https://waline.js.org/
    waline: 
      serverUrl: https://comment.yourdomain.com # Waline 服务端地址，必须填写，指向你的 Vercel 部署的 Waline 服务端地址。
      lang: zh-CN # 语言设置，支持多种语言，如 zh-CN（简体中文）、en-US（英语）、fr-FR（法语）、zh-TW（中国台湾）、jp-JP（中国日本）等
      emoji: [] # 自定义表情包，支持添加自定义表情包的路径
      dark: auto  # 主题模式，支持 auto（自动）、light（浅色）、dark（深色）
      wordLimit: 0  # 评论字数限制，默认为 0，表示不限制
      meta: [nick, mail]  # 评论者需要填写的信息字段，可选字段包括 nick（昵称）、mail（邮箱）、link（个人网站）

2.安装插件

安装插件：在 Hexo 根目录执行以下命令安装 Waline 插件：
1
npm install @waline/hexo-next

配置主题文件：找到 Hexo 的主题配置文件（如 themes/next/_config.yml），添加以下配置：

waline:
  enable: true
  serverURL: https://comment.yourdomain.com # 替换为你的 Vercel 项目地址 your-vercel-project.vercel.app
  placeholder: "请善言善语，文明评论哦"
  avatar: mm
  meta: [nick, mail, link]
  pageSize: 10
  lang: zh-cn
  visitor: false
  comment_count: true

重新部署 Hexo：运行以下命令重新生成和部署 Hexo 网站：
1
2
hexo generate
hexo deploy

5、Waline 自定义参数详细说明

参数	作用
`serverURL`	Waline 服务端地址，必须填写，指向你的 Vercel 部署的 Waline 服务端地址。
`lang`	语言设置，支持多种语言，如 zh-CN（简体中文）、en-US（英语）、fr-FR（法语）、zh-TW（中国台湾）、jp-JP（中国日本）等
`placeholder`	评论框的占位符文本，提示用户输入内容。
`page_size`	每页显示的评论数量，默认值为 10。
`avatar`	头像风格，支持多种风格，如 `identicon`、`monsterid`、`wavatar` 等。
`meta`	评论者需要填写的信息字段，可选字段包括 `nick`（昵称）、`mail`（邮箱）、`link`（个人网站）。
`pageSize`	每页显示的评论数量，默认值为 10。
`visitor`	是否启用访客统计功能，默认为 `false`。
`comment_count`	是否在文章页面显示评论数量，默认为 `true`。
`emoji`	自定义表情包，支持添加自定义表情包的路径。
`recaptchaV3Key`	Google reCAPTCHA v3 的密钥，用于防止垃圾评论。
`turnstileKey`	Cloudflare Turnstile 的密钥，用于防止垃圾评论。
`reaction`	是否启用评论反应功能，默认为 `false`。
`requiredMeta`	必填的评论者信息字段，默认为昵称。
`search`	是否启用评论搜索功能，默认为 `false`。
`dark`	主题模式，支持 `auto`（自动）、`light`（浅色）、`dark`（深色）。
`wordLimit`	评论字数限制，默认为 0，表示不限制。
`imageUploader`	自定义图片上传器，支持填写图床服务的上传接口。

6、引入 Waline 客户端（可选）

引入 Waline 客户端（可选）

当你单独网站部署时、可在你HTML的网页中进行如下设置:

导入 Waline 样式 https://unpkg.com/@waline/client@v3/dist/waline.css。

创建 <script> 标签使用来自 https://unpkg.com/@waline/client@v3/dist/waline.js 的 init() 函数初始化，并传入必要的 el 与 serverURL 选项。

el 选项是 Waline 渲染使用的元素，你可以设置一个字符串形式的 CSS 选择器或者一个 HTMLElement 对象。
serverURL 是服务端的地址，即上一步获取到的值。

<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v3/dist/waline.css"
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
</body>