Waline评论系统接入记录

🕒2025年03月31日 11:05:35 | 📖-- | 💬-- | 🏷️ #技术 , #web , #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：
- 评论通知推送
- emoji自建
- 图床接入

Waline评论系统接入记录

接入流程：

服务器搭建：

数据库搭建：

neon数据库：

TiDB数据库：

客户端接入：

TODO：