使用vercel搭建评论系统的前期准备

面向国内用户的，首先得有个域名（可以在万网等国内平台进行购买）
其次需要有一个github/gitlab/Bitbucket的账号，没有可以注册一个
本教程教使用leancloud或Deta作为数据库存储，所以还需要有其中之一的账号

Vercel部署Waline（服务端）

vercel是什么

vercel是一个网站托管平台，方便开发者快速部署自己的网站，全球都有CDN节点，国内访问速度很快。
vercel仅是一个网站托管部署的平台，所以还需依托GitHub/GitLab/BitBucket来进行项目代码托管。在新建项目时也会提示选择其中之一作代码托管。

新建项目部署网站

参考waline文档，在文档Vercel部署(服务端) 部分点击▲ Deploy就会跳转至部署链接，没有账号就按照相应步骤注册即可。
waline文档
选择任意一个代码托管平台进行代码托管（本教程以gitlab示例）
选择托管平台
输入要创建的仓库名
输入仓库名
等待代码clone至仓库
代码拉取
等待项目部署
等待部署
等待部署结束后，会跳转到部署成功界面（有满屏的彩带庆祝🥳），点击Continue to Dashboard跳转至此次部署相应的控制台，非国内用户点击Visit可以预览部署的网页。因为vercel在国内被墙，所以其一开始提供的域名国内无法访问，vercel官方也给出了解决方案，在解析域名时将A记录改成76.223.126.88，或把cname改成cname-china.vercel-dns.com（或者也可以通过站长工具ping下cname-china.vercel-dns.com查看其使用ip随便选一个）。

本站域名xseven.top购买于阿里云旗下万网，购买后登录阿里云控制台，选择云解析DNS，选择相应域名进入，点击添加记录在主机记录输入要解析的名字，在记录类型选择记录类型A则在记录值输入ip，选择cname则在记录值输入提供的cname值，确定后即生成可配置用于访问vercel部署网站的域名。

在网页相应的控制台选择Settings，在左侧边栏选择Domains，填入已配置好的域名点击Add，等待添加成功即可访问。部署的网站访问域名即为服务端地址。
添加域名
在访问服务端的域名后添加/ui/register进入用户注册页，第一个注册的人默认为评论系统管理员。

Waline数据库设置（数据库）

使用LeanCloud作为数据库

LeanCloud是国内一家提供数据存储服务的网站，国内访问速度延迟较低。注册leancloud推荐注册国际版，国内版绑定域名要求是备案过的，备案域名至少需要有国内的独立ip才可以。注册之后使用开发版，提供1G免费存储，仅用于博客评论使用完全够用。
进入LeanCloud个人控制台，点击创建应用，默认为开发版，输入要创建的应用名和描述然后创建即可。
leancloud创建应用
进入创建好的应用的控制台，在左侧边栏选择设置->应用凭证，
回到部署在Vercel的Waline项目的控制台点击顶部Settings选择左边的Environment Variables进入环境变量配置页，并配置三个环境变量LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY，值分别填入在 LeanCloud应用凭证中的 AppID, AppKey, MasterKey。
配置Vercel环境变量

如果使用该评论系统的是部署在国内托管平台的客户端（如gitee、coding），需给LeanCloud应用配置域名（不要求备案），在左侧边栏选择设置->域名绑定，点击绑定域名，填入要绑定的域名，确定之后LeanCloud会提供CNAME值，再将CNAME值绑定到相应域名上，并在Vercel该项目中配置环境变量LEAN_SERVER值为绑定的域名。

环境变量配置成功后选择Deployments点击最新的一个部署右侧的三个点选择Redeploy在弹出提示框中点击REDEPLOY，等待重新部署成功即可。

重新部署

使用Deta Base作数据库

Deta是国外的开发平台，目前给注册开发者提供无限的存储服务，目前其数据托管在亚马逊上，亚马逊在全球有多个节点，国内访问速度很不错
注册Deta之后，进入项目会提示选择服务存储节点（推荐Singapore），进入项目控制台默认为default项目，也可在上部项目选择栏选择项目或选择+New project新建项目（据目前Deta官方文档解释当前并未有删除项目的功能）。在项目页面选择左侧边栏Project Keys点击Create Key，复制出现的提示框中Project Key后的值，回到部署在Vercel的Waline项目的控制台点击顶部Settings选择左边的Environment Variables进入环境变量配置页，并配置变量名DETA_PROJECT_KEY值为复制的Deta项目密钥Project Key。
获取Data项目密钥
同理环境变量配置成功后选择Deployments点击最新的一个部署右侧三个点选择Redeploy在提示框中点击REDEPLOY，等待重新部署成功即可。

安全域名配置

如要配置安全域名，可在环境变量中添加SECURE_DOMAINS值为允许被访问的域名，支持逗号分隔（不配置表示允许所有域名来源）。本地开发中localhost 和 127.0.0.1 会被默认添加到安全域名列表中。
其他环境变量配置可参考Waline服务端配置中环境变量配置相关。
每次进行变量配置后均需将项目重新部署。

客户端引入（客户端）

关于客户端引入如本博客，使用hexo的butterfly主题，仅需在_config.butterfly.yml或butterfly主题文件夹中的_config.yml配置comments中的use值为Waline

1
2
3

comments:
  use: Waline

并对waline进行相应配置

1
2
3
4
5
6
7
waline:
  serverURL: xxxx.xxxxx.xxx # 你设置在Vercel的waline项目域名
  bg: # waline背景图
  pageview: false   #默认false，修改后会接管文章的浏览量统计
  option: #客户端对应的组件属性设置
    dark: auto  #设置随网页夜间模式变化
    imageUploader: false #取消评论图片上传功能

使用html引入参考waline文档中html引入的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
<!-- 需<script>标签使用 CDN 引入 Waline -->
<script src="https://unpkg.com/@waline/client@v2/dist/waline.js"></script>
<link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v2/dist/waline.css"
/>
<!-- ... -->
</head>
<body>
<!-- 创建 <script> 标签使用 Waline.init() 初始化，并传入必要的 el 与 serverURL，serverURL填入配置好的服务端地址 -->
<div id="waline"></div>
<script>
    Waline.init({
    el: '#waline',  
    serverURL: 'https://your-domain.xxxxx.xxx',
    });
</script>
</body>

更多组件属性配置可参考：https://waline.js.org/reference/component.html