此文章发布于 2023/08/13，部分内容可能已经过时，请谨慎甄别。

前端时间体验了Valine，觉得不好用，就开始尝试部署Waline。

了解Waline

一款从 Valine 衍生的带后端评论系统。可以将 Waline 等价成 With backend Valine.

特性

  • 快速

  • 安全

  • Markdown 语法支持

  • 轻量易用

  • 免费部署

  • 多种部署部署方式和存储服务支持，每列选择一项多达 243 种部署方式任你选择

更多特性可自行前往waline.js.org了解。

Leancloud设置（数据库）

由于Waline跟Valine一样，使用的是Leancloud数据库存储数据，所以Leancloud不需要过多的改动，只需要登录Leancloud应用，在设置>应用凭证中获取Master Key即可。

Vercel部署（服务器）

1.添加项目

单击下方卡片以创建个新项目，

如果跳出登录界面，请先登录或注册。

然后，输入一个你喜欢的 Vercel 项目名称并点击 Create 继续。此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。几分钟后，当看到彩带时，则表示部署成功。此时点击 Go to Dashboard 可以跳转到应用的控制台。

2.配置环境变量

点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应你在Valine使用的APP ID，APP Key和刚刚获取到的Master Key。

3.使环境变量生效

点击顶部的Deployments，然后点击顶部最新的一次部署右侧的Redeploy按钮进行重新部署以确保能使第2步的环境变量生效。

4.绑定独立域名

你必须绑定自己的域名，因为Vercel分配给你的二级域名在国内访问速度非常慢，这会使评论体验大打折扣。 点击顶部的 Settings - Domains 进入域名配置页，输入需要绑定的域名并点击 Add 添加域名。 然后，在域名服务商处添加新的 CNAME 解析记录，等待生效，你可以通过自己的域名来访问了！

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

在网页中引入Waline（客户端）

在<head>中插入以下代码：

<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />

这是为了引入Waline的样式。

在<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>

其中的“serverURL”（服务端地址）和“el”（渲染元素）需要根据你的情况进行适当修改。

注册并成为管理员

在你的服务端地址后面拼接上“/ui/register”，注册完成后即可成为管理员（第一个注册的人会被设为管理员）。