Waline评论系统接入记录
📝1420 个字
 | ⌛要看完怎么也得4分钟吧
链接汇总
Waline官网:https://waline.js.org/
Vercel官网:https://vercel.com/
TiDB官网:https://tidbcloud.com/
Neon官网:https://console.neon.tech/
接入流程:
-
服务器搭建:
- Waline对Vercel的支持非常友好,所以本次服务器部署也使用Vecel。因为其他的部署方式本人没有实际上手过,所以本文就暂时先不提了。
- 打开Waline官网,点击快速上手,跳转至接入文档。
- 稍微往下划划,就可以看到Vercel部署的部分,点击开头部分的Deploy按钮,跳转到Vercel部署界面。

- 在跳转界面可以选择喜欢的第三方账号登录Vercel,具体过程就不再展开了。登录成功后,这时应该就能看到部署界面了。

- 工程名字根据喜好,起个好记的名字(旁边的锁可以调整工程是否公开,默认为私人)。取完名字后点击Create,Vercel就会自动开始克隆并部署了。该过程一般需要一小段时间,此时可以暂时喝杯小茶休息一会🍵。
- 部署顺利的话,就可以看到恭喜界面了。此时点击continue to Dashboard,即可跳转到控制台。

- 在Vercel的控制台主界面,其中Domains的内容就是当前服务器的地址。这里建议在Setting-Domains中,手动添加一个自己的域名,防止国内dns污染和墙。到此服务器的基本部署搭建就完成了,接下来就需要给服务器添加数据库。
-
数据库搭建:
-
Waline默认使用的是LeanCloud作为数据库。但LeanCloud目前对国内网址的访问,限制很大。本人在经过一系列尝试后,收获了无数的报错,所以最终选择不如不用🤪。
-
其他数据库本人尝试过neon和TiDB,两者的部署过程都很方便,也没啥坑。大家随意选择其中使用就行。如果都不喜欢,官网文档中,还列举了一些其他的数据库,也可以提供参考。但因为本人没使用过,就不展开描述了。
-
neon数据库:
- 同理,账号注册登录过程,本文不再展开描述。进入neon的控制台后,点击New Project,在弹出的界面中,输入对应的配置,最后点击Create即可。

- 创建完成后,点击主界面左侧的SQL Editor,打开数据库编辑界面。在右侧的输入区域,删除所有原有的内容,然后粘贴官方给的sql代码,最后点击下方的Run。

- 成功后,点击Dashboard回到主界面,并且点击主页的Connect按钮,在弹出界面,修改一下连接类型,直接选择Paramters only,即可获得当前数据的所有连接信息。
- 回到Vercel控制台界面,分别点击Setting-Environment Variables。在环境变量配置界面,分别输入对应的链接配置,最后点击save。保存成功后,在右下角自动弹窗中点击Redeploy,让配置生效。neon数据库的部署,至此便告一段落。

-
TiDB数据库:
- 同理,账号注册登录过程,本文不再展开描述。进入TiDB的控制台后,点击右上角的Create Cluster。在弹出的界面中,修改数据库位置和数据库名字就行,其他配置保持默认,最后点击右侧的Create即可。如果发现费用不是0,那说明有配置没选对,再检查检查。

- 创建成功后,进入控制台,点击左侧的SQL Editor,打开数据库编辑界面。和neon类似,TiDB也需要用官方的sql代码,初始化一下数据库结构。但TiDB的编辑器没有那么智能,不能一次性粘贴并运行。这里推荐每次只输入到
;为止,每输入完一部分,点击一次Run,然后继续输入下一部分。 
- 全部输入完成后,如果能在左侧的Schemas里看到3个表,说明创建成功。之后即可点击Overview,回到主界面。点击主界面的connect,打开连接信息界面,在下方的Parameters区域内,即可看到当前数据库的所有连接信息。
- 回到Vercel控制台界面,分别点击Setting-Environment Variables。在环境变量配置界面,分别输入对应的链接配置,最后点击save。保存成功后,在右下角自动弹窗中点击Redeploy,让配置生效。TiDB数据库的部署,至此便告一段落。

-
两个数据库,本人最后使用的TiDB。一个是因为TiDB免费支持5GB,neon只有512MB,相对瓶颈点。其次TiDB的资费,对于本站这种流量小的相对来说更好友好,如果真有需要,付费也还算能接受。最后一点,TiDB有日本的数据库,所以理论上要比新加坡相对延迟优秀点,但具体每测过,大伙根据实际情况来就行。
-
-
客户端接入:
- 客户端部分相对就很简单了,直接在网站对应的html文件里面,添加对应的代码即可。
<head>
<!-- head部分 -->
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css"/>
</head>
<body>
<!-- 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>
-
TODO: