Mix-Space Email Push Template
Preface
Today I slightly modified the email push template, come and try it in the comments.
Features
Random quotes (sort of, 100 entries built-in)
Button beautification
Code
Reply Email (Visitor)
<%
const quotes = [
// Literary Classics (20 entries)
{
text: "We are all in the gutter, but some of us are looking at the stars.",
author: "Oscar Wilde"
},
{
text: "There is only one heroism in the world: to see the world as it is, and to love it.",
author: "Romain Rolland, \"Jean-Christophe\""
},
{
text: "Time does not spare people, and I have never spared time.",
author: "Mu Xin"
},
{
text: "Waking up at four in the morning, I found the begonia flowers were not asleep.",
author: "Yasunari Kawabata, \"The Flowers Were Not Asleep\""
},
{
text: "You see, life is never as good or as bad as one thinks.",
author: "Guy de Maupassant"
},
{
text: "The world is full of sixpences, but he looked up and saw the moon.",
author: "Somerset Maugham, \"The Moon and Sixpence\""
},
{
text: "Courage is grace under pressure.",
author: "Ernest Hemingway"
},
{
text: "Every man is the architect of his own fortune.",
author: "Appius Claudius Caecus"
},
{
text: "Life is elsewhere.",
author: "Arthur Rimbaud"
},
{
text: "To love oneself is the beginning of a lifelong romance.",
author: "Oscar Wilde"
},
// Film/TV Quotes (20 entries)
{
text: "Life is like a box of chocolates, you never know what you're gonna get.",
author: "\"Forrest Gump\""
},
{
text: "Some birds aren't meant to be caged. Their feathers are just too bright.",
author: "\"The Shawshank Redemption\""
},
{
text: "Don't ever let someone tell you you can't do something.",
author: "\"The Pursuit of Happyness\""
},
{
text: "Death is not the end of life, forgetting is.",
author: "\"Coco\""
},
{
text: "We don't read and write poetry because it's cute. We read and write poetry because we are members of the human race.",
author: "\"Dead Poets Society\""
},
// Anime Quotes (20 entries)
{
text: "Those who don't believe in themselves don't even have the value of hard work.",
author: "Might Guy, \"Naruto\""
},
{
text: "My fate is my own to decide, not the heavens'.",
author: "\"Ne Zha\""
},
{
text: "If the result is not what you want, fight for it before the dust settles.",
author: "\"Natsume's Book of Friends\""
},
{
text: "There is no such thing as coincidence in this world, only the inevitable.",
author: "Yuko, \"xxxHOLiC\""
},
{
text: "The light will eventually illuminate every corner.",
author: "\"Demon Slayer\""
},
// Poetry (20 entries)
{
text: "Dark night gave me dark eyes, but I use them to seek light.",
author: "Gu Cheng, \"A Generation\""
},
{
text: "Facing the sea, with spring blossoms.",
author: "Hai Zi"
},
{
text: "The sky has no trace of wings, but I have flown.",
author: "Rabindranath Tagore, \"Stray Birds\""
},
{
text: "Why are my eyes always full of tears? Because I love this land so deeply.",
author: "Ai Qing, \"I Love This Land\""
},
{
text: "You stand on the bridge watching the scenery, while the scenery watcher watches you from the balcony.",
author: "Bian Zhilin, \"Fragment\""
},
// Philosophical Phrases (20 entries)
{
text: "The unexamined life is not worth living.",
author: "Socrates"
},
{
text: "Existence precedes essence.",
author: "Jean-Paul Sartre"
},
{
text: "I think, therefore I am.",
author: "René Descartes"
},
{
text: "Man is born free, and everywhere he is in chains.",
author: "Jean-Jacques Rousseau"
},
{
text: "Every day we should consider every day lost on which we have not danced at least once.",
author: "Friedrich Nietzsche"
}
];
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="en">
<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 Section Optimization -->
<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 protection */
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 to your comment in</span>
「<span style="color:#3b82f6;"><%= title %></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>
<!-- History Reply -->
<% 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>
<!-- Separator -->
<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 is automatically sent by the system, please do not reply directly.<br>
© <%= new Date().getFullYear() %> <%= master %> All rights reserved
</p>
</div>
</div>
</div>
</body>
</html>
Reply Email (Blogger)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<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 %>'s reply in 《<%= 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;">
<!-- 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;">
<!-- 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>
<!-- Title -->
<h1 style="font-size:20px;color:#1e293b;text-align:center;margin:0 0 32px 0;font-weight:600;">
New reply to 「<span style="color:#3b82f6;"><%= title %></span>」
</h1>
<!-- Reply Content -->
<div style="margin-bottom:32px;">
<div style="font-size:14px;color:#475569;margin-bottom:8px;">👤 <strong><%= author %></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>
<!-- Original Comment -->
<% if(aggregate.parent?.text){ %>
<div style="margin-bottom:32px;">
<div style="font-size:14px;color:#475569;margin-bottom:8px;">📜 Your original comment:</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>
<% } %>
<!-- Meta Info -->
<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 Address</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;">Email</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;">User Agent</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;">Homepage</td>
<td style="font-size:12px;color:#334155;padding:4px 0;"><%= aggregate.commentor.url %></td>
</tr>
<% } %>
</table>
</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>
<!-- Random Quote -->
<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 = [
// Literary Classics (20 entries)
{
text: "We are all in the gutter, but some of us are looking at the stars.",
author: "Oscar Wilde"
},
{
text: "There is only one heroism in the world: to see the world as it is, and to love it.",
author: "Romain Rolland, \"Jean-Christophe\""
},
{
text: "Time does not spare people, and I have never spared time.",
author: "Mu Xin"
},
{
text: "Waking up at four in the morning, I found the begonia flowers were not asleep.",
author: "Yasunari Kawabata, \"The Flowers Were Not Asleep\""
},
{
text: "You see, life is never as good or as bad as one thinks.",
author: "Guy de Maupassant"
},
{
text: "The world is full of sixpences, but he looked up and saw the moon.",
author: "Somerset Maugham, \"The Moon and Sixpence\""
},
{
text: "Courage is grace under pressure.",
author: "Ernest Hemingway"
},
{
text: "Every man is the architect of his own fortune.",
author: "Appius Claudius Caecus"
},
{
text: "Life is elsewhere.",
author: "Arthur Rimbaud"
},
{
text: "To love oneself is the beginning of a lifelong romance.",
author: "Oscar Wilde"
},
// Film/TV Quotes (20 entries)
{
text: "Life is like a box of chocolates, you never know what you're gonna get.",
author: "\"Forrest Gump\""
},
{
text: "Some birds aren't meant to be caged. Their feathers are just too bright.",
author: "\"The Shawshank Redemption\""
},
{
text: "Don't ever let someone tell you you can't do something.",
author: "\"The Pursuit of Happyness\""
},
{
text: "Death is not the end of life, forgetting is.",
author: "\"Coco\""
},
{
text: "We don't read and write poetry because it's cute. We read and write poetry because we are members of the human race.",
author: "\"Dead Poets Society\""
},
// Anime Quotes (20 entries)
{
text: "Those who don't believe in themselves don't even have the value of hard work.",
author: "Might Guy, \"Naruto\""
},
{
text: "My fate is my own to decide, not the heavens'.",
author: "\"Ne Zha\""
},
{
text: "If the result is not what you want, fight for it before the dust settles.",
author: "\"Natsume's Book of Friends\""
},
{
text: "There is no such thing as coincidence in this world, only the inevitable.",
author: "Yuko, \"xxxHOLiC\""
},
{
text: "The light will eventually illuminate every corner.",
author: "\"Demon Slayer\""
},
// Poetry (20 entries)
{
text: "Dark night gave me dark eyes, but I use them to seek light.",
author: "Gu Cheng, \"A Generation\""
},
{
text: "Facing the sea, with spring blossoms.",
author: "Hai Zi"
},
{
text: "The sky has no trace of wings, but I have flown.",
author: "Rabindranath Tagore, \"Stray Birds\""
},
{
text: "Why are my eyes always full of tears? Because I love this land so deeply.",
author: "Ai Qing, \"I Love This Land\""
},
{
text: "You stand on the bridge watching the scenery, while the scenery watcher watches you from the balcony.",
author: "Bian Zhilin, \"Fragment\""
},
// Philosophical Phrases (20 entries)
{
text: "The unexamined life is not worth living.",
author: "Socrates"
},
{
text: "Existence precedes essence.",
author: "Jean-Paul Sartre"
},
{
text: "I think, therefore I am.",
author: "René Descartes"
},
{
text: "Man is born free, and everywhere he is in chains.",
author: "Jean-Jacques Rousseau"
},
{
text: "Every day we should consider every day lost on which we have not danced at least once.",
author: "Friedrich Nietzsche"
}
];
const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
%>
「<%= 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 is automatically sent by the system, please do not reply directly.<br>
© <%= new Date().getFullYear() %> <%= master %> All rights reserved
</p>
</div>
</div>
</div>
</body>
</html>