如何搭建个人网页(九)—— 评论系统(一)
开始
本章主要讲如何为个人网站增加评论系统。
评论系统我选择的是Waline,然后配置数据库和服务端有两种办法,第一种是使用Leancloud来做数据库,用Vercel来部署服务;第二种是用自己的云服务器来做数据库和服务端。本章先介绍第一种方法,即 Waline+Leancloud数据库+Vercel服务端 方案,下一章会介绍用服务器搭建的办法,建议两章都看完,比对后选择适合的方法。
可直接参考:快速上手 | Waline
Why is Waline
Waline 是一个简洁、高效、基于服务端的评论系统,适合静态网站使用。它以轻量化设计为核心,通过将评论存储和管理交给服务端(如 Vercel 或自建服务器),有效降低了前端的加载压力,同时支持 Markdown、表情、访问统计、匿名评论等功能,并拥有高度可定制的界面,满足多种场景需求。
Waline是基于Valine开发的新版本(Valine的作者已放弃维护,存在许多bug),作为评论系统其有以下优势:
- Waline 不依赖繁重的前端脚本,加载速度快,对页面性能影响较小,特别适合静态站点。
- 支持匿名评论,只需要设置昵称,其他评论系统基本都要求注册和登陆他们的账号。
Leancloud设置(数据库)
LeanCloud 是一家提供云服务的技术公司,主要为开发者提供实时数据存储、消息推送、用户身份验证、云函数等服务。它帮助开发者快速构建和发布应用,提供了简便的 API 和 SDK,支持多种平台,包括移动端和 Web。LeanCloud 的目标是简化后端开发,使开发者能专注于产品和用户体验,而不必担心复杂的基础设施搭建和维护。
Leancloud有国内版和国际版两种,两者各有优劣。国内版要求你的网站绑定了经过备案的域名,而国际版不允许大陆用户评论(要挂梯子),请根据需要选择。
首先进入Leancloud官网(国内版):LeanCloud(美味书签),并根据需要选择是否切换到国际版,然后注册一个账号,并进入控制台。
然后点击左上角创建应用,填写一个喜欢的应用名称,并选择免费的开发版,创建。

进入刚刚创建的应用设置,选择左下角 设置/应用凭证,这里有三个参数 AppID、AppKey、MasterKey,等会会用到。

如果你选择的国内版,还要绑定一个备案过的域名,选择 设置/域名绑定,然后点击 “API访问域名” 下的 “绑定新域名”,填入你的域名。此时页面上会出现一个CNAME,按照同第五章中提过的流程一样进行域名解析即可。
Vercel部署(服务端)
Vercel 是一个面向前端开发的云平台,专注于为开发者提供极简易的部署和托管服务,特别适合现代 Web 应用的部署。Vercel 支持静态网站和动态 Web 应用的快速构建和发布,尤其与 React、Next.js 等前端框架兼容良好。通过自动化的 CI/CD 流程,Vercel 能高效处理前端资源的部署和缩放,且提供全球 CDN 加速,极大提高了网页加载速度和性能。
第一次进入会提示让你注册账号,建议用github账号快速注册。
在该页面,选择你的github账号,然后填写一个喜欢的项目名,点击Create。

此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库,仓库名为你之前输入的项目名。等待一两分钟后,看到Congratulations说明成功。点击 Go to Dashboard
可以跳转到应用的控制台。
点击顶部的 Settings/Environment Variables 进入环境变量配置页,并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。如果使用的是Leancloud国内版,额外配置环境变量 Lean_Server,值为Leancloud绑定的域名。
环境配置完成后,点击顶部的 Deployments
点击顶部最新的一次部署右侧的 Redeploy
按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。

Next配置
首先在blog/目录下安装waline:
1 | npm install @waline/hexo-next --save |
然后打开主题配置文件_config.next.yml,进行如下配置:
1 | # Waline 评论 |