Twikoo 邮件通知模板

前言

关于博客的邮件回复通知，我曾经尝试过 洪哥的样式
无奈洪哥尚未提供博主通知邮件的模板，且不能在我的主用邮箱Zoho Mail客户端中正常显示

我只能遍历我的邮箱，查看了所有站点给我发过的邮件，终于找到了一封看得顺眼的邮件
于是，以此为原型，我做了些许修改，终得此成品

查看原型

Origin

效果

本站通知邮件现已增加 Copyright 版权声明
考虑到大多数人的需求，本文所有效果预览和代码中均不含版权声明，请知悉

回复通知样式

Reply

站长通知样式

Admin

代码

评论回复通知

复制下方代码，直接粘贴于MAIL_TEMPLATE栏中即可

1
<html lang="zh-cn"><div style="border-radius:10px 10px 10px 10px;font-size:13px;color:#555;width:666px;font-family:century gothic,trebuchet ms,hiragino sans gb,microsoft yahei,Tahoma,Helvetica,Arial,SimSun,sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background:#fff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 1px 5px rgba(0,0,0,.15)"><div style="width:100%;background:#6f71d3;color:#fff;border-radius:10px 10px 0 0;min-height:66px"><p style="font-size:15px;padding:23px 32px;margin:0;border-radius:10px 10px 0 0;text-align:center"><strong><a style="text-decoration:none;color:#fff" href="${SITE_URL}" target="_blank" rel="noopener">${SITE_NAME}</a>&nbsp;评论回复通知</strong></p></div><div style="margin:40px auto;width:90%"><p><strong>${PARENT_NICK} 同学，您曾在 <a style="text-decoration:none;color:#12addb" href="${SITE_URL}" target="_blank" rel="noopener">${SITE_NAME}</a>&nbsp;中发表评论：</strong></p><div style="background:#fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:14px;color:#555"><p>${PARENT_COMMENT}</p></div><p><strong>${NICK} 给您的回复如下：</strong></p><div style="background:#fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:14px;color:#555"><p>${COMMENT}</p></div></div><div style="margin:40px auto;width:90%"><strong><a class="post_url" style="min-width:106px;min-height:38px;background:#6f71d3;border-radius:32px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:auto;margin-top:32px" href="${POST_URL}" target="_blank" rel="noopener"><span class="check" style="color:#fff">查看完整回复内容</span></a></strong></div><div style="margin:40px auto;width:90%;text-align:center"><span style="color:#ced4d9"><span class="check">本邮件由 Twikoo 评论系统自动发出 直接回复无效</span></span></div></div></html>

下方代码经过格式化，具有可读性，可按需进行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html lang="zh-cn">
    <div style="border-radius:10px 10px 10px 10px;font-size:13px;color:#555;width:666px;font-family:century gothic,trebuchet ms,hiragino sans gb,microsoft yahei,Tahoma,Helvetica,Arial,SimSun,sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background:#fff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 1px 5px rgba(0,0,0,.15)">
        <div style="width:100%;background:#6f71d3;color:#fff;border-radius:10px 10px 0 0;min-height:66px">
            <p style="font-size:15px;padding:23px 32px;margin:0;border-radius:10px 10px 0 0;text-align:center"><strong><a style="text-decoration:none;color:#fff" href="${SITE_URL}" target="_blank" rel="noopener">${SITE_NAME}</a>&nbsp;评论回复通知</strong></p>
        </div>
        <div style="margin:40px auto;width:90%">
            <p><strong>${PARENT_NICK} 同学，您曾在 <a style="text-decoration:none;color:#12addb" href="${SITE_URL}" target="_blank" rel="noopener">${SITE_NAME}</a>&nbsp;中发表评论：</strong></p>
            <div style="background:#fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:14px;color:#555">
                <p>${PARENT_COMMENT}</p>
            </div>
            <p><strong>${NICK} 给您的回复如下：</strong></p>
            <div style="background:#fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:14px;color:#555">
                <p>${COMMENT}</p>
            </div>
        </div>
        <div style="margin:40px auto;width:90%"><strong><a class="post_url" style="min-width:106px;min-height:38px;background:#6f71d3;border-radius:32px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:auto;margin-top:32px" href="${POST_URL}" target="_blank" rel="noopener"><span class="check" style="color:#fff">查看完整回复内容</span></a></strong></div>
        <div style="margin:40px auto;width:90%;text-align:center"><span style="color:#ced4d9"><span class="check">本邮件由 Twikoo 评论系统自动发出 直接回复无效</span></span></div>
    </div>
</html>

新评论通知

复制下方代码，直接粘贴于MAIL_TEMPLATE_ADMIN栏中即可

1
<html lang="zh-cn"><div style="border-radius:10px 10px 10px 10px;font-size:13px;color:#555;width:666px;font-family:century gothic,trebuchet ms,hiragino sans gb,microsoft yahei,Tahoma,Helvetica,Arial,SimSun,sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background:#fff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 1px 5px rgba(0,0,0,.15)"><div style="width:100%;background:#6f71d3;color:#fff;border-radius:10px 10px 0 0;min-height:66px"><p style="font-size:15px;padding:23px 32px;margin:0;border-radius:10px 10px 0 0;text-align:center"><strong><a style="text-decoration:none;color:#fff" href="${SITE_URL}" target="_blank" rel="noopener">${SITE_NAME}</a> 新评论通知</strong></p></div><div style="margin:40px auto;width:90%"><p><strong>${NICK} 同学在 <a style="text-decoration:none;color:#12addb" href="${SITE_URL}" target="_blank" rel="noopener">${SITE_NAME}</a>&nbsp;中发表了评论：</strong></p><div style="background:#fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:14px;color:#555"><p>${COMMENT}</p></div><p><strong>${NICK} 的个人信息如下：</strong></p><div style="background:#fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:14px;color:#555"><p>昵称：${NICK}</p><p>邮箱：${MAIL}</p><p>IP地址：${IP}</p></div></div><div style="margin:40px auto;width:90%"><strong><a class="post_url" style="min-width:106px;min-height:38px;background:#6f71d3;border-radius:32px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:auto;margin-top:32px" href="${POST_URL}" target="_blank" rel="noopener"><span class="check" style="color:#fff">查看完整评论内容</span></a></strong></div><div style="margin:40px auto;width:90%;text-align:center"><span style="color:#ced4d9"><span class="check">本邮件由 Twikoo 评论系统自动发出 直接回复无效</span></span></div></div></html>

下方代码经过格式化，具有可读性，可按需进行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html lang="zh-cn">
    <div style="border-radius:10px 10px 10px 10px;font-size:13px;color:#555;width:666px;font-family:century gothic,trebuchet ms,hiragino sans gb,microsoft yahei,Tahoma,Helvetica,Arial,SimSun,sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background:#fff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 1px 5px rgba(0,0,0,.15)">
        <div style="width:100%;background:#6f71d3;color:#fff;border-radius:10px 10px 0 0;min-height:66px">
            <p style="font-size:15px;padding:23px 32px;margin:0;border-radius:10px 10px 0 0;text-align:center"><strong><a style="text-decoration:none;color:#fff" href="${SITE_URL}" target="_blank" rel="noopener">${SITE_NAME}</a> 新评论通知</strong></p>
        </div>
        <div style="margin:40px auto;width:90%">
            <p><strong>${NICK} 同学在 <a style="text-decoration:none;color:#12addb" href="${SITE_URL}" target="_blank" rel="noopener">${SITE_NAME}</a>&nbsp;中发表了评论：</strong></p>
            <div style="background:#fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:14px;color:#555">
                <p>${COMMENT}</p>
            </div>
            <p><strong>${NICK} 的个人信息如下：</strong></p>
            <div style="background:#fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:14px;color:#555">
                <p>昵称：${NICK}</p>
                <p>邮箱：${MAIL}</p>
                <p>IP地址：${IP}</p>
            </div>
        </div>
        <div style="margin:40px auto;width:90%"><strong><a class="post_url" style="min-width:106px;min-height:38px;background:#6f71d3;border-radius:32px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:auto;margin-top:32px" href="${POST_URL}" target="_blank" rel="noopener"><span class="check" style="color:#fff">查看完整评论内容</span></a></strong></div>
        <div style="margin:40px auto;width:90%;text-align:center"><span style="color:#ced4d9"><span class="check">本邮件由 Twikoo 评论系统自动发出 直接回复无效</span></span></div>
    </div>
</html>