通过 Waline 给你的静态网站添加评论功能 （以 VitePress 为例）
前言
如今各类云平台层出不穷，想要搭建一个博客不再需要购买 VPS，甚至连虚拟主机也可以免了，使用 Hexo、VitePress 这类静态博客框架就可以在云平台上自动构建实现公开访问了。
但与 WordPress、Typecho 这类动态博客相比，静态博客在部分功能上还是有些局限的，比如博客如果需要展示大量图片受限于云平台提供的空间和流量，需要单独存放在第三方的图床或者对象存储中；评论功能这些包含互动的动态功能也需要使用第三方的评论系统来实现。
对于图片，在之前的文章里已经通过自建 MinIO 实现了，具体可以查看《使用 MinIO 与 PicList 自建对象存储与图床》，今天要解决的就是评论功能了。第三方评论系统有很多，部署起来最省事的自然是几个基于 Github 的评论系统了，但是对于用户来说体验并不友好，需要登录 Github 账号才可以评论，并且数据也存储在 Github 的 Issues 或者 Discussions 中，感觉有些杂乱。
关于 Waline
个人最推荐的还是 Waline，支持的部署方式以及数据库非常的多，进可使用 VPS 独立部署，退可白嫖云平台免费部署，非常的灵活。除此之外，评论通知方式也支持各类常见的通知，例如邮件、飞书等等。
- 部署方式：独立部署、Vercel、阿里云函数、百度云函数、CloudBase 云开发、Netlify、Railway、Vercel、Zeabur
- 数据库：MongoDB、MySQL、TiDB、SQLite、PostgreSQL、CloudBase、Github
- 通知方式：邮件、微信、企业微信、QQ、电报、PushPlus、Discord、飞书
官方推荐的部署方式是通过 Vercel 部署服务端，使用 LeanCloud 作为数据库，两者的免费额度基本够用，不需要额外付费，可以参考官方文档的快速上手，想用其他的云平台部署也比较简单，大部分都可以通过官方提供的模板一键部署。
我选择的是独立部署，在 VPS 上通过 Node.js 直接运行，使用 MongoDB 作为数据库，官方文档关于这种部署方式的介绍比较简略，下面详细介绍一下。
服务端部署
直接部署
以下部署流程默认 VPS 上已经有 Node.js 环境并安装好 MongoDB 数据库
Waline 已经发布了 npm 包，因此有 Node.js 环境下部署 Waline 非常简单，只需要配置相关的环境变量，通过 PM2 启动就可以了。
首先，通过 mkdir waline 创建一个文件夹用于存放 Waline，然后通过 npm init -y 初始化，就会在目录中看到一个 package.json 文件了
{
"name": "waline",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}接着就可以通过 npm install @waline/vercel 安装 Waline 了，安装完成之后会出现，package.json 中会新增 @waline/vercel
"dependencies": {
"@waline/vercel": "^1.32.3"
},此时已经可以通过 node node_modules/@waline/vercel/vanilla.js 启动 Waline 了，但是为了更加的方便的引入环境变量并且让 Waline 运行在后台，还需要安装 pm2 和 dotdev
首先是 pm2，推荐直接在全局安装 npm install pm2 -g，然后在 package.json 的 scripts 中新增以下两行代码用于启动项目
"scripts": {
"start": "node main.js",
"prd": "pm2 start main.js --name waline",
"test": "echo \"Error: no test specified\" && exit 1"
},此时，我们还没有 main.js 文件，通过 npm install dotenv 安装上 dotenv 之后，再手动创建一个 main.js 文件，粘贴上以下两行代码引用 dotenv 与 waline
require('dotenv').config();
require('@waline/vercel/vanilla.js');这样就大功告成了，最后只需要再创建一个 .env 文件，根据官方文档的服务端环境变量填入站点信息、数据库信息、通知方式等必要的环境变量后，使用 npm run prd 运行即可。
Docker 部署
services:
waline:
container_name: waline
image: lizheming/waline:latest
restart: always
network_mode: host
volumes:
- /opt/waline:/app/data
environment:
TZ: 'Asia/Shanghai'
SQLITE_PATH: '/app/data'
JWT_TOKEN: 'Your token'
SITE_NAME: 'Your site name'
SITE_URL: 'https://example.com'
SECURE_DOMAINS: 'example.com'
AUTHOR_EMAIL: 'mail@example.com'反向代理
默认情况下，Waline 运行在 8360 端口，由于是公开访问的页面，建议绑定一个域名反代 8360 端口，方便静态网站引入使用
location / {
proxy_pass http://127.0.0.1:8360;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header REMOTE-HOST $remote_addr;
add_header X-Cache $upstream_cache_status;
# cache
add_header Cache-Control no-cache;
expires 12h;
}后台管理
完成部署并反代后，直接访问绑定的域名，可以看到一个用于演示的评论框
点击登录后，会弹出一个小窗口用于登录或注册，首个注册的用户会自动设置为管理员
后续访问 http://example.com/ui 就可以进入后台管理页面，管理员可以修改、标记或删除评论。
引入 Waline
到现在为止，我们还只能在演示页面中发送评论，最后一步则是在自己的静态博客中引入 Waline，只有这样博客的文章页面下方才会出现评论区，下面以 VitePress 为例
首先通过 npm install @waline/client 安装上 Waline 的客户端，由于 @waline/client 本身基于 Vue 3，而 VitePress 同样也是基于 Vue 3，那么我们可以直接创建一个 Vue 组件 CommentItem.vue 后导入响应式的 Waline 组件
<template>
<Waline :serverURL="serverURL" :path="path" :dark="dark" />
</template>
<script setup>
import { Waline } from '@waline/client/component';
import { computed } from 'vue';
import { useRoute } from 'vitepress';
import '@waline/client/style';
const serverURL = 'https://waline.vercel.app';
const route = useRoute(); // 单独写
const path = computed(() => route.path);
const dark = 'html[class~="dark"]';
</script>
<style scoped>
[data-waline] {
--waline-theme-color: var(--vp-c-brand);
--waline-active-color: var(--vp-c-brand);
}
:deep(.wl-emoji-popup, .wl-gif-popup) {
z-index: 99;
}
</style>更多的自定义选项，可以通过 props 的方式向 Waline 组件传入，详情请见官方文档
为了让评论区能显示在文章的末尾，我们还需要使用 VitePress 预留的布局插槽将 CommentItem.vue 组件放置在 doc-after 中
<template>
<Layout>
<template #doc-after>
<CommentItem />
</template>
</Layout>
</template>
<script setup>
import DefaultTheme from 'vitepress/theme';
import CommentItem from './components/CommentItem.vue';
const { Layout } = DefaultTheme;
</script>最后在 index.js 中引入 ThemeLayout.vue
import DefaultTheme from 'vitepress/theme'
import ThemeLayout from './ThemeLayout.vue'
export default {
extends: DefaultTheme,
Layout: ThemeLayout
}最终效果
通过 CSS 变量还可以将 Waline 的整体配色修改为博客的主题色，融入的效果更好。
