如何搭建个人网页(九)—— 评论系统(一)

开始

本章主要讲如何为个人网站增加评论系统。

评论系统我选择的是Waline,然后配置数据库和服务端有两种办法,第一种是使用Leancloud来做数据库,用Vercel来部署服务;第二种是用自己的云服务器来做数据库和服务端。本章先介绍第一种方法,即 Waline+Leancloud数据库+Vercel服务端 方案,下一章会介绍用服务器搭建的办法,建议两章都看完,比对后选择适合的方法。

可直接参考:快速上手 | Waline

Why is Waline

Waline 是一个简洁、高效、基于服务端的评论系统,适合静态网站使用。它以轻量化设计为核心,通过将评论存储和管理交给服务端(如 Vercel 或自建服务器),有效降低了前端的加载压力,同时支持 Markdown、表情、访问统计、匿名评论等功能,并拥有高度可定制的界面,满足多种场景需求。

Waline是基于Valine开发的新版本(Valine的作者已放弃维护,存在许多bug),作为评论系统其有以下优势:

  1. Waline 不依赖繁重的前端脚本,加载速度快,对页面性能影响较小,特别适合静态站点。
  2. 支持匿名评论,只需要设置昵称,其他评论系统基本都要求注册和登陆他们的账号。

Leancloud设置(数据库)

LeanCloud 是一家提供云服务的技术公司,主要为开发者提供实时数据存储、消息推送、用户身份验证、云函数等服务。它帮助开发者快速构建和发布应用,提供了简便的 API 和 SDK,支持多种平台,包括移动端和 Web。LeanCloud 的目标是简化后端开发,使开发者能专注于产品和用户体验,而不必担心复杂的基础设施搭建和维护。

Leancloud有国内版和国际版两种,两者各有优劣。国内版要求你的网站绑定了经过备案的域名,而国际版不允许大陆用户评论(要挂梯子),请根据需要选择。

首先进入Leancloud官网(国内版):LeanCloud(美味书签),并根据需要选择是否切换到国际版,然后注册一个账号,并进入控制台。

然后点击左上角创建应用,填写一个喜欢的应用名称,并选择免费的开发版,创建。

image-20241217154421374

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

485377a11708b3fac67d449f387ce7bf

如果你选择的国内版,还要绑定一个备案过的域名,选择 设置/域名绑定,然后点击 “API访问域名” 下的 “绑定新域名”,填入你的域名。此时页面上会出现一个CNAME,按照同第五章中提过的流程一样进行域名解析即可。

Vercel部署(服务端)

Vercel 是一个面向前端开发的云平台,专注于为开发者提供极简易的部署和托管服务,特别适合现代 Web 应用的部署。Vercel 支持静态网站和动态 Web 应用的快速构建和发布,尤其与 React、Next.js 等前端框架兼容良好。通过自动化的 CI/CD 流程,Vercel 能高效处理前端资源的部署和缩放,且提供全球 CDN 加速,极大提高了网页加载速度和性能。

进入该页面:https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwalinejs%2Fwaline%2Ftree%2Fmain%2Fexample。

第一次进入会提示让你注册账号,建议用github账号快速注册。

在该页面,选择你的github账号,然后填写一个喜欢的项目名,点击Create。

image-20241217160420804

此时 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绑定的域名。

6b9ebca035184adfe85ea3c379991ae3

环境配置完成后,点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。

34c27f5cd0a76419c51a99d267f9eb22

Next配置

首先在blog/目录下安装waline:

1
npm install @waline/hexo-next --save

然后打开主题配置文件_config.next.yml,进行如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Waline 评论
# For more information: https://waline.js.org, https://github.com/walinejs/waline
waline:
enable: true #是否开启
serverURL: blog-waline-comment.vercel.app # Waline服务端地址,我们这里就是上面部署的 Vercel 地址
placeholder: 请文明评论呀~ # #评论框的默认文字
avatar: mm # 头像风格
meta: [nick, mail, link] # 自定义评论框上面的三个输入框的内容
pageSize: 10 # 评论数量多少时显示分页
lang: zh-cn # 语言, 可选值: en, zh-cn
# Warning: 不要同时启用 `waline.visitor` 以及 `leancloud_visitors`.
visitor: true # 文章阅读统计
comment_count: true # 如果为 false , 评论数量只会在当前评论页面显示, 主页则不显示
requiredFields: [nick, mail] # 设置用户评论时必填的信息,[nick,mail]: [nick] | [nick, mail]
libUrl: # Set custom library cdn url