博客评论系统

前言

给博客新增了评论系统，主要功能有：

• 支持发表评论、点赞和回复。
• 支持免登录评论，访客填写昵称和邮箱即可评论。
• 支持邮件通知，评论收到回复时会邮件提醒。
• 提供管理后台，方便admin管理评论数据。

方案

该博客评论系统采用Waline搭建，Waline提供了开箱即用的评论、点赞、回复、邮件与后台管理功能，只需在Hexo静态网站中接入Waline Client并将Waline Server部署到云平台上便能使用。本博客使用Vercel托管Waline Server，并通过MongoDB存储评论数据。

搭建完后整个博客的运行时序如下：

sequenceDiagram
    autonumber
    participant Browser as 浏览器
    participant GitHub as GitHub Pages
    participant Vercel as Vercel
    participant MongoDB as MongoDB

    Browser->>GitHub: 请求 Hexo 文章
    GitHub-->>Browser: 返回 HTML、CSS 和 JavaScript
    Note over Browser: Waline Client 在浏览器中初始化
    Browser->>Vercel: Waline Client 请求评论列表
    Note over Vercel: Waline Server 部署在 Vercel
    Vercel->>MongoDB: 查询评论
    MongoDB-->>Vercel: 返回评论数据
    Vercel-->>Browser: Waline Server 返回评论 JSON
    Browser->>Browser: Waline Client 渲染评论列表

    Browser->>Vercel: Waline Client 提交评论
    Vercel->>MongoDB: 保存评论
    MongoDB-->>Vercel: 保存成功
    Vercel-->>Browser: Waline Server 返回新评论
    Browser->>Browser: Waline Client 更新评论列表

名词解释：

• Waline Client：前端程序，运行在浏览器，负责展示评论界面、发起评论请求
• Waline Server： 服务端程序，负责处理评论请求、执行业务逻辑、读写数据库
• Vercel：云托管平台，在上面部署和运行Waline Server
• MongoDB：数据库，负责持久化存储评论数据
• GitHub Pages：云托管平台，托管和分发Hexo生成的静态网站文件

实现

1.在Vercel上部署Waline Server

相关平台：Vercel，参考文档：ref

• Vercel新建项目时会关联Github自动创建Waline Server仓库。
• Vercel拉取Waline Server仓库代码，自动完成构建和部署。

2.在Vercel创建MongoDB数据库，将数据库关联到Waline Server

相关平台：Vercel

• 在Vercel中创建MongoDB数据库，创建路径：Storage > Create Database > MongoDB Atlas。
• 将数据库关联到Waline Server：Vercel创建数据库时指定关联Waline Server项目即可，关联成功后Waline Server项目会有和数据库相关的环境变量配置，查看路径：Environment Variables。

3.在Hexo博客中配置Waline Client，并指定Waline Server地址

该博客使用的主题hexo-theme-orange本身集成了Waline Client，详见_config.yml。

故只用配置Waline Server地址即可，参考：_config.yml。

Waline Server地址可以从Vercel获取，相关路径 Waline Server项目 > Domains。

4.配置邮件通知

• 申请一个walilne发信邮箱，开启SMTP服务。
• 在Vercel的Waline Server项目关联邮箱，即配置和邮箱相关的环境变量，可参考：环境变量配置。

后续规划

Vercel虽然部署方便，免费额度很香，但也有个问题：部署的节点在国内会被墙，需要科学上网才能访问。

所以后续还是打算用腾讯云替代Vercel，把Waline Server迁移上去。