🗨️ Dream 主题 + Waline 评论：多站点完整 URL 配置（最简方案）

只需 3 步，即可实现支持多站点的完整链接评论功能。

✅ 第一步：hugo.toml 基础配置

确保以下配置正确（注意去除末尾空格）：

# ===== 基础设置 =====
baseURL = "https://your-site.pages.dev/"  # ⚠️ 必须有结尾斜杠 /

# ===== Waline 配置 =====
[params]
  waline = true
  walineServer = "https://your-waline.vercel.app/"  # ⚠️ 不要有空格，必须有结尾斜杠

🔍 检查项：

• baseURL 和 walineServer 末尾必须有 /
• 引号内不能有空格（如 "https://.../ " ❌）

✅ 第二步：创建自定义 waline.html（核心）

创建文件：layouts/partials/waline.html

{{ if and .Site.Params.waline .Site.Params.walineServer }}
<div id="waline" class="waline-container mt-8"></div>

<script type="module">
  import { init } from 'https://cdn.jsdelivr.net/npm/@waline/client@3/dist/waline.js';

  init({
    el: '#waline',
    serverURL: '{{ .Site.Params.walineServer }}',
    dark: 'html.dark',
    
    // 🔑 关键：使用完整链接，支持多站点
    path: '{{ .Permalink }}',
    // 或更显式写法：
    // url: '{{ .Permalink }}',
    
    // 可选：语言设置
    lang: 'zh-CN',
    
    // 可选：访客信息（默认开启）
    comment: true,
    
    // 可选：禁用表情/图片上传等（按需开启）
    // emoji: [],
    // imageUploader: false,
  });
</script>

<style>
  /* 可选：简单样式优化 */
  .waline-container {
    max-width: 100%;
    padding: 0 0.5rem;
  }
  /* 深色模式适配 */
  html.dark .wl-panel {
    background: var(--b2, #1f2937);
  }
</style>
{{ end }}

💡 核心原理：

• {{ .Permalink }} 会自动生成 完整绝对链接（如 https://your-site.pages.dev/posts/my-article/）
• Waline 通过这个 path/url 唯一标识每篇文章，实现多站点隔离

✅ 第三步：确保主题调用该部分

Dream 主题默认会在文章页自动加载 partials/waline.html，但建议验证：

检查 layouts/_default/single.html（或主题默认文件）

确保文章底部有类似调用：

{{ if or .Site.Params.waline .Params.waline }}
  {{ partial "waline.html" . }}
{{ end }}

✅ 如果主题已内置此逻辑（Dream v3.x 默认支持），则无需修改，只需创建 layouts/partials/waline.html 即可覆盖默认行为。

🧪 验证配置是否生效

1️⃣ 本地预览

hugo server -D

访问任意文章页，检查：

• 页面底部是否显示评论框
• 浏览器开发者工具 → Network 标签，是否有请求 https://your-waline.vercel.app/comment?type=count&path=...
• path 参数是否为完整 URL（如 https://your-site.pages.dev/posts/xxx/）

2️⃣ 多站点测试（关键）

假设你有两个站点：

• 站点 A: https://blog-a.pages.dev/posts/test/
• 站点 B: https://blog-b.pages.dev/posts/test/

✅ 预期效果：

• 两个站点的同一篇文章路径（/posts/test/）评论数据隔离
• 因为 Waline 收到的是完整 path，会自动区分

⚠️ 常见问题排查

🎁 可选增强配置（按需添加）

在 init() 中添加以下参数：

init({
  // ... 基础配置
  
  // 👤 登录方式（推荐开启）
  login: 'force',  // 'enable' | 'disable' | 'force'
  
  // 📧 邮件通知（需服务端配置）
  notify: true,
  
  // 🔔 评论者收到回复时邮件通知
  recaptchaV3Key: '',  // Google reCAPTCHA v3（防刷）
  
  // 🎨 自定义表情（使用 CDN）
  emoji: [
    'https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo',
    'https://cdn.jsdelivr.net/gh/walinejs/emojis/bmoji',
  ],
  
  // 📝 评论字数限制
  wordLimit: 1000,
  
  // 🌐 多语言（自动检测）
  locale: {
    'zh-CN': {
      placeholder: '欢迎评论～（支持 Markdown）',
    }
  }
})

📋 最终文件结构检查

my-dream-blog/
├── hugo.toml                          # ✅ 包含 baseURL + waline 配置
├── layouts/
│   └── partials/
│       └── waline.html               # ✅ 自定义评论组件（含 .Permalink）
├── static/
│   └── css/
│       └── custom.css                # （可选）额外样式
└── content/posts/
    └── your-article.md               # ✅ draft: false

🔗 参考链接

• Dream 主题 Waline 文档：https://hugo-theme-dream.g1en.site/params-configurations#waline
• 官方示例代码：https://github.com/g1eny0ung/blog/blob/master/layouts/partials/waline.html
• Waline 客户端文档：https://waline.js.org/guide/client/props.html

✅ 完成以上配置后，你的博客将具备：

• 🌐 多站点评论数据隔离（通过完整 URL）
• 🌓 自动深色模式适配
• 📱 响应式评论框
• 🚀 零后端配置（复用公共 Waline 服务）

💡 提示：如果后续更换评论服务（如 Twikoo），只需删除 layouts/partials/waline.html 并修改 hugo.toml 即可，不影响其他功能。