在 Hugo 博客中集成评论系统 Waline 与 浏览量统计
版权归作者所有，如有转发，请注明文章出处：https://cyrus-studio.github.io/blog/
关于 Waline
Waline 是一个轻量级、快速且安全的评论系统，适用于静态网站。
其主要特点包括：
-
轻量级：前端仅约 50KB，加载速度快。
-
支持 Markdown：支持完整的 Markdown 语法，方便用户撰写格式化评论。
-
多种部署方式：支持 Vercel、Netlify、CloudBase、Docker 等多种部署方式。
-
多种存储后端支持：支持 LeanCloud、MongoDB、MySQL、SQLite 等多种数据库。
-
安全性：具备防刷频、IP 黑名单、评论内容重复检查等安全功能。
-
社交登录支持：支持 QQ、微信、Telegram 等社交平台登录。
-
通知功能：支持邮件、微信、QQ、Telegram 等通知方式。
Waline 是开源的，采用 GPL-2.0 许可证。
-
官网：https://waline.js.org/
-
开源地址：https://github.com/walinejs/waline
-
快速上手：https://waline.js.org/guide/get-started/
LeanCloud 设置 (数据库)
创建评论数据存储数据库。
1、登录 或 注册 LeanCloud 国际版 并进入 控制台
https://console.leancloud.app/apps
2、点击左上角 创建应用 并起一个你喜欢的名字 (请选择免费的开发版):
3、进入应用，选择左下角的 设置 > 应用 Key。你可以看到你的 APP ID,APP Key 和 Master Key。请记录它们，以便后续使用。
Vercel 部署 (服务端)
1、点击下面链接，跳转至 Vercel 进行 Server 端部署。
https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwalinejs%2Fwaline%2Ftree%2Fmain%2Fexample
注：如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。
2、安装 Vercel
3、输入一个你喜欢的 Vercel 项目名称并点击 Create 继续:
4、此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。
一两分钟后，满屏的烟花会庆祝你部署成功。此时点击 Go to Dashboard 可以跳转到应用的控制台。
5、点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。
https://vercel.com/cyrus-studios-projects/waline/settings/environment-variables
6、环境变量配置完成之后点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。
7、此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。
点击 Visit 访问 serverURL，可以看到评论输入框，接着把它集成到 hugo
将 Waline 集成到 Hugo
在你的 Hugo 主题中添加 Waline 的前端代码，一般是在 themes\m10c\layouts_default\single.html
1、导入 Waline 样式 https://unpkg.com/@waline/client@v3/dist/waline.css
<head><!-- ... --><linkrel="stylesheet"href="https://unpkg.com/@waline/client@v3/dist/waline.css"/><!-- ... -->
</head>
2、创建 <script> 标签使用来自 https://unpkg.com/@waline/client@v3/dist/waline.js 的 init() 函数初始化，并传入必要的 el 与 serverURL 选项。
-
el 选项是 Waline 渲染使用的元素，你可以设置一个字符串形式的 CSS 选择器或者一个 HTMLElement 对象。
-
serverURL 是服务端的地址，即上一步获取到的值。
<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>
修改后如下：
重新 push 代码，等待网站构建完成。
评论服务此时就会在你的网站上成功运行 🎉
Waline 如何区分不同的评论列表
Waline 确实所有评论都提交到同一个 serverURL，如果有很多文章用到，它是如何区分不同的评论列表呢
Waline 会使用你在前端传入的 path 字段（如果未设置，默认使用 location.pathname）来标识是哪一篇文章：
<script type="module">import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';init({el: '#waline',serverURL: 'https://waline-15wtwfoa7-cyrus-studios-projects.vercel.app',path: location.pathname, // ← 默认就是这个});
</script>
举例：
-
/posts/first-post/ 的评论 path = “/posts/first-post/”
-
/posts/second-post/ 的评论 path = “/posts/second-post/”
这样，每篇文章在数据库中会对应一个不同的评论列表，互不干扰。
对应数据库中 Comment 表的 url 字段
Failed to fetch
发表评论发现不能正常，报 401
请求测试返回是一个 Vercel 的登录页面
原因是默认开启了 Vercel Authentication。
Vercel Authentication 是 Vercel 提供的一个安全功能，主要用于限制对部署内容的访问。
启用后：
-
访问者在访问部署链接时会被重定向到 Vercel 登录页面。
-
登录成功后，Vercel 会检查该用户是否是你的团队成员。
-
非成员用户将无法访问该部署页面。
只需要把 Vercel Authentication 关闭即可。
评论管理 (管理端)
-
部署完成后，请访问 /ui/register 进行注册。首个注册的人会被设定成管理员。
-
管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
-
用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。
访问 <serverURL>/ui 进入评论管理页面。
浏览量统计
编辑 themes\m10c\layouts_default\single.html
1. 在合适位置添加页面浏览量 DOM 元素
找到你想显示“阅读量”的位置，比如 post-meta 内，可以插入：
<div><span class="meta-item">{{ partial "icon.html" (dict "ctx" $ "name" "eye") }}阅读量: <span class="waline-pageview-count" data-path="{{ .RelPermalink }}"></span></span></div>
这将为当前文章动态生成唯一的 data-path，供 Waline 使用。
2. 更新 Waline 初始化代码，添加 path 和启用 pageview: true
你已有的初始化代码中应补充如下内容：
<script type="module">import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';init({el: '#waline',serverURL: 'https://waline-15wtwfoa7-cyrus-studios-projects.vercel.app',path: location.pathname, // ← 当前页面路径pageview: true, // ← 启用浏览量统计});
</script>
修改完成后，重新 push 代码。
构建完成后，可以看到效果如下：
参考：https://waline.js.org/guide/features/pageview.html
完整源码
开源地址：https://github.com/CYRUS-STUDIO/blog