号外！这是无尽敲打系列的第一篇文章！这里是我的折腾合集。slug 用
articles/tinkering/。
没有买专业域名邮箱服务的钱，但是发现 Resend 可以自定义发件邮箱，所以简单做个记录，说说用在 Waline 设置评论回复通知的操作。
市面常见的免费邮箱虽然已经够用，但是当需要给自己的服务做收发邮件时，有一个自己域名的邮箱会美观很多。比如我的域名是 karlbaey.top，我希望我的读者收到评论回复通知时，是来自于 notifications at karlbaey dot top 这个邮箱，就需要自己折腾折腾 Resend 和 Cloudflare。不会太难，设置几个 DNS 记录的事。
要是自购 VPS 而且开了一大堆端口1而且你前一任租客是个纯良公民拿了 VPS 什么都不干就当我什么都没说，自己拉个 docker 开邮局就行，反正我没有这个折腾的闲心。一个推荐的方案是 Mailu。
叫 Cloudflare 给你自动转发邮件
这至少需要你购买一个域名。免费域名也行，但是要能放在 Cloudflare 上。
在这个页面，就能看到接入域名的提示。
转发到 Gmail 是可选的，转发到 QQ 邮箱也行，因为我们不依赖 Cloudflare 发邮件。然后设置 Cloudflare 的邮箱白名单。
这样其实就好了。但是为了防止 Cloudflare 乱发邮件，还得给特定的邮箱设置转发到 Gmail。比如我的邮箱是 hi at karlbaey dot top（记作邮箱 A），就设置一个。
这样就可以了。下面就是 Resend 那一边的事。
用 Resend 自定义发件邮箱
目前的自定义发件域名服务只有 Resend 一家是免费且额度充足的2，免费版每天可以发 100 封邮件，这儿有官网。跟 Resend 比起来，QQ 邮箱不能绑自定义域名；Gmail 会显示由你的 Gmail 邮箱代发，泄露风险大；Outlook 则是逼着用户开 Microsoft 365。综合考量，Resend 是最佳的选择。
嫌弃发信额度少，就考虑日后换成 Larksuite 也可以，那个一天可以发 450 封邮件，非常慷慨。
先注册一个 Resend，这个很简单，你甚至可以用你的域名邮箱注册。反正上面已经配置好了 Cloudflare 的 catch-all 规则，Resend 的验证邮件会飞到 Gmail 邮箱里边。
注册成功之后就能进入 Dashboard。选择侧栏的 Domains。
如果你照着上面 Cloudflare 配置域名邮件转发的话，下面应该会自动跳出来一个小黄云跟“Auto configure”，点那个就行。一共是 1 条 MX 记录和 3 条 TXT 记录。
在创建新 API Key 里边写给 Waline 的 Key，Name 随意填。然后你就能看见只显示一次的 Key，把它复制好，下面给 Waline 用。
这样就好了。我用的是 notifications at karlbaey dot top 来发件。
Waline 配置邮件传递
少来了，真以为有人会发评论啊。
Waline 的文档里已经写好了怎么配置评论通知的环境变量。我是把 Waline 部署在 Vercel 上的，跳到环境变量（Environment Variables）页面添加就行。下面是一个参考的表格。
| 变量名 | 示例值 | 说明 |
|---|---|---|
SMTP_SERVICE |
Resend |
固定填 Resend |
SMTP_USER |
resend |
固定填 resend |
SMTP_PASS |
re_123456789... |
你的 Resend API Key |
SMTP_SECURE |
true |
Resend 推荐 |
SENDER_NAME |
你的博客名称 |
邮件显示的发送者名称 |
SENDER_EMAIL |
[email protected] |
你用来发信的邮箱 |
AUTHOR_EMAIL |
[email protected] |
接收通知的管理员邮箱 |
这样就配置完了。要是你愿意继续折腾可以往下看。
Waline 的邮件模板
我基于 Waline 给的东西自己魔改了一番，由于它用的是 Nunjunks 模板（不是我熟悉的 Hugo 模板🙁），所以可以插入一些条件语法。
⚠️重要！每一个环境变量都需要压缩成一行之后输入 Vercel。HTML 找个地方压缩就行，压缩后不影响解析。
先是两个邮件标题模板。
# 访客收到博主的回复时，邮件的标题
MAIL_SUBJECT="您在 【{{site.name}}】 的评论收到了 {{self.nick}} 的回复"
# 博主收到新评论（或新回复）时，邮件的标题
MAIL_SUBJECT_ADMIN="【{{site.name}}】新评论：{{self.nick}} 的留言"然后是给访客评论用的 MAIL_TEMPLATE。
<div style="max-width:600px;margin:0 auto;font-family:Arial,sans-serif;background:#f6f8fa;padding:20px">
<h2 style="color:#24292e">{{site.name}}</h2>
<p>您在 <a href="{{site.postUrl}}" style="color:#0366d6">【{{site.name}}】</a> 的评论：</p>
<blockquote style="background:#fff;padding:12px;border-left:4px solid #d1d5da;margin:12px 0;white-space:pre-wrap">{{parent.comment | safe}}</blockquote>
<p><strong>{{self.nick}}</strong> 回复了您：</p>
<blockquote style="background:#fff;padding:12px;border-left:4px solid #2ea44f;margin:12px 0;white-space:pre-wrap">{{self.comment | safe}}</blockquote>
<a href="{{site.postUrl}}" style="display:inline-block;padding:8px 16px;background:#0366d6;color:#fff;text-decoration:none;border-radius:6px;margin-top:8px">点击查看详情</a>
<p style="color:#586069;font-size:12px;margin-top:24px">此邮件由系统自动发送，请勿直接回复。</p>
</div>还有最后给博主的通知模板 MAIL_TEMPLATE_ADMIN。
<div style="max-width:600px;margin:0 auto;font-family:Arial,sans-serif;background:#f6f8fa;padding:20px">
<h2 style="color:#4169E1">🔔 新评论通知</h2>
<p><strong>评论者：</strong>{{self.nick}}</p>
<p><strong>来源：</strong>{{self.os}} · {{self.browser}}
{% if parent %}
<div style="background:#fff3cd;padding:8px 12px;margin:12px 0;border-left:4px solid #f0ad4e">
<p style="margin:0"><strong>回复给：</strong>{{parent.nick}}</p>
<blockquote style="margin:8px 0 0;white-space:pre-wrap;color:#586069">{{parent.comment | safe}}</blockquote>
</div>
{% endif %}
<blockquote style="background:#fff;padding:12px;border-left:4px solid #0366d6;margin:12px 0;white-space:pre-wrap">{{self.comment | safe}}</blockquote>
<a href="{{site.postUrl}}" style="display:inline-block;padding:8px 16px;background:#2ea44f;color:#fff;text-decoration:none;border-radius:6px">查看评论</a>
<p style="color:#586069;font-size:12px;margin-top:16px">系统自动发送，来自 {{self.os}} · {{self.browser}}</p>
</div>效果图大概是下面这样。我把评论通知推到 QQ 邮箱，没有测试过其他家的样子。配色乱搞的，好奇我怎么配色的参考这里。
反正我是看过各种各样花里胡哨的评论提醒，有信封式的、有黑黑绿绿黑客式的，甚至还有一点 CSS 都不会写、把整个版面搞得乱七八糟的。我这个重在简单明了，不考虑那么多七七八八的了，关于我的哲学，感兴趣的看漫漫长路去（发稿时只有一篇文😅）。
See Also
- 【Cloudflare Docs】Enable Email Routing（英文）←本文基于 Cloudflare 的邮件路由文档写成。
评论