这次邮件模板调试流水账，模板，故事分享给大家，我提升自己。

LEO LENG2025-07-022025-07-02

邮件模板调试记录：折腾了两天，真心累流水账，别太认真哈。

我承认是我低估了这个事，本来都没想发文章。默认的模板用的时间也挺久了，就想自己做个评论回复通知邮件模板，真以为是件挺简单的事儿，本来不应该折腾成这样。说到底就是发封邮件，带点背景图，排排版，不就那么回事嘛？结果没想到，搞了这么久，整得跟攻坚战似的。

直到现在我也在想，画图的来玩代码真是隔行如隔山，经验的缺失导致我走了不少弯路，也让我对自己的能力有了更深刻的认识，多学多了解永远也不会错。

不说别的，先给大家看看做了个什么样。

PC端通知邮件模板

PC端博主留言通知邮件模板

手机端，这是163邮箱的效果

能力不足，水平有限，真的只是一个简单的模板。就这东西第一版很快写完了，我都不信到最后竟然占用了我这么多时间，主要是死在了调试上，嘛，也支持手机端显示。代码放在最后，有需要的大家可以自取，怎么使用可以看张洪大佬的教程，我就不详细说了。

1.折腾的开始。

首先还是要感谢张洪大佬，就是因为看到了张洪大佬的模板，我才决定要自己写一个，因为默认模板确实太阳春了，张洪大佬原教程的模板已经很好看了，但是粗略的瞅了一眼觉得蛮简单的，抱着我上我也行的心态，就自己写了一个。
一开始上来就写，根本没意识到邮件模板跟网页不一样。想着写网页的那套CSS写法，直接套进去就能用了，结果效果一出来，人傻了，不应该啊。QQ邮箱那边背景图没了，OUTLOOK更是群龙乱舞，文字颜色也不对，按钮布局也乱七八糟，完全不是我想要的样子。但是我在本地测试都是正常的，163邮箱发件箱看上去稍微正常点，我意识到问题不简单。
我还一度怀疑自己写代码写错了，来回改了N版代码，发到邮箱看效果，反复对比、查资料、试着用各种写法。唉，真是让我折腾得够呛。说实话，我就跑去QQ邮箱和Outlook邮箱反复发了不下十几二十封邮件，死活显示不对劲。

看乐了。

这里真的要感谢柳哥，一句话就点醒我（没醒），不但这次，以前也帮助了我很多，他人真的超级好，赶紧去他的首页和他交朋友：清羽飞扬

傻小子还搁那边写js呢，让人笑话，一语点破梦中人，醒了吗如醒。

这过程中，想说就这模样凑合着发吧。但又不甘心，就这么个玩意到底真有这么难吗？

2. 我真是见鬼了。

到这里，我已经不在乎什么模板不模板的了，我写的代码我逐行检查过了，应该是没问题的，我现在纠结的点是到底为什么各家显示的效果不一样呢？163几乎完美，QQ和OUTLOOK都不行。但是不行的点还不太一样一份邮件发到三家邮箱三个效果都不一样，我真是见鬼了。对于代码的不自信和这方面的小白的我来说，让我想到了那句话，只要学习差，生活处处是魔法，我也是见着魔法了。

这是第一版，本地实验非常完美我还想当然的还加了日夜切换

OUTLOOK显示一坨样式乱Font Awesome 外链图标根本不显示

改来改去，我也不知道到底哪里出了问题。我真的是很想放弃了，我真是没办法了，我只能求助与CHATGPT，让他帮我看看问题出在哪里。
人工智能比我这个人工智障强太多了，说了一个我从来没想过的点，邮件模板写法跟网页不一样，很多新式CSS根本不兼容邮件客户端，我作为一个0经验的爱好者，我完全完全不知道邮件还有兼容性这回事。

谢谢你我的朋友

3. 后面疯狂测试，折腾了不知道多少次。

到现在，我至少知道了原因。我把模板里用到的 CSS 都改了好几遍，特别是背景图的写法。邮件模板里不能用普通网页那套写法，很多邮箱都只支持传统 table 结构和行内样式。

听了AI的话用了 table background=”…” 这种老式写法，确实 QQ 邮箱开始能显示背景图了。163 邮箱、Outlook 等主流邮箱也没问题。这个才算是个关键突破。

但背景图显示没问题，布局又出问题了，比如文字左对齐没到位，按钮和内容框没对齐，头像框被背景图框住，这些细节又得调整，总的来说，事情开始慢慢好起来了。

其实整个页面结构没变，就是把容器包到 table 里，保证背景色用 bgcolor=”#000000” 预设纯黑背景，防止邮箱不支持背景图时显示空白。然后背景图写在 table background=”…” 里，再用 style 里的 background-position、background-size 等保证美观。

刚开始改完觉得差不多了，发到 QQ 邮箱测试又改布局、测试又测试。发现不同邮箱表现差异巨大，某些效果根本没法统一。为了兼容还去掉了一些东西，改成黑色半透明遮罩，文字颜色恢复默认。

现在回头想想，其实事情没那么复杂，各大邮箱对 CSS 的支持参差不齐，导致我不停折腾。尤其是 QQ 邮箱对背景图和透明度支持很有限，163 邮箱倒是听话，那逆天的Outlook 也是不支持现代 CSS，现阶段，想让所有主流邮箱都正常显示，我估计是得用最传统、最保守的写法：表格布局、内联样式、老式属性。

为了不打自己的脸，我话也不说这么满了，毕竟不是我自己的领域，可能有更好的解法，我也不知道。毕竟这思路都是AI给我的。

说说我的感受

目前的方案是：

用 table 包裹整体，写 background=”…” 传统写法显示背景图；

设纯黑底作为兜底，兼容不支持背景图的邮箱；

文字颜色用安全色，避免因深浅不一致导致阅读困难；

布局靠表格和内联样式调整，保证按钮和内容左对齐，头像不被边框框住。

这样一来，至少主流邮箱表现算稳定，QQ 邮箱背景图能显示，文字颜色正常，布局不乱。

折腾了这么多次，心态是复杂的：一方面，这么简单的背景图和透明度，理论上不该这么折腾。另一方面，如果真的只有这种解法那邮箱环境实在不友好，很多东西都得退回“老传统”才能保证稳定。说白了，看来做邮件模板根本不是网页开发，是另一门艺术。我自己之前完全没意识到这些兼容坑，甚至以为邮箱能支持 JS，真是joker了。实话说现在的成品实际不如第一版我也不打算搞了就这样其实也挺好，我也不想再折腾了。

最后

代码放在这里头像和背景图都能更换我加了注释，代码很简单，可以根据你的要求自定义。

通知邮件模板代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>评论回复通知</title>
</head>
<body style="margin:0; padding:0;">
  <!-- 整体背景 -->
  <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
    background="https://bu.dusays.com/2025/07/01/68639483be5c9.png"
    style="background-repeat:no-repeat; background-size:cover; background-position:center; padding:20px; font-family:'Segoe UI', 'PingFang SC', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif; background-color:#000000;">
    <tr>
      <td align="center" valign="top">

        <!-- 头像独立一行 -->
        <table width="640" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:20px;">
          <tr>
            <td align="center">
              <!-- 自定义头像，换url -->
              <div style="width:150px; height:150px; border-radius:50%; background-image:url('https://bu.dusays.com/2025/05/30/6838a5699eec2.png'); background-size:cover; background-position:center; border:4px solid #ffffff; box-shadow:0 10px 30px rgba(0,0,0,0.15);"></div>
            </td>
          </tr>
        </table>

        <!-- 主内容框 -->
        <table width="640" cellpadding="0" cellspacing="0" border="0"
          style="background-color:#000000CC; border-radius:16px; padding:30px; border:1px solid #FFFFFF33;">
          <tr>
            <td>
              <!-- 标题 -->
              <h1 style="text-align:center; font-size:26px; font-weight:700; color:#FF6991; margin:0 0 15px;">嘿！你在 ${SITE_NAME} 博客中收到一条新回复。</h1>
              <!-- 副标题 -->
              <p style="text-align:center; font-size:16px; color:#cccccc; margin:0 0 35px;">你之前的评论在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</p>
              <!-- 评论区 -->
              <table width="100%" cellpadding="0" cellspacing="0" border="0"
                style="background-color:#000000B3; border-radius:12px; border:1px solid #FFFFFF33; padding:25px 20px;">
                <tr>
                  <td style="padding:15px; background-color:#00000080; border-radius:8px;">
                    <div style="font-weight:bold; color:#FF6991; font-size:18px; margin-bottom:8px;">👤 ${PARENT_NICK}</div>
                    <div style="font-size:16px; color:#f0f0f0; line-height:1.5;">${PARENT_COMMENT}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div style="height:1px; background:linear-gradient(to right, transparent, #FF6991, transparent); margin:10px 0;"></div>
                  </td>
                </tr>
                <tr>
                  <td style="padding:15px; background-color:#00000080; border-radius:8px;">
                    <div style="font-weight:bold; color:#FF6991; font-size:18px; margin-bottom:8px;">💬 ${NICK}</div>
                    <div style="font-size:16px; color:#f0f0f0; line-height:1.5;">${COMMENT}</div>
                  </td>
                </tr>
              </table>
              <!-- 按钮 -->
              <div style="text-align:left; margin-top:35px;">
                <a href="${POST_URL}" style="display:inline-block; background:#FF699138; color:#FF6991; padding:12px 40px; border-radius:50px; text-decoration:none; font-weight:600; border:1px solid #FF6991;">🔗 查看详情</a>
              </div>
            </td>
          </tr>
        </table>

        <!-- 页脚独立一行 -->
        <table width="640" cellpadding="0" cellspacing="0" border="0" style="margin-top:20px;">
          <tr>
            <td style="text-align:center; font-size:14px; color:#888888;">
              此邮件由评论服务自动发出，直接回复无效。<br />
              <a href="https://leoblog.cc" style="color:#FF6991; text-decoration:none; font-weight:600;">前往博客</a>
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>
</body>
</html>

博主通知邮件模板代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>LEO,你收到了 ${NICK} 的新回复</title>
  <style>
    /* 简单重置，避免外部影响 */
    body,html { margin:0; padding:0; }
  </style>
</head>
<body style="margin:0; padding:20px; font-family:'Segoe UI','PingFang SC',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif; background-color:#000000;">
  <table
    width="100%"
    cellpadding="0"
    cellspacing="0"
    bgcolor="#000000"
    background="https://bu.dusays.com/2025/07/01/68639483be5c9.png" /*背景图地址 这里修改邮件背景图 */
    style="background: url('https://bu.dusays.com/2025/07/01/68639483be5c9.png') no-repeat center center / cover; background-color: #000000; min-height: 100vh;"
  >
    <tr>
      <td align="center" valign="top" style="padding: 20px;">
        <div style="max-width:640px; margin:0 auto; background:rgba(0,0,0,0.6); border-radius:16px; padding:50px 30px 30px; border:1px solid #2b2b2b; color:#e0e0e0;">
          
          <!-- 头像部分，修改这里的 background-image url 即可更换头像 -->
          <div style="height:120px; position:relative; margin-bottom:80px; display:flex; justify-content:center; align-items:flex-end;">
            <div style="width:150px; height:150px; border-radius:50%; position:absolute; bottom:-75px; 
                        background-image:url('https://bu.dusays.com/2025/05/30/6838a5699eec2.png'); /* 【头像图片地址】 */
                        background-size:cover; background-position:center; border:4px solid #2b2b2b; box-shadow:0 10px 30px rgba(0,0,0,0.15);">
            </div>
          </div>
          
          <!-- 标题，LEO 是博主名字，可以修改这里的固定名称 -->
          <h2 style="text-align:center; font-size:24px; font-weight:700; color:#ff6b9c; margin-bottom:15px;">
            LEO,你收到了 ${NICK} 的新回复
          </h2>
          <p style="text-align:center; font-size:16px; color:#cccccc; margin-bottom:35px;">
            LEO，你在 ${SITE_NAME} 的文章下收到新回复
          </p>

          <!-- 评论内容区域 -->
          <div style="padding:15px; border-radius:8px; background:rgba(219,33,75,0.03); margin-bottom:15px;">
            <div style="font-weight:bold; color:#ff6b9c; font-size:18px; margin-bottom:8px; text-align:left;">💬 评论内容</div>
            <div style="font-size:16px; line-height:1.5; color:#e0e0e0; text-align:left;">
              ${COMMENT}
            </div>
          </div>

          <!-- 邮箱地址区域 -->
          <div style="padding:15px; border-radius:8px; background:rgba(219,33,75,0.03); margin-bottom:15px;">
            <div style="font-weight:bold; color:#ff6b9c; font-size:18px; margin-bottom:8px; text-align:left;">📧 邮箱地址</div>
            <div style="font-size:16px; line-height:1.5; color:#e0e0e0; text-align:left;">
              ${MAIL}
            </div>
          </div>

          <!-- 查看评论按钮 -->
          <a href="${POST_URL}" style="display:inline-block; background:rgba(255,107,156,0.2); color:#ff6b9c; padding:12px 40px; border-radius:50px; text-decoration:none; font-weight:600; border:1px solid #ff6b9c; margin-top:35px; text-align:center;">
            🔗 查看这条评论
          </a>
        </div>

        <!-- 页脚区域 -->
        <div style="text-align:center; font-size:14px; color:#aaaaaa; padding:20px;">
          这是一条来自你的博客的邮件提醒，点击进入：
          <a href="${SITE_URL}" style="color:#ff6b9c; text-decoration:none; font-weight:600;">
            ${SITE_NAME}
          </a>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>