将评论系统从Valine更换到Waline
此文章发布于 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”,注册完成后即可成为管理员(第一个注册的人会被设为管理员)。