Mix-Space Email Push Template
Foreword
I made a small change to the email push template today, come try commenting!
Features
Random quote (well, it's got 100 built-in) Button beautification
Code
Reply Email (Visitor)
<%
const quotes = [
// Literary Classics (20 quotes)
{
text: "We are all in the gutter, but some of us are looking at the stars.",
author: "Oscar Wilde"
},
{
text: "There is only one thing in the world worse than being talked about, and that is not being talked about.",
author: "Oscar Wilde"
},
{
text: "The only way to deal with this life meaningfully is to find one's passion.",
author: "Albert Einstein"
},
{
text: "When I stand before God at the end of my life, I would hope that I would not have a single bit of talent left, and could say, 'I used everything you gave me.'",
author: "Erma Bombeck"
},
{
text: "The purpose of life is not to be happy. It is to be useful, to be honorable, to be compassionate, to have it make some difference that you have lived and lived well.",
author: "Ralph Waldo Emerson"
}
];
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;">
<!-- Card Container -->
<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;">
<!-- Gradient Decoration Bar -->
<div style="height:4px;background:linear-gradient(135deg,rgba(14,165,233,1) 0%,rgba(124,58,237,1) 100%);"></div>
<!-- Content Area -->
<div style="padding:40px 32px 32px;">
<!-- Avatar part optimized -->
<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; /* key attribute */
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; /* Double guarantee */
line-height: 0;" alt="User Avatar">
</td>
</tr>
</table>
</div>
<!-- Title -->
<h1 style="font-size:20px;color:#1e293b;text-align:center;margin:0 0 32px 0;font-weight:600;">
<span style="color:#64748b;">You have a new reply on</span>
「<span style="color:#3b82f6;"><%= title %></span>」
<span style="color:#64748b;">'s comment</span>✨
</h1>
<!-- Reply Content -->
<div style="margin-bottom:32px;">
<div style="font-size:14px;color:#475569;margin-bottom:8px;"><strong><%= master %></strong> replied:</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>
<!-- Historical Replies -->
<% if(aggregate.parent?.text){ %>
<div style="margin-bottom:32px;">
<div style="font-size:14px;color:#475569;margin-bottom:8px;">📜 Your previous reply:</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>
<% } %>
<!-- Action Button -->
<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)'">
View full conversation ➔
</a>
</div>
<!-- Divider -->
<hr style="border:0;height:1px;background:#e2e8f0;margin:32px 0;">
<!-- Quote -->
<div style="text-align:center;font-size:13px;color:#94a3b8;line-height:1.6;font-style:italic;">
「<%= randomQuote.text %>」<br>
——<%= randomQuote.author %>
</div>
</div>
<!-- Footer -->
<div style="background:#f1f5f9;padding:24px;text-align:center;">
<p style="margin:0;font-size:12px;color:#64748b;">
This email was sent automatically, please do not reply directly.<br>
© <%= new Date().getFullYear() %> <%= master %> All rights reserved
</p>
</div>
</div>
</div>
</body>
</html>