Mix-Space邮件推送模版
前言
今天稍微改了下邮件推送模版，快来评论试试吧
功能
[x] 随机一言（算是吧，内置了100条）
[x] 按钮美化
代码
回复邮件（访客）
<%
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>
回复邮件（博主）
<!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>
评论
0 条评论