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

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

方案一(简约模板)

1. 预览效果
   
2. 代码

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124

   <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>来自&nbsp;<strong>${NICK}</strong>&nbsp;的回复</h3> </center> <hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;" /><br/>&nbsp;&nbsp; <p>您在<a href="${POST_URL}" style="text-decoration: none; color: #49b1f5" target="_blank">&nbsp;${SITE_NAME}&nbsp;</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>&nbsp;给您回复啦：</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">点击去原文查看&gt;&gt;</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" />&nbsp; <hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;" />©&nbsp;2022&nbsp;<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

1. 效果预览
   
2. MAIL_TEMPLATE代码

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

   <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>

3. MAIL_TEMPLATE_ADMIN代码

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

   <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邮箱无效，手机邮箱可正常预览

1. 效果预览
   
2. MAIL_TEMPLATE代码

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166

   <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(&quot;https://img.lovelu.top/hexo-blog/img/manxin_logo.jpg&quot;); 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; ">嘿！你在&nbsp;${SITE_NAME}&nbsp;博客中收到一条新回复。</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; ">你之前的评论&nbsp;在&nbsp;${SITE_NAME} 博客中收到来自&nbsp;${NICK}&nbsp;的回复</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>

3. MAIL_TEMPLATE_ADMIN

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121

   <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(&quot;https://img.lovelu.top/hexo-blog/img/favicon.ico&quot;); 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; ">嘿！你在&nbsp;${SITE_NAME}&nbsp;博客中收到一条消息。</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文档不提供邮件模板的参数含义，方便魔改，这里附上。

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