emlog邮件模板分享
emlog邮件模板分享：打造个性化邮件通知体验
在博客运营中，邮件通知是与读者互动的重要方式之一。无论是新评论提醒、用户注册确认，还是密码找回功能，一个设计良好的邮件模板不仅能提升用户体验，还能增强博客的专业感。emlog作为一款轻量级的博客系统，支持用户自定义邮件模板，以满足不同的视觉和功能需求。
邮件模板一：轻盈、偏内容和排版美感
图示
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{mail_site_title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 移动端适配：主要控制宽度和字体大小 */
@media only screen and (max-width: 600px) {
.wrapper {
width: 100% !important;
padding: 0 14px !important;
}
.card {
border-radius: 16px !important;
}
.title-text {
font-size: 22px !important;
}
.content-text {
font-size: 15px !important;
}
}
</style>
</head>
<body style="margin:0;padding:0;background-color:#f4f5fb;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',Arial,sans-serif;">
<!-- 预览文本（部分客户端列表预览用） -->
<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">
来自 {{mail_site_title}} 的新内容
</div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0;padding:26px 0;">
<tr>
<td align="center">
<!-- 主体容器 -->
<table class="wrapper" width="600" cellpadding="0" cellspacing="0" border="0"
style="max-width:600px;width:100%;padding:0 10px;">
<tr>
<td>
<!-- 卡片 -->
<table class="card" width="100%" cellpadding="0" cellspacing="0" border="0"
style="background-color:#ffffff;border-radius:20px;box-shadow:0 16px 40px rgba(15,23,42,0.10);overflow:hidden;border:1px solid #e5e7f0;">
<!-- 顶部渐变条 -->
<tr>
<td style="padding:0;">
<div style="height:4px;width:100%;background:linear-gradient(90deg,#f97316,#fbbf24,#34d399,#38bdf8,#a855f7);"></div>
</td>
</tr>
<!-- 标题区（博客感更强） -->
<tr>
<td style="padding:22px 26px 10px 26px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle">
<div class="title-text"
style="font-size:24px;font-weight:700;color:#111827;line-height:1.4;">
{{mail_site_title}}
</div>
<div style="margin-top:6px;font-size:13px;color:#6b7280;">
来自你的个人博客的一封小信件
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- 分割线 -->
<tr>
<td style="padding:0 26px;">
<div style="height:1px;width:100%;background:linear-gradient(90deg,rgba(203,213,225,0.1),rgba(203,213,225,0.8),rgba(203,213,225,0.1));"></div>
</td>
</tr>
<!-- 正文内容 -->
<tr>
<td style="padding:20px 26px 22px 26px;">
<div class="content-text"
style="font-size:16px;line-height:1.9;color:#374151;word-break:break-word;">
{{mail_content}}
</div>
</td>
</tr>
<!-- 轻微的“结束语”区（可保持或删掉） -->
<tr>
<td style="padding:0 26px 18px 26px;">
<div style="margin-top:4px;font-size:13px;color:#9ca3af;line-height:1.6;">
感谢你抽空阅读这封邮件，祝你今天也有一点点小进步。
</div>
</td>
</tr>
<!-- 底部分割线 -->
<tr>
<td style="padding:0 26px;">
<div style="height:1px;width:100%;background:linear-gradient(90deg,rgba(203,213,225,0.1),rgba(203,213,225,0.6),rgba(203,213,225,0.1));"></div>
</td>
</tr>
<!-- 页脚 -->
<tr>
<td style="padding:12px 26px 18px 26px;text-align:center;">
<div style="font-size:12px;color:#9ca3af;line-height:1.8;">
来自站点：<span style="color:#4b5563;font-weight:600;">{{mail_site_title}}</span><br>
本邮件由博客系统自动发送，请勿直接回复。
</div>
</td>
</tr>
</table>
<!-- 外层版权（可选） -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:12px;">
<tr>
<td style="text-align:center;font-size:11px;color:#9ca3af;">
© {{mail_site_title}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>邮件模板二：极简博客风（黑白+细线）
图示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{mail_site_title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media only screen and (max-width: 600px) {
.wrapper { width: 100% !important; padding: 0 14px !important; }
.card { border-radius: 14px !important; }
}
</style>
</head>
<body style="margin:0;padding:0;background-color:#f5f5f6;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',Arial,sans-serif;">
<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">
来自 {{mail_site_title}} 的新内容
</div>
<table width="100%" cellpadding="0" cellspacing="0" style="padding:28px 0;">
<tr>
<td align="center">
<table class="wrapper" width="620" cellpadding="0" cellspacing="0" style="max-width:620px;width:100%;padding:0 20px;">
<tr>
<td>
<table class="card" width="100%" cellpadding="0" cellspacing="0"
style="background-color:#ffffff;border-radius:18px;border:1px solid #e5e7eb;box-shadow:0 16px 40px rgba(15,23,42,.06);overflow:hidden;">
<!-- 上方细线 -->
<tr>
<td style="padding:0;">
<div style="height:3px;width:100%;background:linear-gradient(90deg,#111827,#6b7280,#d1d5db);"></div>
</td>
</tr>
<!-- 标题 -->
<tr>
<td style="padding:22px 28px 6px 28px;">
<div style="font-size:22px;font-weight:700;color:#111827;letter-spacing:.02em;">
{{mail_site_title}}
</div>
<div style="margin-top:8px;font-size:12px;color:#9ca3af;text-transform:uppercase;letter-spacing:.16em;">
PERSONAL · BLOG · UPDATE
</div>
</td>
</tr>
<!-- 分割线 -->
<tr>
<td style="padding:0 28px;">
<div style="height:1px;width:100%;background:rgba(209,213,219,.9);margin:14px 0;"></div>
</td>
</tr>
<!-- 正文 -->
<tr>
<td style="padding:0 28px 24px 28px;">
<div style="font-size:15px;line-height:1.9;color:#374151;word-break:break-word;">
{{mail_content}}
</div>
</td>
</tr>
<!-- 页脚 -->
<tr>
<td style="padding:14px 28px 18px 28px;border-top:1px solid #e5e7eb;text-align:center;">
<div style="font-size:12px;color:#9ca3af;line-height:1.8;">
来自站点：<span style="color:#4b5563;font-weight:600;">{{mail_site_title}}</span><br>
本邮件由博客自动发送，请勿直接回复。
</div>
</td>
</tr>
</table>
<!-- 外部版权 -->
<table width="100%" cellpadding="0" cellspacing="0" style="margin-top:12px;">
<tr>
<td style="text-align:center;font-size:11px;color:#a1a1aa;">
© {{mail_site_title}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
邮件模板三：质感纸张风（偏写作/日记）
图示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{mail_site_title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media only screen and (max-width: 600px) {
.wrapper { width:100% !important;padding:0 14px !important; }
.card { border-radius:14px !important; }
}
</style>
</head>
<body style="margin:0;padding:0;background:#ede9dd;font-family:'Segoe UI','Microsoft YaHei',Arial,sans-serif;">
<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">
{{mail_site_title}} 的一则新记事
</div>
<table width="100%" cellpadding="0" cellspacing="0" style="padding:28px 0;">
<tr>
<td align="center">
<table class="wrapper" width="640" cellpadding="0" cellspacing="0" style="max-width:640px;width:100%;padding:0 18px;">
<tr>
<td>
<table class="card" width="100%" cellpadding="0" cellspacing="0"
style="background:#fcfbf7;border-radius:18px;border:1px solid #e5decf;box-shadow:0 14px 32px rgba(148,115,84,.28);overflow:hidden;">
<!-- 顶部“便签条” -->
<tr>
<td style="padding:0;">
<div style="height:28px;background:repeating-linear-gradient(-45deg,#facc15,#facc15 10px,#fef3c7 10px,#fef3c7 20px);border-bottom:1px solid #e5decf;"></div>
</td>
</tr>
<!-- 标题 -->
<tr>
<td style="padding:20px 26px 4px 26px;">
<div style="font-size:23px;font-weight:700;color:#3f3f46;">
{{mail_site_title}}
</div>
<div style="margin-top:6px;font-size:13px;color:#78716c;font-style:italic;">
「来自博客的一封手写风小信」
</div>
</td>
</tr>
<!-- 横线 -->
<tr>
<td style="padding:0 26px 4px 26px;">
<div style="height:1px;background:linear-gradient(90deg,rgba(148,163,184,0),rgba(148,163,184,0.7),rgba(148,163,184,0));margin-top:10px;"></div>
</td>
</tr>
<!-- 正文（带“稿纸线”效果） -->
<tr>
<td style="padding:8px 26px 24px 26px;">
<div style="font-size:16px;line-height:2;color:#44403c;word-break:break-word;
background-image:linear-gradient(#f5efe2 1px,transparent 1px);
background-size:100% 28px;padding:10px 12px;border-radius:10px;">
{{mail_content}}
</div>
</td>
</tr>
<!-- 注脚 -->
<tr>
<td style="padding:0 26px 18px 26px;">
<div style="font-size:13px;color:#a16207;line-height:1.7;">
谢谢你读到这里。愿你今天的生活里，有一点点温柔和一点点进展。
</div>
</td>
</tr>
<!-- 底栏 -->
<tr>
<td style="padding:10px 26px 18px 26px;border-top:1px solid #e5decf;text-align:center;background:#f7f2e7;">
<div style="font-size:12px;color:#78716c;">
来自站点：<span style="font-weight:600;color:#57534e;">{{mail_site_title}}</span><br>
本邮件自动发送，如需留言请前往博客评论区。
</div>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="margin-top:10px;">
<tr>
<td style="text-align:center;font-size:11px;color:#a8a29e;">
© {{mail_site_title}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
邮件模板四：暗色夜读风（适合技术 / 极客感博客）
图示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{mail_site_title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media only screen and (max-width: 600px) {
.wrapper { width:100% !important;padding:0 14px !important; }
.card { border-radius:18px !important; }
}
</style>
</head>
<body style="margin:0;padding:0;background:#020617;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',Arial,sans-serif;">
<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">
{{mail_site_title}} 的夜间来信
</div>
<table width="100%" cellpadding="0" cellspacing="0" style="padding:26px 0;">
<tr>
<td align="center">
<table class="wrapper" width="620" cellpadding="0" cellspacing="0" style="max-width:620px;width:100%;padding:0 16px;">
<tr>
<td>
<table class="card" width="100%" cellpadding="0" cellspacing="0"
style="background:radial-gradient(circle at top,#0f172a,#020617);
border-radius:22px;border:1px solid rgba(148,163,184,.35);
box-shadow:0 24px 60px rgba(15,23,42,.85);overflow:hidden;">
<!-- 顶部渐变条 -->
<tr>
<td style="padding:0;">
<div style="height:3px;background:linear-gradient(90deg,#22d3ee,#38bdf8,#6366f1,#a855f7,#ec4899);"></div>
</td>
</tr>
<!-- 标题区 -->
<tr>
<td style="padding:22px 26px 6px 26px;">
<div style="font-size:22px;font-weight:700;color:#e5e7eb;">
{{mail_site_title}}
</div>
<div style="margin-top:6px;font-size:12px;color:#9ca3af;letter-spacing:.14em;text-transform:uppercase;">
Blog Update · Night Edition
</div>
</td>
</tr>
<!-- 正文 -->
<tr>
<td style="padding:14px 26px 24px 26px;">
<div style="font-size:15px;line-height:1.9;color:#e5e7eb;word-break:break-word;">
{{mail_content}}
</div>
</td>
</tr>
<!-- 底部说明 -->
<tr>
<td style="padding:0 26px 18px 26px;">
<div style="font-size:12px;color:#9ca3af;line-height:1.8;">
来自站点：<span style="color:#f9fafb;font-weight:600;">{{mail_site_title}}</span><br>
如果这封邮件在深夜到达，希望它不会打扰你的休息。
</div>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="margin-top:10px;">
<tr>
<td style="text-align:center;font-size:11px;color:#64748b;">
© {{mail_site_title}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
邮件模板五：玻璃卡片 + 彩色背景
图示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{mail_site_title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media only screen and (max-width: 600px) {
.wrapper { width:100% !important;padding:0 14px !important; }
.card { border-radius:18px !important; }
}
</style>
</head>
<body style="margin:0;padding:0;
background:radial-gradient(circle at 0% 0%,#f97316 0,#f97316 12%,transparent 55%),
radial-gradient(circle at 100% 0%,#38bdf8 0,#38bdf8 14%,transparent 55%),
radial-gradient(circle at 0% 100%,#a855f7 0,#a855f7 12%,transparent 55%),
#020617;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',Arial,sans-serif;">
<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">
{{mail_site_title}} 的最新推送
</div>
<table width="100%" cellpadding="0" cellspacing="0" style="padding:30px 0;">
<tr>
<td align="center">
<table class="wrapper" width="620" cellpadding="0" cellspacing="0" style="max-width:620px;width:100%;padding:0 18px;">
<tr>
<td>
<table class="card" width="100%" cellpadding="0" cellspacing="0"
style="background:rgba(15,23,42,.82);backdrop-filter:blur(14px);
border-radius:20px;border:1px solid rgba(148,163,184,.4);
box-shadow:0 22px 50px rgba(15,23,42,.85);overflow:hidden;">
<!-- 顶部圆角色块 -->
<tr>
<td style="padding:18px 22px 6px 22px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">
<div style="display:inline-block;padding:6px 14px;border-radius:999px;
background:linear-gradient(135deg,#f97316,#facc15);
font-size:11px;font-weight:600;color:#111827;letter-spacing:.08em;text-transform:uppercase;">
BLOG UPDATE
</div>
</td>
<td valign="middle" align="right">
<div style="font-size:11px;color:#9ca3af;">
来自 {{mail_site_title}}
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- 标题 -->
<tr>
<td style="padding:4px 22px 10px 22px;">
<div style="font-size:22px;font-weight:700;color:#f9fafb;line-height:1.4;">
{{mail_site_title}}
</div>
</td>
</tr>
<!-- 正文 -->
<tr>
<td style="padding:4px 22px 22px 22px;">
<div style="font-size:15px;line-height:1.9;color:#e5e7eb;word-break:break-word;">
{{mail_content}}
</div>
</td>
</tr>
<!-- 分割线 -->
<tr>
<td style="padding:0 22px;">
<div style="height:1px;background:linear-gradient(90deg,rgba(148,163,184,0),rgba(148,163,184,0.7),rgba(148,163,184,0));"></div>
</td>
</tr>
<!-- 页脚 -->
<tr>
<td style="padding:12px 22px 18px 22px;text-align:center;">
<div style="font-size:12px;color:#9ca3af;line-height:1.8;">
这是一封来自 <span style="color:#e5e7eb;font-weight:600;">{{mail_site_title}}</span> 的自动邮件。<br>
如果你不希望再收到此类内容，可以在站点中调整订阅设置。
</div>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="margin-top:10px;">
<tr>
<td style="text-align:center;font-size:11px;color:#9ca3af;">
© {{mail_site_title}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
文章目录
文章作者：sanjm
文章标题：emlog邮件模板分享
文章链接：https://tycat.cn/?post=12
本站所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明来自sanjm ！
文章标题：emlog邮件模板分享
文章链接：https://tycat.cn/?post=12
本站所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明来自sanjm ！
设备上扫码阅读
打赏
如果觉得文章对您有用，请随意打赏。
您的支持是我们继续创作的动力！
微信扫一扫
支付宝扫一扫
收藏