替换LiveRe为Waline

发表于 分类于 Waline： 本文字数： 1.5k 阅读时长 ≈ 5 分钟

最初用的是 LiveRe 的评论模块，一个韩国的产品，中文叫什么来必力，界面很丑，UI 感觉不像2025年的，而且 必须登录 才能评论，如图：

但胜在免费，也无所谓了。

可今天突然看见它在评论底下打起了广告，这有点难以接受。

Google 了一下解决办法。

在 layout_third-party\comments\livere.njk 中插入这段 JS 。

<script>
setInterval(function () {
    var box = document.querySelector(".trc_rbox_container");
    if(box) box.outerHTML = "";
}, 2000);
</script>

意思是每隔 2 秒钟检查一次页面中是否存在一个 class 为 .trc_rbox_container 的元素，如果找到了，就把它从页面中移除。

看了下效果，能实现去广告，但是还是会弹出来一瞬间，然后才消失，不完美，优化一下。

<script>
(function () {
  const blockedClassNames = ['trc_rbox_container', 'livere_ad', 'revenue_unit_wrap', 'livere_sponsor'];
  const origAppendChild = Element.prototype.appendChild;
  Element.prototype.appendChild = function (el) {
    if (
      el &&
      el.classList &&
      [...el.classList].some(cls => blockedClassNames.includes(cls))
    ) {
      return el;
    }
    return origAppendChild.call(this, el);
  };
})();
</script>

通过重写 appendChild 方法，拦截并阻止包含特定广告类名的元素动态添加到页面中，从而实现静默屏蔽广告。

完美，不弹了，彻底解决了广告。

本来到这里就算了，可是越看这个 UI 越丑，再想到必须登录才能评论，所以还是换了吧！

找到了 Waline 这个开源免费的评论系统，它的界面现代化，简洁好看，重要的是它 不需要登录 即可匿名评论，决定用它。

这是它的文档：Waline快速上手

基本上跟着这份文档就可以很完美的实现功能。

分成三个独立的模块，客户端-服务端-数据库。

第一步 LeanCloud

LeanCloud 是行业领先的一站式后端云服务提供商，专注于为开发者提供一流的工具、平台和服务。

自 2013 年 9 月发布以来，LeanCloud 已经服务超过 24 万开发团队，其中既包括大量创业公司，也有大型商业项目。

我们提供包括数据存储、文件存储与 CDN、消息推送和即时通讯在内的后端云服务，同时提供支撑后端代码的云引擎和云函数等开发工具，全面涵盖移动开发的需求；我们同时也提供了易于集成的全平台 SDK，支持 iOS、Android 应用和游戏开发，以及包括微信小程序在内的 web 开发。我们帮助客户摆脱繁重的后端开发负担，最大限度地降低开发成本、缩短开发周期、加快迭代速度，在激烈的市场竞争中胜出。

我们的团队成员大多来自于 Google、微软、IBM、百度、阿里巴巴、网易、搜狐等知名互联网公司，具备多年的工作经验、优秀的技术实力和严谨的工作态度。我们以强大的技术实力和优质的服务为您产品的快速发展提供坚实保障。

你可以把它理解为MySQL，是用来存放你评论的数据的。

登录 或 注册 LeanCloud 国际版 并进入 控制台

注意：一定要是国际版，国内版很麻烦。

创建应用并选择免费的开发版，名称随便起，进入设置点击应用凭证，记住 AppID , AppKey , MasteKey 这三个值

第二步 Vercel

Vercel Inc.（原名 ZEIT）是一家美国云平台即服务公司。该公司维护 Next.js Web 开发框架。 Vercel 的架构围绕可组合架构构建，并通过 Git 存储库、Vercel CLI 或 Vercel REST API 处理部署。 Vercel 是 MACH 联盟的成员。

你可以把它理解成你的评论服务器。

点击跳转至 Vercel 进行 Server 部署

登录 Github 账户，输入一个名称点击 Create 进行创建。

它会在你的 Github 中创建一个仓库，名称为你刚才输入的。

稍等一分钟后点击 Go to Dashboard 进入控制台。

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

Lean Cloud Vercel Environment
AppID LEAN_ID
AppKey LEAN_KEY
MasterKey LEAN_MASTER_KEY

完成后重新部署，它会弹出提醒框，点击 Redeploy 即可

稍等部署完毕后你会看到一个 Visit 按钮，点击后的地址即为你评论服务器的地址。

第三步 Hexo

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

npm install @waline/hexo-next

在配置文件中加入：

comments:
  active: waline

waline:
  enable: true
  serverURL: https://your-waline-instance.vercel.app  # 替换为你的 Waline 服务地址
  lang: zh-CN
  visitor: true
  comment_count: true
  requiredMeta: ['nick', 'mail']
  meta: ['nick', 'mail', 'link']
  pageSize: 10
  wordLimit: 0

配置项说明：

  • enable: 启用 Waline 评论系统。

  • serverURL: Waline 服务端地址，部署后由 Vercel 提供。

  • lang: 界面语言，zh-CN 表示简体中文。

  • visitor: 启用访问量统计。

  • comment_count: 显示评论数。

  • requiredMeta: 评论者必须填写的字段，如昵称和邮箱。

  • meta: 评论者可填写的字段，包含昵称、邮箱和网站链接。

  • pageSize: 每页显示的评论数量。

  • wordLimit: 评论字数限制，0 表示无限制。

重新部署即可看到效果。

附加(可选)：绑定域名

得到的评论服务器地址很长很乱，管理评论的时候显然不利于记忆。

所以，回到第二步完成后。

  1. 点击顶部的 Settings - Domains 进入域名配置页

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

    你可以像我一样输入 comment 为前缀的 comment.yourdomain.com

  3. 然后在域名服务器商处添加新的 CNAME 解析记录，它会提醒你自动添加。

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

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

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

第一个注册的为管理员，所以完成后尽快注册。