Fluid -6- 使用 Waline 评论系统一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

title: Fluid -6- 使用 Waline 评论系统 mathjax: false date: 2021-08-31 15:51:40 tags: [Hexo, Theme, Fluid] categories: [Hexo, Theme, Fluid]

Waline 是一款基于 Valine 衍生的简洁、安全的评论系统。本文记录 fluid 主题安装Waline 方法。

简介

Waline 是一款基于 Valine 衍生的简洁、安全的评论系统。

官网链接：waline.js.org/
相对于 Valine 有一些后天的优势：

优势	描述
自由评论	完全的 Markdown 支持，同时包含表情、数学公式、HTML 嵌入
轻量	54kB gzip 的完整客户端大小
强大的安全性	内容校验、防灌水、保护敏感数据等
登录支持	在允许匿名评论的基础上，支持账号注册，保持身份
完全免费部署	可免费部署在 Vercel 上
易于部署	多种部署部署方式和存储服务支持

使用方法

LeanCloud 设置 (数据库)

登录在新窗口打开或注册在新窗口打开 LeanCloud 国际版 并进入控制台在新窗口打开
点击左下角创建应用在新窗口打开并起一个你喜欢的名字 (请选择免费的开发版):

进入应用，选择左下角的 设置 > 应用 Key。你可以看到你的 APP ID,APP Key 和 Master Key。后续我们会用到这三个值。

注意: 如果你正在使用 Leancloud 国内版 (leancloud.cn在新窗口打开)，我们推荐你切换到国际版 (leancloud.app在新窗口打开)。否则，你需要为应用额外绑定已备案的域名:

登录国内版并进入需要使用的应用

选择 设置 > 域名绑定 > API 访问域名 > 绑定新域名 > 输入域名 > 确定。

按照页面上的提示按要求在 DNS 上完成 CNAME 解析。

Vercel 部署 (服务端)

点击上方按钮，跳转至 Vercel 进行 Server 端部署。
如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。
输入一个你喜欢的 Vercel 项目名称并点击 Create 继续:

此时会让你创建 Team 账号，这里选择 Skip 即可：

此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。

一两分钟后，满屏的烟花会庆祝你部署成功。此时点击 Go to Dashboard 可以跳转到应用的控制台。

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

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

环境变量配置完成之后点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。

此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready。

此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。

HTML 引入 (客户端)

在你的网页中进行如下设置:

使用 CDN 引入 Waline: //cdn.jsdelivr.net/npm/@waline/client。
创建 <script> 标签使用 Waline() 初始化，并传入必要的 el 与 serverURL 选项。
- el 选项是 Waline 渲染使用的元素，你可以设置一个字符串形式的 CSS 选择器或者一个 HTMLElement 对象。
- serverURL 是服务端的地址，即上一步获取到的值。

<head>
  ..
  <script src="//cdn.jsdelivr.net/npm/@waline/client"></script>
  ...
</head>
<body>
  ...
  <div id="waline"></div>
  <script>
    Waline({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
</body>

评论服务此时就会在你的网站上成功运行 🎉

评论管理 (管理端)

部署完成后，请访问 <serverURL>/ui/register 进行注册。首个注册的人会被设定成管理员。
管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
用户也通过评论框注册账号，登陆后会跳转到自己的档案页。

Fluid 主题引入

设置主题配置文件 comments -> type 值为 waline

# 评论插件
# Comment plugin
comments:
	enable: true
	# 指定的插件，需要同时设置对应插件的必要参数
	# The specified plugin needs to set the necessary parameters at the same time
	# Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis
	type: waline

配置 waline 相关信息

# Waline
# 从 Valine 衍生而来，额外增加了服务端和多种功能
# Derived from Valine, with self-hosted service and new features
# See: https://waline.js.org/
waline:
  serverURL: 'path-to-your-server-url'
  placeholder: 遗憾莫过于难忘你的背影，却找不到你来过的痕迹 ...
  path: window.location.pathname
  avatar: retro
  meta: ['nick', 'mail', 'link']
  pageSize: 10
  lang: zh-CN
  highlight: true
  avatarCDN: ''
  avatarForce: false
  requiredFields: []
  emojiCDN:
  emojiMaps:
  anonymous:

最重要的是填入之前得到的 服务端地址 到serverURL 中

示例效果

参考资料

waline.js.org/