在 VuePress 博客中快速集成 Waline 评论系统在 VuePress 博客中集成 Waline 评论系统，只

体验地址：chengmaomaoblog.vercel.app

一、准备工作

在开始之前，请先确认以下几项：

你已有一个基于 VuePress 构建的博客项目。
在博客中希望使用评论系统（即在每篇文章或页面底部插入评论组件）。
需要后端服务支持 Waline，因为 Waline 是“有后端”的评论系统。(VuePress Ecosystem)
如果你在国内使用（中国大陆），注意：若使用国内版的 LeanCloud（如 leancloud.cn），可能需要额外备案／绑定域名／独立 IP 等。(VuePress Ecosystem)

二、后端部署（以 LeanCloud + Vercel 为例）

下面以官方文档说明的流程为基础，做一步步说明。

1. 在 LeanCloud 创建应用

登录或注册 LeanCloud 国际版控制台。(VuePress Ecosystem)
点击 “创建应用”，选择免费的开发版。(VuePress Ecosystem)
在应用 “设置 → 应用 Key” 中记录下：APP ID、APP Key 和 Master Key。(VuePress Ecosystem)
如果你使用的是国内版（leancloud.cn） ：
- 你还需要为应用「绑定已备案域名」。(VuePress Ecosystem)
- 在 “设置 → 域名绑定 → API 访问域名” 中添加域名，DNS 做 CNAME 解析。(VuePress Ecosystem)
- 可能还需购买独立 IP 并提交备案工单。(VuePress Ecosystem)

2. 部署 Waline 服务端（使用 Vercel 示例）

在 Vercel 上从 Waline 模板创建一个新项目。(VuePress Ecosystem)
在项目的 “Settings → Environment Variables” 中设置环境变量：
```
LEAN_ID = <你的 APP ID>
LEAN_KEY = <你的 APP Key>
LEAN_MASTER_KEY = <你的 Master Key>
```
如果你仍使用国内版，需要额外设置 LEAN_SERVER，为你绑定好的域名。(VuePress Ecosystem)
设置完毕后，回到 “Deployments” 点击 “Redeploy” 重新部署，以使以上环境变量生效。(VuePress Ecosystem)
部署成功后，你将获得一个服务端地址（如 chengmaomaoblog.vercel.app）。

3. （可选）绑定自定义域名

在 Vercel 的 “Settings → Domains” 中添加你想绑定的域名。(VuePress Ecosystem)
在 DNS 提供商处为你的域名添加 CNAME 解析，指向 Vercel 提供的域名。(VuePress Ecosystem)
生效后，你即可通过自己的域名访问评论系统：例如 https://comments.your-domain.com。

三、客户端（VuePress 博客）集成

有了后端服务后，接下来在你的 VuePress 博客中集成 Waline 评论。

1. 安装 Waline 客户端

在你的博客项目根目录，执行：

npm install -D @waline/client

（或者用 yarn）(VuePress Ecosystem)

2. 在 VuePress 配置插件（假设你使用的是博客插件）

在你的 config.js 或 .vuepress/config.js 中（视你项目结构而定），引入博客插件并加入 Waline 配置。例如（伪代码）：

module.exports = {
  // ... 其他配置
  plugins: [
    [
      '@vuepress/plugin-blog',
      {
        // …博客插件的其它设置...
        comment: {
          provider: 'Waline',
          serverURL: 'https://your-waline-service.vercel.app',
          // 你还可以加入 Waline 支持的其他选项
        }
      }
    ],
    // …其他插件
  ]
}

其中：

provider: 'Waline' 表明使用 Waline 评论系统。(VuePress Ecosystem)
serverURL 设置为你部署好的服务端地址。
如果你需要更多 Waline 客户端支持的选项（例如 placeholder、lang、emoji、locale 等），可在 …其他选项 中配置。(VuePress Ecosystem)

3. 在页面中插入评论组件

在你博客文章模板或页面底部，插入 <CommentService />（或对应组件名，视你的博客主题/插件文档而定）。例如在 Markdown 文件末尾：

---
comments: true
---

本文内容…

<template>
  <CommentService />
</template>

或者根据你主题的推荐方式调用。只要在页面合适位置渲染了评论组件，用户就能看到评论区域。(VuePress Ecosystem)

四、评论管理

部署和客户端集成完成后，你还需要知道如何进行评论管理。

首次访问 https://<你的‑serverURL>/ui/register 注册账号，首个注册用户将被设为管理员。(VuePress Ecosystem)
管理员登录后，可以在管理后台查看、标记、删除评论。(VuePress Ecosystem)
用户也可通过评论框注册账号，登录后可跳转到自己的档案页。(VuePress Ecosystem)

五、常见配置项 & 小 Tips

下面是一些你可能会用到或希望定制的设置，同时给出一些建议。

常见配置项

以下是 Waline 客户端可能提供的常见选项（具体可查官方文档）：

serverURL：服务端地址。
locale / lang：语言设置。
avatar：头像设置方式。
emoji：是否启用 emoji 表情。
requiredFields：必填字段（如昵称、电子邮件等）。
placeholder：输入框的提示文字。
pageSize：每页显示多少条评论。
meta：额外元数据（如文章标题、URL）传递给服务端。

小 Tips

若部署在国内，要注意网络访问稳定性，LeanCloud 国内版可能会有备案/域名限制。
如果博客已经有用户登录系统，建议传递用户标识给 Waline，以便统一用户体系。
注意评论组件对页面唯一标识（比如文章 URL 或 ID）的依赖，确保每篇文章有唯一标识，以避免评论串线。
若使用 CDN 加速或自定义域名，确保 CORS / HTTPS 正确设置。
定期检查后台评论，避免垃圾评论或恶意内容。
如果博客是静态部署（如 GitHub Pages），配合 Vercel + LeanCloud 仍然适用，因为评论系统是独立服务。

六、示例完整流程（总结版）

登录 LeanCloud → 创建应用 → 记录 APP ID/Key/Master Key。
在 Vercel 或其他支持的服务上部署 Waline 服务端，设置环境变量 → 部署 → 获取 serverURL。
在 VuePress 博客项目中安装 @waline/client。
在 .vuepress/config.js 中配置博客插件的 comment 选项，使用 provider: ‘Waline’ + serverURL。
在文章页面底部插入 <CommentService />。
访问 <serverURL>/ui/register 注册管理员 → 管理后台管理评论。
运营中定期检查、维护、配置。

原文：

Waline

一个有后端的安全评论系统。

安装

npm i -D @waline/client

LeanCloud 设置 (数据库)

登录或注册 LeanCloud 国际版 并进入控制台
点击左上角创建应用并起一个你喜欢的名字 (请选择免费的开发版):

创建应用
进入应用，选择左下角的 设置 > 应用 Key。你可以看到你的 APP ID,APP Key 和 Master Key。请记录它们，以便后续使用。

ID 和 Key

国内版需要完成备案接入

如果你正在使用 Leancloud 国内版 (leancloud.cn)，我们推荐你切换到国际版 (leancloud.app)。否则，你需要为应用额外绑定已备案的域名，同时购买独立 IP 并完成备案接入:

登录国内版并进入需要使用的应用
选择 设置 > 域名绑定 > API 访问域名 > 绑定新域名 > 输入域名 > 确定。
按照页面上的提示按要求在 DNS 上完成 CNAME 解析。
购买独立 IP 并提交工单完成备案接入。(独立 IP 目前价格为￥ 50/个/月)

域名设置

Vercel 部署 (服务端)

Vercel

点击上方按钮，跳转至 Vercel 进行 Server 端部署。

提示

如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。
输入一个你喜欢的 Vercel 项目名称并点击 Create 继续:

创建项目
此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。

deploy

一两分钟后，满屏的烟花会庆祝你部署成功。此时点击 Go to Dashboard 可以跳转到应用的控制台。

deploy
点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。

设置环境变量

提示

如果你使用 LeanCloud 国内版，请额外配置 LEAN_SERVER 环境变量，值为你绑定好的域名。
环境变量配置完成之后点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。

redeploy
此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。

redeploy success

绑定域名 (可选)

点击顶部的 Settings - Domains 进入域名配置页
输入需要绑定的域名并点击 Add

Add domain
在域名服务器商处添加新的 CNAME 解析记录

Type Name Value
CNAME example cname.vercel-dns.com
等待生效，你可以通过自己的域名来访问了🎉
- 评论系统：example.your-domain.com
- 评论管理：example.your-domain.com/ui
success

Type	Name	Value
CNAME	example	cname.vercel-dns.com

客户端

使用插件

在插件选项中设置 provider: "Waline"，同时设置服务端地址 serverURL 为上一步获取到的值。

此时，将 <CommentService> 组件放置在你网站中合适的位置 (通常是页面的底部)，即可使用 Waline 评论功能。

提示

你也可以传入其他 Waline 支持的选项 (除了 el)。详情请见 Waline 配置

评论管理 (管理端)

部署完成后，请访问 <serverURL>/ui/register 进行注册。首个注册的人会被设定成管理员。
管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。