Article

Mix-Space邮件推送模版

开发笔记发布于·更新于
#邮件#模版

前言H1#

今天稍微改了下邮件推送模版，快来评论试试吧

功能H1#

[x] 随机一言（算是吧，内置了100条）
[x] 按钮美化

代码H1#

回复邮件（访客）H2#

html
<% 
  const quotes = [
  // 文学经典 (20条)
  {
    text: "我们都在阴沟里，但仍有人仰望星空。",
    author: "奥斯卡·王尔德"
  },
  {
    text: "世界上只有一种真正的英雄主义，那就是在认清生活真相之后依然热爱生活。",
    author: "罗曼·罗兰《约翰·克利斯朵夫》"
  },
  {
    text: "岁月不饶人，我亦未曾饶过岁月。",
    author: "木心"
  },
  {
    text: "凌晨四点醒来，发现海棠花未眠。",
    author: "川端康成《花未眠》"
  },
  {
    text: "你明白，人的一生，既不是人们想象的那么好，也不是那么坏。",
    author: "莫泊桑"
  },
  {
    text: "满地都是六便士，他却抬头看见了月亮。",
    author: "毛姆《月亮与六便士》"
  },
  {
    text: "世界上最大的勇气，是压力下的优雅。",
    author: "海明威"
  },
  {
    text: "每个人都是自己命运的建筑师。",
    author: "克劳迪乌斯"
  },
  {
    text: "生活在别处。",
    author: "兰波"
  },
  {
    text: "爱自己是终身浪漫的开始。",
    author: "奥斯卡·王尔德"
  },

  // 影视台词 (20条)
  {
    text: "人生就像一盒巧克力，你永远不知道下一颗是什么味道。",
    author: "《阿甘正传》"
  },
  {
    text: "有的鸟终究是关不住的，因为他们的羽翼太过光辉。",
    author: "《肖申克的救赎》"
  },
  {
    text: "永远不要让别人告诉你你做不到。",
    author: "《当幸福来敲门》"
  },
  {
    text: "死亡不是生命的终点，遗忘才是。",
    author: "《寻梦环游记》"
  },
  {
    text: "我们读诗写诗，并不是因为它们好玩，而是因为我们是人类的一分子。",
    author: "《死亡诗社》"
  },

  // 动漫语录 (20条)
  {
    text: "不相信自己的人，连努力的价值都没有。",
    author: "《火影忍者》凯"
  },
  {
    text: "我命由我不由天。",
    author: "《哪吒之魔童降世》"
  },
  {
    text: "如果结果不如你所愿，就在尘埃落定前奋力一搏。",
    author: "《夏目友人帐》"
  },
  {
    text: "世界上没有偶然，有的只是必然。",
    author: "《xxxHOLiC》侑子"
  },
  {
    text: "光芒终会照亮每一个角落。",
    author: "《鬼灭之刃》"
  },

  // 诗词歌赋 (20条)
  {
    text: "黑夜给了我黑色的眼睛，我却用它寻找光明。",
    author: "顾城《一代人》"
  },
  {
    text: "面朝大海，春暖花开。",
    author: "海子"
  },
  {
    text: "天空没有翅膀的痕迹，而我已飞过。",
    author: "泰戈尔《飞鸟集》"
  },
  {
    text: "为什么我的眼里常含泪水？因为我对这土地爱得深沉。",
    author: "艾青《我爱这土地》"
  },
  {
    text: "你站在桥上看风景，看风景的人在楼上看你。",
    author: "卞之琳《断章》"
  },

  // 哲思短语 (20条)
  {
    text: "未经审视的人生不值得过。",
    author: "苏格拉底"
  },
  {
    text: "存在先于本质。",
    author: "萨特"
  },
  {
    text: "我思故我在。",
    author: "笛卡尔"
  },
  {
    text: "人生而自由，却无往不在枷锁之中。",
    author: "卢梭"
  },
  {
    text: "每一个不曾起舞的日子，都是对生命的辜负。",
    author: "尼采"
  }
];
  const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body style="margin:0;padding:0;background:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;">
    <div style="max-width:680px;margin:40px auto;padding:20px;">
        <!-- 卡片容器 -->
        <div style="background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.08);border:1px solid rgba(14,165,233,0.2);position:relative;overflow:hidden;">

            <!-- 渐变装饰条 -->
            <div style="height:4px;background:linear-gradient(135deg,rgba(14,165,233,1) 0%,rgba(124,58,237,1) 100%);"></div>

            <!-- 内容区域 -->
            <div style="padding:40px 32px 32px;">
                <!-- 头像部分优化代码 -->
                <div style="margin: 0 auto 24px; width: 64px; position: relative;">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin:0 auto;">
                        <tr>
                            <td style="padding: 6px;">
                                <img src="<%= aggregate.owner.avatar %>" style="display: block;  /* 关键属性 */
                    width: 64px;
                    height: 64px;
                    border-radius: 50%;
                    border: 2px solid #fff;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                    margin: 0 auto;  /* 双重保障 */
                    line-height: 0;" alt="用户头像">
                            </td>
                        </tr>
                    </table>
                </div>

                <!-- 标题 -->
                <h1 style="font-size:20px;color:#1e293b;text-align:center;margin:0 0 32px 0;font-weight:600;">
                    <span style="color:#64748b;">您在</span>
                    「<span style="color:#3b82f6;"><%= title %></span>」
                    <span style="color:#64748b;">的评论有新回复</span>✨
                </h1>

                <!-- 回复内容 -->
                <div style="margin-bottom:32px;">
                    <div style="font-size:14px;color:#475569;margin-bottom:8px;"><strong><%= master %></strong> 回复说：</div>
                    <div style="background:#f1f5f9;padding:16px;border-radius:8px;border-left:3px solid #3b82f6;">
                        <div style="font-size:15px;color:#334155;line-height:1.6;"><%= text %></div>
                    </div>
                </div>

                <!-- 历史回复 -->
                <% if(aggregate.parent?.text){ %>
                <div style="margin-bottom:32px;">
                    <div style="font-size:14px;color:#475569;margin-bottom:8px;">📜 您之前的回复：</div>
                    <div style="background:#f8fafc;padding:16px;border-radius:8px;border:1px dashed #e2e8f0;">
                        <div style="font-size:14px;color:#64748b;line-height:1.6;"><%= aggregate.parent.text %></div>
                    </div>
                </div>
                <% } %>

                <!-- 操作按钮 -->
                <div style="text-align:center;margin:40px 0 32px;">
                    <a href="<%= link %>" style="display:inline-block;padding:12px 32px;background:#3b82f6;color:#fff;text-decoration:none;border-radius:6px;font-weight:500;transition:all 0.2s;box-shadow:0 2px 8px rgba(14,165,233,0.3);" onmouseover="this.style.background='#2563eb';this.style.boxShadow='0 4px 12px rgba(14,165,233,0.4)'" onmouseout="this.style.background='#3b82f6';this.style.boxShadow='0 2px 8px rgba(14,165,233,0.3)'">
                        查看完整对话 ➔
                    </a>
                </div>

                <!-- 分隔线 -->
                <hr style="border:0;height:1px;background:#e2e8f0;margin:32px 0;">

                <!-- 寄语 -->
                <div style="text-align:center;font-size:13px;color:#94a3b8;line-height:1.6;font-style:italic;">
                    「<%= randomQuote.text %>」<br>
                    ——<%= randomQuote.author %>
            </div>
        </div>

        <!-- 页脚 -->
        <div style="background:#f1f5f9;padding:24px;text-align:center;">
            <p style="margin:0;font-size:12px;color:#64748b;">
                本邮件为系统自动发送，请勿直接回复<br>
                © <%= new Date().getFullYear() %> <%= master %> 保留所有权利
            </p>
        </div>
    </div>
    </div>
</body>
</html>

回复邮件（博主）H2#

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<div id="__react-email-preview" style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0;">
  <%= author %> 在《<%= title %>》的回复：<%= text %>
</div>
<body style="margin:0;padding:0;background:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;">
  <div style="max-width:680px;margin:40px auto;padding:20px;">
    <!-- 卡片容器 -->
    <div style="background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.08);border:1px solid rgba(14,165,233,0.2);position:relative;overflow:hidden;">
      
      <!-- 渐变装饰条 -->
      <div style="height:4px;background:linear-gradient(135deg,rgba(14,165,233,1) 0%,rgba(124,58,237,1) 100%);"></div>

      <!-- 内容区域 -->
      <div style="padding:40px 32px 32px;">
        <!-- Logo -->
        <div style="text-align:center;margin-bottom:16px;">
          <img src="https://cdn.jsdelivr.net/gh/mx-space/.github@main/uwu.png" 
               style="height:3rem;display:block;margin:0 auto;">
        </div>

        <!-- 标题 -->
        <h1 style="font-size:20px;color:#1e293b;text-align:center;margin:0 0 32px 0;font-weight:600;">
          「<span style="color:#3b82f6;"><%= title %></span>」的新回复
        </h1>

        <!-- 回复内容 -->
        <div style="margin-bottom:32px;">
          <div style="font-size:14px;color:#475569;margin-bottom:8px;">👤 <strong><%= author %></strong> 回复说：</div>
          <div style="background:#f1f5f9;padding:16px;border-radius:8px;border-left:3px solid #3b82f6;">
            <div style="font-size:15px;color:#334155;line-height:1.6;"><%= text %></div>
          </div>
        </div>

        <!-- 原评论 -->
        <% if(aggregate.parent?.text){ %>
        <div style="margin-bottom:32px;">
          <div style="font-size:14px;color:#475569;margin-bottom:8px;">📜 您的原评论：</div>
          <div style="background:#f8fafc;padding:16px;border-radius:8px;border:1px dashed #e2e8f0;">
            <div style="font-size:14px;color:#64748b;line-height:1.6;"><%= aggregate.parent.text %></div>
          </div>
        </div>
        <% } %>

        <!-- 元信息 -->
        <div style="margin-bottom:32px;background:#f8fafc;padding:16px;border-radius:8px;">
          <table width="100%" cellspacing="0" cellpadding="0">
            <tr>
              <td width="25%" style="font-size:12px;color:#64748b;padding:4px 0;">IP地址</td>
              <td style="font-size:12px;color:#334155;padding:4px 0;"><%= ip %></td>
            </tr>
            <tr>
              <td style="font-size:12px;color:#64748b;padding:4px 0;">电子邮箱</td>
              <td style="font-size:12px;color:#334155;padding:4px 0;"><%= aggregate.commentor.mail %></td>
            </tr>
            <tr>
              <td style="font-size:12px;color:#64748b;padding:4px 0;">用户代理</td>
              <td style="font-size:12px;color:#334155;padding:4px 0;"><%= aggregate.commentor.agent %></td>
            </tr>
            <% if(aggregate.commentor.url){ %>
            <tr>
              <td style="font-size:12px;color:#64748b;padding:4px 0;">个人主页</td>
              <td style="font-size:12px;color:#334155;padding:4px 0;"><%= aggregate.commentor.url %></td>
            </tr>
            <% } %>
          </table>
        </div>

        <!-- 操作按钮 -->
        <div style="text-align:center;margin:40px 0 32px;">
          <a href="<%= link %>" 
             style="display:inline-block;padding:12px 32px;background:#3b82f6;color:#fff;text-decoration:none;border-radius:6px;font-weight:500;transition:all 0.2s;box-shadow:0 2px 8px rgba(14,165,233,0.3);"
             onmouseover="this.style.background='#2563eb';this.style.boxShadow='0 4px 12px rgba(14,165,233,0.4)'" 
             onmouseout="this.style.background='#3b82f6';this.style.boxShadow='0 2px 8px rgba(14,165,233,0.3)'">
             查看完整对话 ➔
          </a>
        </div>

        <!-- 随机寄语 -->
        <hr style="border:0;height:1px;background:#e2e8f0;margin:32px 0;">
        <div style="text-align:center;font-size:13px;color:#94a3b8;line-height:1.6;font-style:italic;">
          <% 
            const quotes = [
  // 文学经典 (20条)
  {
    text: "我们都在阴沟里，但仍有人仰望星空。",
    author: "奥斯卡·王尔德"
  },
  {
    text: "世界上只有一种真正的英雄主义，那就是在认清生活真相之后依然热爱生活。",
    author: "罗曼·罗兰《约翰·克利斯朵夫》"
  },
  {
    text: "岁月不饶人，我亦未曾饶过岁月。",
    author: "木心"
  },
  {
    text: "凌晨四点醒来，发现海棠花未眠。",
    author: "川端康成《花未眠》"
  },
  {
    text: "你明白，人的一生，既不是人们想象的那么好，也不是那么坏。",
    author: "莫泊桑"
  },
  {
    text: "满地都是六便士，他却抬头看见了月亮。",
    author: "毛姆《月亮与六便士》"
  },
  {
    text: "世界上最大的勇气，是压力下的优雅。",
    author: "海明威"
  },
  {
    text: "每个人都是自己命运的建筑师。",
    author: "克劳迪乌斯"
  },
  {
    text: "生活在别处。",
    author: "兰波"
  },
  {
    text: "爱自己是终身浪漫的开始。",
    author: "奥斯卡·王尔德"
  },

  // 影视台词 (20条)
  {
    text: "人生就像一盒巧克力，你永远不知道下一颗是什么味道。",
    author: "《阿甘正传》"
  },
  {
    text: "有的鸟终究是关不住的，因为他们的羽翼太过光辉。",
    author: "《肖申克的救赎》"
  },
  {
    text: "永远不要让别人告诉你你做不到。",
    author: "《当幸福来敲门》"
  },
  {
    text: "死亡不是生命的终点，遗忘才是。",
    author: "《寻梦环游记》"
  },
  {
    text: "我们读诗写诗，并不是因为它们好玩，而是因为我们是人类的一分子。",
    author: "《死亡诗社》"
  },

  // 动漫语录 (20条)
  {
    text: "不相信自己的人，连努力的价值都没有。",
    author: "《火影忍者》凯"
  },
  {
    text: "我命由我不由天。",
    author: "《哪吒之魔童降世》"
  },
  {
    text: "如果结果不如你所愿，就在尘埃落定前奋力一搏。",
    author: "《夏目友人帐》"
  },
  {
    text: "世界上没有偶然，有的只是必然。",
    author: "《xxxHOLiC》侑子"
  },
  {
    text: "光芒终会照亮每一个角落。",
    author: "《鬼灭之刃》"
  },

  // 诗词歌赋 (20条)
  {
    text: "黑夜给了我黑色的眼睛，我却用它寻找光明。",
    author: "顾城《一代人》"
  },
  {
    text: "面朝大海，春暖花开。",
    author: "海子"
  },
  {
    text: "天空没有翅膀的痕迹，而我已飞过。",
    author: "泰戈尔《飞鸟集》"
  },
  {
    text: "为什么我的眼里常含泪水？因为我对这土地爱得深沉。",
    author: "艾青《我爱这土地》"
  },
  {
    text: "你站在桥上看风景，看风景的人在楼上看你。",
    author: "卞之琳《断章》"
  },

  // 哲思短语 (20条)
  {
    text: "未经审视的人生不值得过。",
    author: "苏格拉底"
  },
  {
    text: "存在先于本质。",
    author: "萨特"
  },
  {
    text: "我思故我在。",
    author: "笛卡尔"
  },
  {
    text: "人生而自由，却无往不在枷锁之中。",
    author: "卢梭"
  },
  {
    text: "每一个不曾起舞的日子，都是对生命的辜负。",
    author: "尼采"
  }
];

            const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
          %>
          「<%= randomQuote.text %>」<br>——<%= randomQuote.author %>
        </div>
      </div>

      <!-- 页脚 -->
      <div style="background:#f1f5f9;padding:24px;text-align:center;">
        <p style="margin:0;font-size:12px;color:#64748b;">
          本邮件为系统自动发送，请勿直接回复<br>
          © <%= new Date().getFullYear() %> <%= master %> 保留所有权利
        </p>
      </div>
    </div>
  </div>
</body>
</html>
Copyright & License
© 2025 Teror Fox
Mix-Space邮件推送模版
CC知识共享许可
BY署名：必须保留原作者署名
NC非商业：禁止用于商业目的
SA相同方式共享：以同协议发布
许可协议：署名-非商业性使用-相同方式共享
Teror Fox
Teror Fox离线