astro-theme-pure主题部署 Waline 评论系统全流程指南 • Joye Personal Blog

前言#

这篇博客记录了我使用 Vercel + LeanCloud（Waline 官方推荐的方式）为 Astro 博客添加评论系统 Waline 的完整流程。除了涵盖基础搭建过程，我还整理了一些踩坑点，尤其适用于使用 astro-theme-pure 的用户，希望能帮到正在折腾博客评论功能的你。

☁️ 第 1 步：注册 LeanCloud#

前往 LeanCloud 控制台注册或登录账号：https://console.leancloud.app/login ↗ 完成注册后，进入 Settings > API Keys 页面，复制下列三个值，后续部署中将使用：

App ID
App Key
Master Key

first

second

⚙️ 第 2 步：在 Vercel 部署 Waline 服务端#

使用一键部署功能将 Waline 部署至 Vercel。点击以下链接进入部署界面： 👉 一键部署 Waline 仓库名可随意填写，然后点击 Create，等待部署完成。

third

🔧 第 3 步：配置环境变量#

部署完成后，进入 Vercel 仓库的 Settings > Environment Variables 页面，添加以下三个环境变量（对应 LeanCloud 提供的值）：

LEAN_ID
LEAN_KEY
LEAN_MASTER_KEY 保存后，Vercel 会在右下角提示你重新部署，点击确认即可使配置生效。

fourth

🌐 第 4 步（可选但推荐）：绑定自定义域名#

为了避免因为 DNS 污染而导致 Waline 报错（如 “not initialized”），建议绑定自己的域名。进入 Vercel 项目的 Settings > Domains 页面添加域名。如果你的域名 DNS 不在 Vercel，还需在你的域名服务商那里配置对应解析记录

🔑 第 5 步：初始化 Waline 管理后台#

fifth

在你的部署地址后添加 /ui 路径访问 Waline 后台，例如： https://www.yourdomain.com/ui ↗ 点击 Login > Register 注册新账号：

不要使用 GitHub 或其他第三方登录方式，否则无法成为管理员；
填写的域名必须是完整格式（如 https://yourdomain.com），不要省略 ↗ http/https。

🧩 第 6 步：配置 Astro 博客前端（以 astro-theme-pure 为例）#

打开你的博客项目中的 src/site.config.ts 文件，找到 Waline 配置部分，修改为以下格式：

// Comment system
waline: {
enable: true,
// Server service link
server: 'https://your-waline-url.com',  // 👈 将此处替换为你实际部署的 URL
// Refer https://waline.js.org/en/guide/features/emoji.html
emoji: ['bmoji', 'weibo'],
// Refer https://waline.js.org/en/reference/client/props.html
additionalConfigs: {
  // search: false,
  pageview: true,
  comment: true,
  locale: {
    reaction0: 'Like',
    placeholder: 'Welcome to comment. (Email to receive replies. Login is unnecessary)'
  },
  imageUploader: false
}
}

完成保存后，重新启动项目，前往博客文章页，即可看到 Waline 评论区成功加载。

✅ 第 7 步：测试部署成功#

此时你已经可以登录 Waline 后台进行评论管理。前往你的博客页面，刷新几次页面，应该能看到 views 计数开始增长，说明部署成功。结语到此，基于 astro-theme-pure 的 Waline 评论系统就完整部署完成啦！如果你遇到任何问题，欢迎留言讨论～我后续也会继续更新部署中的踩坑点。

结语#

到此，基于 astro-theme-pure 的 Waline 评论系统就完整部署完成啦！如果你遇到任何问题，欢迎留言讨论～我后续也会继续更新部署中的踩坑点。