💬 给 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 博客就有一个完整的评论系统了 🚀