Twikoo自定义邮件模板方案及使用方法

2022年12月21日 44

技术

twikoo邮件通知自带模板，不忍直视，还是决定调整一下，自己写了一个简约模板，同时借鉴了Akilar、Heo邮件模板，并做了一些微调，统一放出来，方便切换使用

方案一(简约模板)

预览效果

代码

<div>
<div id="isForwardContent">
    <div>
        <div id="content">
            <div style="background: white;width: 95%;max-width: 800px;margin: auto auto;         border-radius: 5px;border: #49b1f5 1px solid;overflow: hidden;-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);">
                <header style="overflow: hidden"></header>
                <div style="padding: 5px 20px">
                    <div class="dear" style="position: relative;color: white;float: left;z-index: 999;background: #49b1f5;padding: 5px 30px;  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);">Dear ${PARENT_NICK}</div><br/>
                    <center>
                        <h3>来自 <strong>${NICK}</strong> 的回复</h3>
                    </center>
                    <hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;" /><br/>  
                    <p>您在<a href="${POST_URL}" style="text-decoration: none; color: #49b1f5" target="_blank"> ${SITE_NAME} </a>上发表的评论：</p>
                    <div class="tk-content" style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #eee; margin: 15px 0px; padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid;  padding-top: 20px;">${PARENT_COMMENT}</div>
                    <p><strong>${NICK}</strong> 给您回复啦：</p>
                    <div class="tk-content" style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #eee;  margin: 15px 0px;  padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid; padding-top: 20px; ">${COMMENT}</div>
                    <p>欢迎再次光临<a style="text-decoration:none; color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>！</p><br/>
                    <div class="chakan" style="text-align: center;"><a href="${POST_URL}" style="color:#ffffff;text-decoration:none;display:inline-block;min-height:28px;line-height:28px;padding:0 13px;outline:0;background:#3eae5f;font-size:13px;text-align: center;font-weight:400;border:0;border-radius:999em"
                            target="_blank">点击去原文查看>></a>
                        <p></p>
                    </div>
                    <div class="footer-p" style="text-align: center; margin-top: 5rem; display:block;color:#b3b3b1;text-decoration:none;"><img src="https://img.lovelu.top/hexo-blog/img/manxin_logo.jpg" style="width:1.8rem; margin:0 auto" /> 
                        <hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;" />© 2022 <a href="https://blog.lovelu.top/" style="text-align:center; color: #0da1e6a6" target="_blank">lovelu.top</a>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div><br/></div>
<style type="text/css">
    .qmbox::-webkit-scrollbar {
        display: none
    }
</style>
<style id="cloudAttachStyle" type="text/css">
    .qmbox#divNeteaseBigAttach,
    .qmbox#divNeteaseBigAttach_bak {
        display: none
    }
</style>
<style id="blockquoteStyle" type="text/css">
    .qmbox blockquote {
        display: none
    }
</style>
<style type="text/css">
    .qmbox body {
        font-size: 14px;
        font-family: arial, verdana, sans-serif;
        line-height: 1.666;
        padding: 0;
        margin: 0;
        overflow: auto;
        white-space: normal;
        word-wrap: break-word;
        min-height: 100px
    }

    .qmbox td,
    .qmbox input,
    .qmbox button,
    .qmbox select,
    .qmbox body {
        font-family: Helvetica, 'Microsoft Yahei', verdana
    }

    .qmbox pre {
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        width: 95%
    }

    .qmbox th,
    .qmbox td {
        font-family: arial, verdana, sans-serif;
        line-height: 1.666
    }

    .qmbox img {
        border: 0
    }

    .qmbox header,
    .qmbox footer,
    .qmbox section,
    .qmbox aside,
    .qmbox article,
    .qmbox nav,
    .qmbox hgroup,
    .qmbox figure,
    .qmbox figcaption {
        display: block
    }

    .qmbox blockquote {
        margin-right: 0px
    }
</style>
<style type="text/css">
    @media screen and(max-width:1100px) {
        #content p {
            font-size: 10px
        }
        #content h3 {
            font-size: 14px
        }
        .footer-p {
            font-size: 9px
        }
        .dear {
            font-size: 12px
        }
    }
</style>
<style id="ntes_link_color" type="text/css">
    .qmbox a,
    .qmbox td a {
        color: #236da1
    }
</style>
</div>

方案二(基于Akilar的模板)

作者Akilar

效果预览

MAIL_TEMPLATE代码

<head>
<base target="_blank" />
<style id="scrollbar" type="text/css">
     ::-webkit-scrollbar {
        width: 0!important
    }
    pre {
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space: normal!important
    }
    pre {
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space: normal!important
    }
    #letter img {
        max-width: 300px
    }
</style>
<style id="from-wrapstyle" type="text/css">
    #form-wrap {
        overflow: hidden;
        height: 447px;
        position: relative;
        top: 0px;
        transition: all 1s ease-in-out.3s;
        z-index: 0
    }
</style>
<style id="from-wraphoverstyle" type="text/css">
    #form-wrap:hover {
        height: 1300px;
        top: -200px
    }
</style>
</head>
<body>
<div style="width: 530px;margin: 20px auto 0;height: 1000px;">
    <div id="form-wrap"><img src="https://img.lovelu.top/2022/12/before.png" alt="before" style="position: absolute;bottom: 126px;left: 0px;background-repeat: no-repeat;width: 530px;height: 317px;z-index:-100">
        <div style="position: relative;overflow: visible;height: 1500px;width: 500px;margin: 0px auto;transition: all 1s ease-in-out .3s;padding-top:200px;" <form>
            <div style="background: white;width: 95%;max-width: 800px;margin: auto auto;border-radius: 5px;border: 1px solid;overflow: hidden;-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);"><img style="width:100%;overflow: hidden;" src="https://img.lovelu.top/2022/12/violet.jpg" />
                <div style="padding: 5px 20px;"><br>
                    <div>
                        <h3 style="text-decoration: none; color: rgb(246, 214, 175);">${PARENT_NICK}，见信安：</h3>
                    </div><br>
                    <div id="letter" style="overflow:auto;height:300px;width:100%;display:block;word-break: break-all;word-wrap: break-word;">
                        <p style="display: inline-block;">您在<a style="text-decoration: none;color: rgb(246, 214, 175)" target="_blank" href="${POST_URL} display: inline-block;">${SITE_NAME}</a>上发表的评论:</p>
                        <div style="border-bottom: #ddd 1px solid;border-left: #ddd 1px solid;padding-bottom: 20px;background-color: #eee;margin: 15px 0px;padding-left: 20px;padding-right: 20px;border-top: #ddd 1px solid;border-right: #ddd 1px solid;padding-top: 20px;font-family: "
                            Arial ", "Microsoft YaHei " , "黑体 " , "宋体 " , sans-serif;">${PARENT_COMMENT}</div>
                        <p>收到了来自${NICK}的回复：</p>
                        <div style="border-bottom: #ddd 1px solid;border-left: #ddd 1px solid;padding-bottom: 20px;background-color: #eee;margin: 15px 0px;padding-left: 20px;padding-right: 20px;border-top: #ddd 1px solid;border-right: #ddd 1px solid;padding-top: 20px;font-family: "
                            Arial ", "Microsoft YaHei " , "黑体 " , "宋体 " , sans-serif;">${COMMENT}</div>
                    </div><br>
                    <div style="text-align: center;margin-top: 40px;"><img src="https://img.lovelu.top/2022/12/line.png" alt="hr" style="width:100%; margin:5px auto 5px auto; display: block;" /><a style="text-transform: uppercase;text-decoration: none;font-size: 14px;border: 2px solid #6c7575;color: #2f3333;padding: 10px;display: inline-block;margin: 10px auto 0;background-color: rgb(246, 214, 175);"
                            target="_blank" href="${POST_URL}">${SITE_NAME}｜请您签收~</a></div>
                    <p style="font-size: 12px;text-align: center;color: #999;">自动书记人偶竭诚为您服务！<br>©2023<a style="text-decoration:none; color:rgb(246, 214, 175)" href="${SITE_URL}">${SITE_NAME}</a></p>
                </div>
            </div>
            </form>
        </div><img src="https://img.lovelu.top/2022/12/after.png" alt="after" style="      position: absolute;bottom: -2px;left: 0;background-repeat: no-repeat;width: 530px;height: 259px;z-index:100"></div>
</div>
</body>

MAIL_TEMPLATE_ADMIN代码

<head>
<base target="_blank" />
<style id="scrollbar" type="text/css">
     ::-webkit-scrollbar {
        width: 0!important
    }
    pre {
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space: normal!important
    }
    #letter img {
        max-width: 300px
    }
</style>
<style id="from-wrapstyle" type="text/css">
    #form-wrap {
        overflow: hidden;
        height: 447px;
        position: relative;
        top: 0px;
        transition: all 1s ease-in-out.3s;
        z-index: 0
    }
</style>
<style id="from-wraphoverstyle" type="text/css">
    #form-wrap:hover {
        height: 1300px;
        top: -200px
    }
</style>
</head>
<body>
<div style="width: 530px;margin: 20px auto 0;height: 1000px;">
    <div id="form-wrap"><img src="https://img.lovelu.top/2022/12/before.png" alt="before" style="position: absolute;bottom: 126px;left: 0px;background-repeat: no-repeat;width: 530px;height: 317px;z-index:-100">
        <div style="position: relative;overflow: visible;height: 1500px;width: 500px;margin: 0px auto;transition: all 1s ease-in-out .3s;padding-top:200px;">
            <form>
                <div style="background: white;width: 95%;max-width: 800px;margin: auto auto;border-radius: 5px;border: 1px solid;overflow: hidden;-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);"><img style="width:100%;overflow: hidden;" src="https://img.lovelu.top/2022/12/violet.jpg" />
                    <div style="padding: 5px 20px;"><br>
                        <div>
                            <h3 style="text-decoration: none; color: rgb(246, 214, 175);">来自${NICK}的留言:</h3>
                        </div><br><br>
                        <div id="letter" style="overflow:auto;height:300px;width:100%;display:block;word-break: break-all;word-wrap: break-word;">
                            <div style="border-bottom: #ddd 1px solid;border-left: #ddd 1px solid;padding-bottom: 20px;background-color: #eee;margin: 15px 0px;padding-left: 20px;padding-right: 20px;border-top: #ddd 1px solid;border-right: #ddd 1px solid;padding-top: 20px;font-family: "
                                Arial ", "Microsoft YaHei " , "黑体 " , "宋体 " , sans-serif;">${COMMENT}</div>
                        </div>
                        <div style="text-align: center;margin-top: 40px;"><img src="https://img.lovelu.top/2022/12/line.png" alt="hr" style="width:100%; margin:5px auto 5px auto; display: block;" /><a style="text-transform: uppercase;text-decoration: none;font-size: 14px;border: 2px solid #6c7575;color: #2f3333;padding: 10px;display: inline-block;margin: 10px auto 0;background-color: rgb(246, 214, 175);"
                                target="_blank" href="${POST_URL}">${SITE_NAME}｜请您过目~</a></div>
                        <p style="font-size: 12px;text-align: center;color: #999;">自动书记人偶竭诚为您服务！<br>©2020<a style="text-decoration:none; color:rgb(246, 214, 175)" href="${SITE_URL}">${SITE_NAME}</a></p>
                    </div>
                </div>
            </form>
        </div><img src="https://img.lovelu.top/2022/12/after.png" alt="after" style="      position: absolute;bottom: -2px;left: 0;background-repeat: no-repeat;width: 530px;height: 259px;z-index:100"></div>
</div>
</body>

方案三(基于heo模板)

作者Heo
在原作者基础上，进行了微调，并添加了头像呼吸效果，在电脑QQ邮箱无效，手机邮箱可正常预览

效果预览

MAIL_TEMPLATE代码

<div class="page flex-col">
<div class="box_3 flex-col" style="
display: flex;
position: relative;
width: 100%;
height: 206px;
background: #ef859d2e;
top: 0;
left: 0;
justify-content: center;
">
    <div class="section_1 flex-col" style="
background-image: url("https://img.lovelu.top/hexo-blog/img/manxin_logo.jpg");
position: absolute;
width: 152px;
height: 152px;
display: flex;
top: 130px;
background-size: cover;
"></div>
</div>
<div class="box_4 flex-col" style="
margin-top: 92px;
display: flex;
flex-direction: column;
align-items: center;
">
    <div class="text-group_5 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;
">
        <span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #000000;
line-height: 37px;
text-align: center;
">嘿！你在 ${SITE_NAME} 博客中收到一条新回复。</span>
        <span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #00000030;
line-height: 22px;
margin-top: 21px;
text-align: center;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</span>
    </div>
    <div class="box_2 flex-row" style="
margin: 0 20px;
min-height: 128px;
background: #F7F7F7;
border-radius: 12px;
margin-top: 34px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 32px 16px;
width: calc(100% - 40px);
">

        <div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
flex-direction: column;
margin-left: 30px;
margin-bottom: 16px;
">
            <span class="text_3" style="
height: 22px;
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #C5343E;
line-height: 22px;
">${PARENT_NICK}</span>
            <span class="text_4" style="
margin-top: 6px;
margin-right: 22px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 22px;
">${PARENT_COMMENT}</span>
        </div>
        <hr style="
  display: flex;
  position: relative;
  border: 1px dashed #ef859d2e;
  box-sizing: content-box;
  height: 0px;
  overflow: visible;
  width: 100%;
">
        <div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
flex-direction: column;
margin-left: 30px;
">
            <hr>
            <span class="text_3" style="
height: 22px;
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #C5343E;
line-height: 22px;
">${NICK}</span>
            <span class="text_4" style="
margin-top: 6px;
margin-right: 22px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 22px;
">${COMMENT}</span>
        </div>
        <a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #ef859d38;
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
            <span class="text_5" style="
color: #DB214B;
">查看详情</span>
        </a>
    </div>
    <div class="text-group_6 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin-top: 34px;
">
        <span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #00000045;
line-height: 17px;
">此邮件由评论服务自动发出，直接回复无效。</span>
        <a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #DB214B;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
" href="${SITE_URL}">前往博客</a>
    </div>
</div>
</div>

MAIL_TEMPLATE_ADMIN

<style>
@keyframes huxi {
0% {
    opacity: .2;
    transform: scale(.8);
    transform: translateY(10px);
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
}
100% {
    opacity: 1;
    transform: scale(1);
    transform: translateY(-10px);
    box-shadow: 0 1px 30px rgba(197, 52, 62, 1);
}
}
</style>
<div class="page flex-col">
<div class="box_3 flex-col" style="
        display: flex;
        position: relative;
        width: 100%;
        height: 206px;
        background: #ef859d2e;
        top: 0;
        left: 0;
        justify-content: center;
      ">
    <div class="section_1 flex-col" style="background-image: url("https://img.lovelu.top/hexo-blog/img/favicon.ico");  position: absolute;  width: 152px;  height: 152px;  display: flex;  top: 130px;  background-size: cover;border-radius: 50%;animation: huxi 1200ms ease-out infinite alternate;"></div>
</div>
<div class="box_4 flex-col" style="
        margin-top: 92px;
        display: flex;
        flex-direction: column;
        align-items: center;
      ">
    <div class="text-group_5 flex-col justify-between" style="
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 20px;
      ">
        <span class="text_1" style="
        font-size: 26px;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #000000;
        line-height: 37px;
        text-align: center;
      ">嘿！你在 ${SITE_NAME} 博客中收到一条消息。</span>
    </div>
    <div class="box_2 flex-row" style=" margin: 0 20px;  min-height: 128px;  background: #F7F7F7;  border-radius: 12px;  margin-top: 34px;  display: flex;  flex-direction: column;  align-items: flex-start;  padding: 32px 16px;
      ">
        <div class="text-wrapper_4 flex-col justify-between" style="
        display: flex;
        flex-direction: column;
        margin-left: 30px;
      ">
            <hr>
            <span class="text_3" style="
        height: 22px;
        font-size: 16px;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #C5343E;
        line-height: 22px;
      ">${NICK}</span>
            <span class="text_4" style="
        margin-top: 6px;
        margin-right: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
      ">${COMMENT}</span>
        </div>

        <a class="text-wrapper_2 flex-col" style="
        min-width: 106px;
        height: 38px;
        background: #ef859d38;
        border-radius: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        margin: auto;
        margin-top: 32px;
      " href="${POST_URL}">
            <span class="text_5" style="
        color: #DB214B;
      ">查看详情</span>
        </a>
    </div>
    <div class="text-group_6 flex-col justify-between" style="
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 34px;
      ">
        <span class="text_6" style="
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #00000045;
        line-height: 17px;
      ">此邮件由评论服务自动发出，直接回复无效。</span>
        <a class="text_7" style="
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #DB214B;
        line-height: 17px;
        margin-top: 6px;
        text-decoration: none;
      " href="${SITE_URL}">前往博客</a>
    </div>
</div>
</div>

如何使用

在Twikoo后台进入邮件通知，将以上html代码，复制到MAIL_TEMPLATE和MAIL_TEMPLATE_ADMIN中，保存即可

Twikoo邮件自定义字段

Twikoo文档不提供邮件模板的参数含义，方便魔改，这里附上。

参数	释义
${SITE_URL}	网站地址
${SITE_NAME}	网站名
${PARENT_NICK}	被回复人昵称
${PARENT_COMMENT}	被回复人的评论内容
${NICK}	回复人昵称
${COMMENT}	回复人评论内容
${POST_URL}	文章链接
${IMG}	回复人头像
${PARENT_IMG}	被回复人头像
${MAIL}	回复人邮件
${IP}	回复人 IP 地址

参考：Twikoo评论回复邮件模板：Acrylic Mail 粉

Comments | NOTHING

空空如也！

技术

晒物

生活

笔记

美食

Twikoo自定义邮件模板方案及使用方法

方案一(简约模板)

方案二(基于Akilar的模板)

方案三(基于heo模板)

如何使用

Twikoo邮件自定义字段

借助Frp搭建内网主机穿透服务

博客迁移使用说明

好用的书签导航工具-Mtab

这个世界我们只来一次

PIX头像添加黄V认证图标

PIX源码设置及bug处理