邮件订阅系统：RSS + follow.it 零成本方案

为静态站点添加邮件订阅能力，无需后端、数据库、邮件服务器

动机

Wilson's Knowledge Base 是一个基于 Quartz v4 的静态站点，托管在 Vercel。需要让读者可以通过邮箱接收新文章通知，同时保持：

架构总览

⛶ 全屏

整个系统分为三个管道：

管道触发方式说明
构建管道npx quartz buildMarkdown → HTML + RSS，部署到 Vercel
订阅管道用户主动操作表单 POST / CTA 链接 → follow.it 注册
推送管道follow.it 定时检测 RSS 更新 → 邮件群发

组件说明

1. RSS Feed（index.xml）

Quartz 的 ContentIndex 插件在构建时生成 RSS，包含完整 HTML 正文：

Plugin.ContentIndex({
  enableRSS: true,
  rssLimit: 50,
  rssFullHtml: true,
})

2. NewsletterFooter 组件

所有页面 footer 上方的紧凑 inline 表单，POST 到 follow.it API 即时订阅。

3. RSS 内容清洗 ★

默认 RSS 输出包含 Quartz 锚点 SVG（<a role="anchor">），邮件客户端无法渲染。通过正则剥除：

const cleanHtml = (html) =>
  html?.replace(/<a\s+role="anchor"[^>]*>.*?<\/a>/g, "")

注意：cleanHtml() 必须在 escapeHTML() 之前调用。第一次实现（fc0079c）把清洗放在了已编码的文本上，导致正则匹配不到，锚点 SVG 原样漏出到邮件。修复见 RSS 管线文档。

follow.it 后台配置

  1. 认领 Feed：RSS URL → follow.it 后台验证 → 站点 <meta> 标签
  2. 邮件模板：自动将 RSS HTML 渲染为邮件，支持自定义发送时间/格式
  3. 订阅者管理：查看邮箱列表、打开率、退订管理

订阅流程图


用户浏览站点
    │
    └── NewsletterFooter 表单 → 填邮箱 → POST follow.it API
                                          │
                                          ▼
                                  follow.it 订阅列表
                                          │
站长发布新文章                              │
    │                                     │
    ▼                                     │
Quartz build → RSS 更新 → follow.it 检测 ─┘
                                │
                                ▼
                         邮件群发给所有订阅者

关键决策记录

决策选择原因
邮件服务follow.it免费、支持 RSS 触发、自带订阅管理
订阅形式inline 表单简洁、无侵入、符合站点定位
RSS HTML 清洗正则剥除锚点 SVG最小改动、不影响站点渲染
域名验证meta 标签比上传文件更易维护
明暗主题CSS 变量自适应follow.it 表单透明背景继承站点主题

构建管道

  • • Markdown → Quartz build → 静态 HTML
  • • 同时生成 RSS (rssFullHtml: true)
  • • 正则剥除 SVG 锚点标签
  • • 部署至 Vercel 香港节点

订阅入口

  • • 唯一入口：NewsletterFooter
  • • 紧凑 inline 表单，直接 POST
  • • 所有页面 footer 上方显示
  • • 零页面跳转，即时完成

邮件管道

  • • follow.it 定时抓取 RSS
  • • 检测新文章 → 触发群发
  • • 订阅/退订由 follow.it 管
  • • 站长可查看全部数据

Wilson's Knowledge Base · 邮件订阅方案 · 最后更新 ...