💬 给 VuePress 添加评论系统:Waline 实战指南
很多人用 VuePress 2.0 搭建博客后,第一件事就是「加评论」。
 VuePress 官方并不自带评论系统,但通过插件我们可以无缝集成 Waline、Giscus 等服务。本文就带你一步步配置 Waline。
1️⃣ 为什么选 Waline
- 🔧 全功能:评论、表情、访问量统计\
- 🌍 可自建:部署在 Vercel、Cloudflare Workers、VPS\
- 🧩 VuePress 官方支持:配合 @vuepress/plugin-comment使用
相比早期的 Valine(已停止维护),Waline 是更好的继任者。
2️⃣ 部署 Waline 后端
- 打开 Waline Vercel 模板 一键部署\ 
- 绑定自定义域名,例如: - comments.61dh.com- 注意 DNS 需要配置成 CNAME 指向 Vercel 提供的专属地址,例如 - a87719c439880e48.vercel-dns-017.com
- 等待 Vercel 自动签发 HTTPS 证书,确保能访问: - https://comments.61dh.com/comment
3️⃣ 安装插件依赖
在你的 VuePress 项目根目录执行:
npm i -D @vuepress/plugin-comment @waline/client
4️⃣ 配置 VuePress 插件
.vuepress/config.ts
import { defineUserConfig } from 'vuepress'
import { commentPlugin } from '@vuepress/plugin-comment'
export default defineUserConfig({
  plugins: [
    commentPlugin({
      provider: 'Waline',                        // 评论服务提供者
      serverURL: 'https://comments.61dh.com',    // Waline 后端地址
      comment: true,   // 开启评论
      pageview: true,  // 开启访问量统计
    }),
  ],
})
5️⃣ 自定义 Layout 加入评论组件
默认主题不会自动插入评论框,需要你在自定义 Layout 里手动加。
.vuepress/layouts/Layout.vue
<template>
  <ParentLayout>
    <template #page-bottom>
      <!-- 页面底部注入评论框 -->
      <CommentService />
    </template>
  </ParentLayout>
</template>
<script setup>
import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
</script>
6️⃣ 在 client.ts 注册 Layout
关键一步 ------ 必须注册自定义 Layout,否则 VuePress 不会用你写的 Layout.vue。
.vuepress/client.ts
import { defineClientConfig } from 'vuepress/client'
import Layout from './layouts/Layout.vue'
export default defineClientConfig({
  layouts: { Layout },
})
7️⃣ 样式 & 字体优化(可选)
Waline 默认字体对中文友好,但英文比较丑,可以在 .vuepress/styles/index.scss 覆盖:
.waline {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
html.dark .waline {
  --waline-bgcolor: #1e1e1e;
  --waline-color: #ddd;
}
8️⃣ 常见问题
- HTTP 可以访问,但 HTTPS 不行? 
 → 确认 Vercel 域名已绑定,并且 DNS 配置指向 Vercel 提供的专属 CNAME。等待 SSL 签发成功。
- 评论框不显示? - 检查 .vuepress/client.ts是否正确注册 Layout\
- 检查 Markdown 页面 frontmatter 是否有 comment: false\
- 确认浏览器请求了 https://comments.61dh.com/comment
 
- 检查 
- 首页看不到评论? 
 默认主题首页(- home: true)不渲染- page-bottom插槽,评论只在普通文章页显示。
✅ 总结
- 在 Vercel 部署 Waline Server,绑定 https://comments.你的域名\
- VuePress 里安装 @vuepress/plugin-comment\
- 在 config.ts配置provider: "Waline"和serverURL\
- 在 Layout.vue用<CommentService />注入\
- 在 client.ts注册 Layout
这样,你的 VuePress 博客就有一个完整的评论系统了 🚀
