网站邮箱服务

本文以腾讯企业邮作域名邮箱为例。

拥有域名邮箱

注册一个企业微信，企业微信完成企业创建后，可以申请域名邮箱：

解析设置

然后在阿里云云解析进行设置：（其他云服务商解析设置方法参考：如何确认域名的服务商以及各大域名商的域名设置方法-帮助中心-企业微信 (qq.com)）

邮箱设置好密码

拥有企业邮箱之后，登录邮箱设置好密码。可参考成员如何设置邮箱密码？腾讯企业邮箱帮助中心 (qq.com)

Waline 环境变量配置

设置好域名邮箱密码后，打开 Vercel 服务端项目，点击环境变量：

然后按照 Waline 官方文档的指导设置好服务端的环境变量：评论通知 | Waline，腾讯企业邮相关参数如下：

"QQex": {
    "aliases": ["QQ Enterprise"],
    "domains": ["exmail.qq.com"],
    "host": "smtp.exmail.qq.com",
    "port": 465,
    "secure": true
},

参考：Fluid -15- Waline 邮件通知 - 腾讯云开发者社区-腾讯云 (tencent.com)

信件模板

关于邮件内容的模板，即环境变量 MAIL_TEMPLATE_ADMIN 如何写，可自行搜索样例。

这里我参考了洪涝（张洪 Heo）的针对 Twikoo 评论系统的示例：Twikoo 评论回复邮件模板：Acrylic Mail 粉 | 张洪 Heo (zhheo.com)

效果

QQ 邮箱网页版：

QQ 邮箱手机（暗黑模式）：

改动

其实与 Waline 大差不差，只是有一些写法需要注意（适配 Waline 后改动的地方）：

把洪涝示例中变量的形式改成 Waline 中变量的形式，比如 ${NICK} 改为 {{self.nick}}
评论内容记得加上 safe，否则信件中显示的是 raw html 字符 ^[1]。如：{{self.comment|safe}}。
链接地址加上 https://，否则点不了。如 href="https://{{site.url}}"
Bug 修复：主框宽度调整。手机端、电脑端邮件显示正常。暗黑模式显示正常。

模板

以下代码可直接写入 Waline 项目里 Vercel 环境变量：

<div class="page flex-col">
    <div class="box_3 flex-col" style="
    display: flex;
    position: relative;
    width: 100%;
    height: 206px;
    background: #859cef2e;
    top: 0;
    left: 0;
    justify-content: center;
  "><div class="section_1 flex-col" style="
    background-image: url(https://cdn.gallery.uuanqin.top/img/qlogo.png);
    position: absolute;
    width: 152px;
    height: 152px;
    display: flex;
    top: 130px;
    background-size: cover;
  "></div></div>
    <div class="box_4 flex-col" style="
    margin-top: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
  ">
      <div class="text-group_5 flex-col justify-between" style="
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
  ">
        <span class="text_1" style="
    font-size: 26px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #000000;
    line-height: 37px;
    text-align: center;
  ">嘿！你有一条新的回复</span>
        <span class="text_2" style="
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #00000050;
    line-height: 22px;
    margin-top: 21px;
    text-align: center;
  ">你在&nbsp;{{site.name|safe}} 博客中留下的评论收到来自&nbsp;{{self.nick}}&nbsp;的回复</span>
      </div>
      <div class="box_2 flex-row" style="
    margin: 0 20px;
    min-height: 128px;
    background: #F7F7F7;
    border-radius: 12px;
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 16px;
    width: 95%;
  ">

        <div class="text-wrapper_4 flex-col justify-between" style="
    display: flex;
    flex-direction: column;
    margin-left: 30px;
    margin-bottom: 16px;
  ">
          <span class="text_3" style="
    height: 22px;
    font-size: 13px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #2a67ce;
    line-height: 22px;
  ">{{parent.nick|safe}}</span>
          <span class="text_4" style="
    margin-top: 6px;
    margin-right: 22px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 22px;
  ">{{parent.comment|safe}}</span>
        </div><hr style="
      display: flex;
      position: relative;
      border: 1px dashed #859cef2e;
      box-sizing: content-box;
      height: 0px;
      overflow: visible;
      width: 100%;
  "><div class="text-wrapper_4 flex-col justify-between" style="
    display: flex;
    flex-direction: column;
    margin-left: 30px;
  ">
  <hr>
          <span class="text_3" style="
    height: 22px;
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #2a67ce;
    line-height: 22px;
  ">{{self.nick|safe}}</span>
          <span class="text_4" style="
    margin-top: 6px;
    margin-right: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 22px;
  ">{{self.comment|safe}}</span>
        </div>

        <a class="text-wrapper_2 flex-col" style="
    min-width: 106px;
    height: 38px;
    background: #859cef2e;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin: auto;
    margin-top: 32px;
  " href="https://{{site.postUrl}}">
          <span class="text_5" style="
    color: #218adb;
  ">查看详情</span>
        </a>
      </div>
      <div class="text-group_6 flex-col justify-between" style="
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 34px;
  ">
        <span class="text_6" style="
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #00000045;
    line-height: 17px;
  ">此邮件由评论服务自动发出，直接回复无效。</span>
        <a class="text_7" style="
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #218adb;
    line-height: 17px;
    margin-top: 6px;
    text-decoration: none;
  " href="https://{{site.url}}">前往博客</a>
      </div>
    </div>
  </div>