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://qq.mba/" 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的模板)
- 效果预览
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 地址 |
发表评论