Twikoo 评论回复模板：提升网站评论区的外观与体验
AI-摘要
切换
Tianli GPT
AI初始化中...
介绍自己
生成本文简介
推荐相关文章
前往主页
前往tianli博客
前言
逛帖子发现别人的 Twikoo 评论回复邮件界面很漂亮，于是也想给自己的博客搞一下，本文主要将一些精品模板记录一下，方便以后自己查阅，在此感谢模板的制作者。
前置说明
Twikoo 邮件模板参数
Twikoo 邮件模板的参数含义解释如下表所示：
| 参数 | 含义 |
|---|---|
| ${SITE_URL} | 网站链接 |
| ${SITE_NAME} | 网站名字 |
| ${PARENT_NICK} | 被回复人昵称 |
| ${PARENT_COMMENT} | 被回复人的评论内容 |
| ${NICK} | 回复人昵称 |
| ${COMMENT} | 回复人评论内容 |
| ${POST_URL} | 文章链接 |
| ${IMG} | 回复人头像 |
| ${PARENT_IMG} | 被回复人头像 |
| ${MAIL} | 回复人邮件 |
| ${IP} | 回复人 IP 地址 |
配置方法
首先，在「Twikoo 管理面板」->「配置管理」->「通用」中按照说明，填写个人站点信息；
然后，下载模板，并基于模板参数可以选择性的自定义邮件模版代码，修改过程中可以边改边【在线查看】效果。
将修改好的 html 代码用【在线html美化工具】进行压缩代码（这一步可选）
最后，将压缩后的html复制到「Twikoo 管理面板」->「配置管理」->「邮件通知」的 MAIL_TEMPLATE 和 MAIL_TEMPLATE_ADMIN 对应处，单击保存即可。
MAIL_SUBJECT: 这是发送给游客看的通知邮箱主题；
MAIL_TEMPLATE: 游客看到的通知邮箱模板（访客模板😘）；
MAIL_SUBJECT_ADMIN: 这是发给博主看的通知邮件主题，告诉站长你的博客有人来啦！
MAIL_TEMPLATE_ADMIN: 博主看到的通知邮箱模板（博主模版）；
Tip：下面的代码为了方便复制和展示，将源码压缩为一行。
样式一：Heo版
模板说明
Tip：上述模板代码只需要将头像地址更改为你的头像url地址。
原始样式参考【@张洪Heo | Twikoo评论回复邮件模板：Acrylic Mail 粉】
模板代码
MAIL_TEMPLATE
<div style="background:#fff"><div style="display:flex;position:relative;width:100%;height:206px;background-color:#b7dde1;background-image:linear-gradient(45deg,#b7dde1 0,#e2bfbd 100%);top:0;left:0;justify-content:center"><div style="position:absolute;width:152px;height:152px;display:flex;justify-content:center;top:130px"><img src="https://blog-pictures-bucket.oss-cn-beijing.aliyuncs.com/Halo-blog/%E9%9F%A9%E7%AB%8B-%E6%8A%A0%E5%9B%BE%E7%89%88.png" style="width:100%;height:100%;border-radius:50%;border:4px solid #f0f0f2;object-fit:cover"></div></div><div style="margin-top:92px;display:flex;flex-direction:column;align-items:center"><div style="display:flex;flex-direction:column;align-items:center;margin:0 20px"><span style="font-size:26px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#000;line-height:37px;text-align:center">嘿~ 您在 ${SITE_NAME} 博客中收到一条新回复！</span> <span style="font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#00030;line-height:22px;margin-top:21px;text-align:center">一条来自 ${NICK} 的回复~</span></div><div style="margin:0 20px;min-height:128px;background:#f7f9fe;border-radius:12px;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;padding:32px 16px;width:calc(100% - 40px)"><div style="display:flex;flex-direction:column;margin-left:30px;margin-bottom:16px"><span style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#c5343e;line-height:22px">您的评论：</span> <span style="margin-top:6px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:22px">${PARENT_COMMENT}</span></div><hr style="display:flex;position:relative;border:1px dashed #ef859d2e;box-sizing:content-box;height:0;overflow:visible;width:100%"><div style="display:flex;flex-direction:column;margin-left:30px"><hr><span style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#c5343e;line-height:22px">回复者：${NICK}</span> <span style="margin-top:6px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:22px">${COMMENT}</span></div><a style="min-width:106px;height:38px;background:#b7dde1;border-radius:32px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:auto;margin-top:32px" href="${POST_URL}"><span style="color:#000;font-size:14px;font-weight:600">查看详情</span></a></div><div style="display:flex;flex-direction:column;align-items:center;margin-top:34px;margin-bottom:17px"><span style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:17px;opacity:.7">此邮件由评论服务自动发出，直接回复无效！</span> <a 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
<div style="background:#fff"><div style="display:flex;position:relative;width:100%;height:206px;background-color:#b7dde1;background-image:linear-gradient(45deg,#b7dde1 0,#e2bfbd 100%);top:0;left:0;justify-content:center"><div style="position:absolute;width:152px;height:152px;display:flex;justify-content:center;top:130px"><img src="https://blog-pictures-bucket.oss-cn-beijing.aliyuncs.com/Halo-blog/%E9%9F%A9%E7%AB%8B-%E6%8A%A0%E5%9B%BE%E7%89%88.png" style="width:100%;height:100%;border-radius:50%;border:4px solid #f0f0f2;object-fit:cover"></div></div><div style="margin-top:92px;display:flex;flex-direction:column;align-items:center"><div style="display:flex;flex-direction:column;align-items:center;margin:0 20px"><span style="font-size:26px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#000;line-height:37px;text-align:center">嘿~ 您的博客 ${SITE_NAME} 收到一条新回复！</span> <span style="font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#00030;line-height:22px;margin-top:21px;text-align:center">一条来自 ${NICK} 的评论~</span></div><div style="margin:0 20px;min-height:128px;background:#f7f9fe;border-radius:12px;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;padding:32px 16px;width:calc(100% - 40px)"><div style="display:flex;flex-direction:column;margin-left:30px;margin-bottom:16px"><span style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#c5343e;line-height:22px">评论者：${NICK}</span> <span style="margin-top:3px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:700;color:#c5343e;line-height:22px">评论者IP：${IP}</span> <span style="margin-top:3px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:700;color:#c5343e;line-height:22px">评论者邮箱：${MAIL}</span> <span style="margin-top:9px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#c5343e;line-height:22px">文章地址：${POST_URL}</span></div><hr style="display:flex;position:relative;border:1px dashed #ef859d2e;box-sizing:content-box;height:0;overflow:visible;width:100%"><div style="display:flex;flex-direction:column;margin-left:30px"><hr><span style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#c5343e;line-height:22px">评论内容：</span> <span style="margin-top:6px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:22px">${COMMENT}</span></div><a style="min-width:106px;height:38px;background:#b7dde1;border-radius:32px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:auto;margin-top:32px" href="${POST_URL}"><span style="color:#000;font-size:14px;font-weight:600">查看详情</span></a></div><div style="display:flex;flex-direction:column;align-items:center;margin-top:34px;margin-bottom:17px"><span style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:17px;opacity:.7">此邮件由评论服务自动发出，直接回复无效！</span></div></div></div>效果预览
样式二：紫罗兰永恒花园
模板说明
这个模板和我博客的主题很搭配，是我最喜欢的一个模板，使用过程只要修改代码页脚的“沉默の大多数”即可。
原版出自【@爱吃肉的猫 | Twikoo评论回复邮件模版】。
模板代码
MAIL_TEMPLATE
<div><div id="content"><div style="background:#fff8dc;width:95%;max-width:800px;margin:auto auto;border-radius:5px;border:#49b1f5 1px solid;overflow:hidden;-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,.12);box-shadow:0 0 20px 0 rgba(0,0,0,.18)"><header style="overflow:hidden"><img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;z-index:666"></header><div style="padding:5px 20px"><div class="dear" style="position:relative;color:#fff;float:left;z-index:999;background:#49b1f5;padding:5px 30px;margin:-25px auto 0;box-shadow:5px 5px 5px rgba(0,0,0,.3)">亲爱的 ${PARENT_NICK}：</div><br><center><h3>来自 <a style="text-decoration:none;color:#FFAEB9">${NICK}</a> 的回复</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:#FFFACD;margin:15px 0;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">${PARENT_COMMENT}</div><p><a style="text-decoration:none;color:#FFAEB9"> ${NICK}</a> 给您回复啦：</p><div class="tk-content" style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#FFFACD;margin:15px 0;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><p>此邮件由评论服务自动发出，直接回复无效！</p><p><br></p><div class="chakan" style="text-align:center"><a href="${POST_URL}" style="color:#fff;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></div><div class="footer-p" style="text-align:center;margin-top:5rem;display:block;color:#b3b3b1;text-decoration:none"><img src="https://blog-pictures-bucket.oss-cn-beijing.aliyuncs.com/Halo-blog/%E9%9F%A9%E7%AB%8B-%E6%8A%A0%E5%9B%BE%E7%89%88.png" style="width:1.8rem;margin:0 auto"> <hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto">© 2021 - 2024 <a href="${SITE_URL}" style="text-align:center;color:#0da1e6a6" target="_blank">沉默の大多数</a></div></div></div></div><style type="text/css">.qmbox::-webkit-scrollbar{display:none}.qmbox #divNeteaseBigAttach,.qmbox #divNeteaseBigAttach_bak{display:none}.qmbox blockquote{display:none}.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 body,.qmbox button,.qmbox input,.qmbox select,.qmbox td{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 td,.qmbox th{font-family:arial,verdana,sans-serif;line-height:1.666}.qmbox img{border:0}.qmbox article,.qmbox aside,.qmbox figcaption,.qmbox figure,.qmbox footer,.qmbox header,.qmbox hgroup,.qmbox nav,.qmbox section{display:block}.qmbox blockquote{margin-right:0}.qmbox a,.qmbox td a{color:#236da1}@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></div>MAIL_TEMPLATE_ADMIN
<div><div id="content"><div style="background:#fff8dc;width:95%;max-width:800px;margin:auto auto;border-radius:5px;border:#49b1f5 1px solid;overflow:hidden;-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,.12);box-shadow:0 0 20px 0 rgba(0,0,0,.18)"><header style="overflow:hidden"><img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;z-index:666"></header><div style="padding:5px 20px"><div class="dear" style="position:relative;color:#fff;float:left;z-index:999;background:#49b1f5;padding:5px 30px;margin:-25px auto 0;box-shadow:5px 5px 5px rgba(0,0,0,.3)">亲爱的 ${SITE_NAME} 博主：</div><br><center><h3>你的博客收到了一条评论！</h3></center><hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto"><br> <p style="font-weight:700;color:#49b1f5"> 评论者信息： </p><div class="tk-content" style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#FFFACD;margin:15px 0;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">评论者：${NICK}<br>评论者IP：${IP}<br>评论者邮箱：${MAIL}<br>文章评论地址：${POST_URL}</div><p><a style="text-decoration:none;color:#FFAEB9"> ${NICK}</a> 的评论内容：</p><div class="tk-content" style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#FFFACD;margin:15px 0;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">${COMMENT}</div><p>此邮件由评论服务自动发出，直接回复无效！</p><p><br></p><div class="chakan" style="text-align:center"><a href="${POST_URL}" style="color:#fff;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></div><div class="footer-p" style="text-align:center;margin-top:5rem;display:block;color:#b3b3b1;text-decoration:none"><img src="https://blog-pictures-bucket.oss-cn-beijing.aliyuncs.com/Halo-blog/%E9%9F%A9%E7%AB%8B-%E6%8A%A0%E5%9B%BE%E7%89%88.png" style="width:1.8rem;margin:0 auto"> <hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto">© 2021 - 2024 <a href="${SITE_URL}" style="text-align:center;color:#0da1e6a6" target="_blank">沉默の大多数</a></div></div></div></div><style type="text/css">.qmbox::-webkit-scrollbar{display:none}.qmbox #divNeteaseBigAttach,.qmbox #divNeteaseBigAttach_bak{display:none}.qmbox blockquote{display:none}.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 body,.qmbox button,.qmbox input,.qmbox select,.qmbox td{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 td,.qmbox th{font-family:arial,verdana,sans-serif;line-height:1.666}.qmbox img{border:0}.qmbox article,.qmbox aside,.qmbox figcaption,.qmbox figure,.qmbox footer,.qmbox header,.qmbox hgroup,.qmbox nav,.qmbox section{display:block}.qmbox blockquote{margin-right:0}.qmbox a,.qmbox td a{color:#236da1}@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></div>效果展示
样式三：复古信封版
模板说明
这个模板属于那种复古信封的，也挺好看，使用过程无需做任何修改，复制即可使用。
原版出自【@爱吃肉的猫 | Twikoo评论回复邮件模版】。
模板代码
MAIL_TEMPLATE
<div><div style="border-radius:5px;font-size:13px;width:680px;margin:30px auto 0;max-width:100%"><div style="box-shadow:0 0 30px 0 rgb(219 216 214);border-radius:5px;width:630px;margin:auto;max-width:100%;margin-bottom:-30px"><div style="width:200px;height:40px;margin-top:-20px;margin-left:0;text-align:center;line-height:40px;text-decoration:none;color:#fff;background-color:#94a9b9;border-radius:5px 0">Dear: ${PARENT_NICK}</div><div style="line-height:180%;padding:0 15px 12px;margin:30px auto;color:#555;font-size:12px;margin-bottom:0"><h2 style="border-bottom:1px solid #ddd;font-size:14px;font-weight:400;padding:13px 0 10px 8px"><span style="color:#de6561;font-weight:700">></span> 您在<a style="text-decoration:none;color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a> 上的评论有了新的回复呐~</h2><div style="padding:0 12px 0 12px;margin-top:18px"><div class="Messages_box"><p style="display:flex;justify-content:flex-end">您曾评论：</p><div class="ax_post_box-comments-single Messages-author" style="display:flex;justify-content:flex-end;margin-bottom:5px;margin-top:7px"><div class="ax_post_box-comment-avatar" style="width:auto;flex:none;order:2"><img src="${PARENT_IMG}" style="width:40px;height:40px;border-radius:5px"></div><div class="ax_post_box-comment-text" style="position:relative;margin-right:10px"><span class="ax_post_box-comment-text-before" style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid;border-left-color:#f4f4f4;border-right:0;border-right-color:transparent;right:-7px;left:auto;top:12px;position:absolute"></span><div class="ax_post_box-comment-text-inner" style="max-width:506px;background-color:#f1f3fa;padding:10px;border-radius:9px;margin-bottom:3px">${PARENT_COMMENT}</div></div></div><p><strong>${NICK}</strong> 回复您：</p><div class="ax_post_box-comments-single Messages-user" style="display:flex;margin-bottom:5px;margin-top:7px"><div class="ax_post_box-comment-avatar" style="width:auto;flex:none"><img src="${IMG}" style="width:40px;height:40px;border-radius:5px"></div><div class="ax_post_box-comment-text" style="position:relative;margin-left:10px"><span class="ax_post_box-comment-text-before" style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#f4f4f4;left:-7px;right:auto;top:12px;position:absolute"></span><div class="ax_post_box-comment-text-inner" style="max-width:506px;background-color:#f1f3fa;padding:10px;border-radius:9px;margin-bottom:3px">${COMMENT}</div></div></div></div></div></div><div style="text-align:center;margin-right:66px"><a style="text-decoration:none;color:#fff;background-color:#94a9b9;padding:5px 20px;border-radius:4px;position:absolute;margin-top:10px" href="${POST_URL}" target="_blank">查看</a></div></div><div style="width:100%;height:345px;background-repeat:no-repeat;border-radius:5px 5px 0 0;background-image:url(https://s11.ax1x.com/2023/08/27/pPU9Br9.png);background-size:cover;background-position:50% 50%"></div><div style="color:#8c8c8c;font-size:10px;width:100%;text-align:center;margin-top:20px"><p>本邮件为系统自动发送，请勿直接回复~</p></div><div style="color:#8c8c8c;font-size:10px;width:100%;text-align:center;margin-top:5px"><p>Copyright © 2021 - 2024 <a href="${SITE_URL}">${SITE_NAME}</a></p></div></div><style>*{margin:0;padding:0}img{-webkit-user-drag:none;border-radius:3px}ol,ul{margin-left:1rem!important}.tk-owo-emotion{width:35px;height:auto;max-width:300px;max-height:300px;vertical-align:middle}.ax_post_box-comment-text-inner img,.ax_post_box-comment-text-inner p{max-width:506px!important}</style></div>MAIL_TEMPLATE_ADMIN
<div><div style="border-radius:5px;font-size:13px;width:680px;margin:0 auto;max-width:100%"><div style="box-shadow:0 0 30px 0 rgb(219 216 214);border-radius:5px;width:630px;margin:auto;max-width:100%;margin-bottom:-30px"><div style="line-height:180%;padding:0 15px 12px;margin:10px auto;color:#555;font-size:12px;margin-bottom:0"><h2 style="border-bottom:1px solid #ddd;font-size:14px;font-weight:400;padding:13px 0 10px 8px"><span style="color:#de6561;font-weight:700">></span> <a style="text-decoration:none;color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a> 有新的评论了耶~</h2><div style="padding:0 12px 0 12px;margin-top:18px"><div class="Messages_box"><p><strong>${NICK}</strong> 评论：</p><div class="ax_post_box-comments-single Messages-user" style="display:flex;margin-bottom:5px;margin-top:10px"><div class="ax_post_box-comment-avatar" style="width:auto;flex:none"><img src="${IMG}" style="width:40px;height:40px;border-radius:5px"></div><div class="ax_post_box-comment-text" style="position:relative;margin-left:10px"><span class="ax_post_box-comment-text-before" style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#f4f4f4;left:-7px;right:auto;top:12px;position:absolute"></span><div class="ax_post_box-comment-text-inner" style="background-color:#f1f3fa;padding:10px;border-radius:9px;margin-bottom:3px;max-width:506px">${COMMENT}</div></div></div></div><p style="background-color:#f5f5f5;border:0 solid #ddd;padding:10px 15px;margin:18px 0">IP：${IP}<br>邮箱：<a href="mailto:${MAIL}">${MAIL}</a><br>文章地址：${POST_URL}</p></div></div><div style="text-align:center;margin-right:66px"><a style="text-decoration:none;color:#fff;background-color:#94a9b9;padding:5px 20px;border-radius:4px;position:absolute;margin-top:10px" href="${POST_URL}" target="_blank">查看</a></div></div><div style="width:100%;height:345px;background-repeat:no-repeat;border-radius:5px 5px 0 0;background-image:url(https://s11.ax1x.com/2023/08/27/pPU9Br9.png);background-size:cover;background-position:50% 50%"></div><div style="color:#8c8c8c;font-size:10px;width:100%;text-align:center;margin-top:20px"><p>Copyright © 2021 - 2024 <a href="${SITE_URL}">${SITE_NAME}</a></p></div></div><style>*{margin:0;padding:0}a{text-decoration:none;color:#555}img{-webkit-user-drag:none;border-radius:3px}ol,ul{margin-left:1rem!important}.tk-owo-emotion{width:35px;height:auto;max-width:300px;max-height:300px;vertical-align:middle}.ax_post_box-comment-text-inner img,.ax_post_box-comment-text-inner p{max-width:506px!important}</style></div>效果展示
样式四：简约版
模板说明
这个模板很简约，使用过程只要修改代码页脚的“GYHWD.TOP”为自己的域名即可。
原版出自【@爱吃肉的猫 | Twikoo评论回复邮件模版】。
模板代码
MAIL_TEMPLATE
<div style="position:relative;font-size:14px;height:auto;padding:15px 15px 10px 15px;z-index:1;zoom:1;line-height:1.7"><div style="max-width:600px;padding:3rem 1rem 0;margin:auto;font-size:14px;color:#444"><div style="display:flex;height:80px;align-items:flex-end"><img style="border-radius:25%;width:80px;height:80px" src="${PARENT_IMG}"><div style="display:flex;flex-direction:column;justify-content:end;line-height:1.7;margin-left:1rem"><span style="font-size:18px;white-space:nowrap">你好,『 <span style="font-weight:700">${PARENT_NICK}</span> 』</span> <span style="color:#555">您在本站的留言有新的回复。</span></div></div><div style="margin-top:30px"><div style="margin-bottom:30px"><span style="display:flex;align-items:center">${NICK} <span style="font-size:12px;color:#888;margin-left:.5rem">回复说：</span></span><div style="display:flex;flex-direction:column;max-width:100%;margin-top:5px;background:rgb(243 244 246 / 60%)!important;padding:0 1.5rem;border-radius:5px 25px 25px 25px;width:fit-content"><p>${COMMENT}</p></div></div></div><div><a href="${POST_URL}" style="background:#36d1dc!important;background:-webkit-linear-gradient(45deg,#36d1dc,#5b86e5)!important;background:linear-gradient(45deg,#36d1dc,#5b86e5)!important;padding:.5rem 1rem;border-radius:10px;margin-bottom:1rem;box-shadow:0 0 18px rgb(159 198 255);color:#fff;font-size:16px;text-decoration:none;display:block;width:fit-content" rel="noopener" target="_blank">查看详细内容</a><p style="margin:5px!important;color:#888;font-size:12px">此邮件由系统自动发出，请勿直接回复！</p><a href="${SITE_URL}" style="margin:5px;color:#888;font-size:12px;text-decoration:none" rel="noopener" target="_blank">GYHWD.TOP</a></div></div><style type="text/css">.tk-owo-emotion{border-radius:10px;max-width:80px}</style></div>MAIL_TEMPLATE_ADMIN
<div style="position:relative;font-size:14px;height:auto;padding:15px 15px 10px 15px;z-index:1;zoom:1;line-height:1.7"><div style="max-width:600px;padding:3rem 1rem 0;margin:auto;font-size:14px;color:#444"><div style="display:flex;height:80px;align-items:flex-end"><img style="border-radius:25%;width:80px;height:80px" src="https://blog-pictures-bucket.oss-cn-beijing.aliyuncs.com/Halo-blog/%E9%9F%A9%E7%AB%8B-%E6%8A%A0%E5%9B%BE%E7%89%88.png"><div style="display:flex;flex-direction:column;justify-content:end;line-height:1.7;margin-left:1rem"><span style="font-size:18px;white-space:nowrap">你好,『 <span style="font-weight:700">${SITE_NAME}</span> 』博主</span> <span style="color:#555">您的博客收到一条新回复！</span></div></div><div style="margin-top:30px"><div style="margin-bottom:30px;display:grid;justify-content:end;justify-items:end"><span style="display:flex;align-items:center"><span style="font-size:12px;color:#888;margin-left:.5rem">评论者信息</span></span><div style="display:flex;flex-direction:column;max-width:100%;margin-top:5px;background:rgb(243 244 246 / 60%)!important;padding:0 1.5rem;border-radius:25px 5px 25px 25px;width:fit-content"><p>IP：${IP}<br>邮箱地址：${MAIL}<br>文章地址：${POST_URL}</p></div></div><div style="margin-bottom:30px"><span style="display:flex;align-items:center">${NICK} <span style="font-size:12px;color:#888;margin-left:.5rem">回复说：</span></span><div style="display:flex;flex-direction:column;max-width:100%;margin-top:5px;background:rgb(243 244 246 / 60%)!important;padding:0 1.5rem;border-radius:5px 25px 25px 25px;width:fit-content"><p>${COMMENT}</p></div></div></div><div><a href="${POST_URL}" style="background:#36d1dc!important;background:-webkit-linear-gradient(45deg,#36d1dc,#5b86e5)!important;background:linear-gradient(45deg,#36d1dc,#5b86e5)!important;padding:.5rem 1rem;border-radius:10px;margin-bottom:1rem;box-shadow:0 0 18px rgb(159 198 255);color:#fff;font-size:16px;text-decoration:none;display:block;width:fit-content" rel="noopener" target="_blank">查看详细内容</a><p style="margin:5px!important;color:#888;font-size:12px">此邮件由系统自动发出，请勿直接回复！</p><a href="${SITE_URL}" style="margin:5px;color:#888;font-size:12px;text-decoration:none" rel="noopener" target="_blank">GYHWD.TOP</a></div></div><style type="text/css">.tk-owo-emotion{border-radius:10px;max-width:80px}</style></div>效果展示
样式五：运动版
模板说明
此模板无需做任何修改，复制即可使用。
原版出自【@爱吃肉的猫 | Twikoo评论回复邮件模版】。
模板代码
MAIL_TEMPLATE
<div><table bgcolor="#ffffff" width="100%" style="background-color:#fff" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><table width="700" align="center" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F5F8FC" style="background-color:#F5F8FC;font-family:'Microsoft Yahei','PingFang SC','Source Han Sans CN'"><tbody><tr><td align="center" style="font-size:0;padding-left:28px;padding-right:28px;padding-top:28px"><img width="644" src="https://s11.ax1x.com/2023/08/28/pPaY9L4.jpg"></td></tr></tbody></table><table border="0" cellpadding="0" bgcolor="#f5f8fc" cellspacing="0" width="100%"><tbody><tr><td style="padding-left:28px;padding-right:28px;padding-bottom:28px"><table border="0" cellpadding="0" bgcolor="#ffffff" cellspacing="0" width="100%" style="border-spacing:0;font-family:'PingFang SC','Microsoft Yahei','Source Han Sans CN'"><tbody><tr><td style="padding-top:46px;padding-right:28px;padding-bottom:40px;padding-left:28px"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed;line-height:1;font-weight:700"><tbody><tr><td valign="top" style="width:100%"><table border="0" cellpadding="0" cellspacing="0" style="font-weight:700;display:flex;justify-content:center"><tbody><tr><td valign="top" style="text-align:left;color:#282B2D;font-size:26px"><a style="text-decoration:none;color:#282B2D" target="_blank" href="${POST_URL}" rel="noopener">《${SITE_NAME}》</a> 中您曾评论：</td></tr></tbody></table></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" style="line-height:1;display:flex;justify-content:center"><tbody><tr><td style="padding-top:22px;padding-bottom:40px"><table border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;color:#666"><tbody><tr><td style="font-size:26px"><span style="text-decoration:none;font-size:18px;color:#666">${PARENT_COMMENT}</span></td></tr></tbody></table></td></tr></tbody></table><table width="100%" style="line-height:1;border-spacing:0"><tbody><tr><td style="padding:24px 20px 24px 20px;background:#F5F8FC;border:1px solid #F0F0F0"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td width="76" height="76"><img width="76" style="display:block;max-width:100%;max-height:100%" src="https://s11.ax1x.com/2023/08/28/pPaYpyF.png"></td><td><table cellspacing="0" cellpadding="0" style="line-height:38px;border-spacing:0"><tbody><tr><td align="left" style="padding-left:16px;color:#666;font-size:20px;width:450px;display:block"><span style="color:#666">${NICK} 回复说：</span></td></tr><tr><td align="left" style="padding-left:16px;color:#282B2D;font-size:22px;width:450px;display:block"><span style="text-decoration:none;color:#282B2D">${COMMENT}</span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table width="100%" style="line-height:1;border-spacing:0"><tbody><tr><td><table width="100%" style="border-spacing:0"><tbody><tr><td style="background:#2475E7;height:88px;color:#fff;font-size:30px;text-align:center"><a style="text-decoration:none;color:#fff" target="_blank" href="${POST_URL}" rel="noopener"><span width="642" height="90">查看详情</span></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><div style="text-align:center;margin:1.25rem 0">这是由系统自动发送的电子邮件，请勿在此直接回复！</div></div>MAIL_TEMPLATE_ADMIN
<div><table bgcolor="#ffffff" width="100%" style="background-color:#fff" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><table width="700" align="center" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F5F8FC" style="background-color:#F5F8FC;font-family:'Microsoft Yahei','PingFang SC','Source Han Sans CN'"><tbody><tr><td align="center" style="font-size:0;padding-left:28px;padding-right:28px;padding-top:28px"><img width="644" src="https://s11.ax1x.com/2023/08/28/pPaY9L4.jpg"></td></tr></tbody></table><table border="0" cellpadding="0" bgcolor="#f5f8fc" cellspacing="0" width="100%"><tbody><tr><td style="padding-left:28px;padding-right:28px;padding-bottom:28px"><table border="0" cellpadding="0" bgcolor="#ffffff" cellspacing="0" width="100%" style="border-spacing:0;font-family:'PingFang SC','Microsoft Yahei','Source Han Sans CN'"><tbody><tr><td style="padding-top:46px;padding-right:28px;padding-bottom:40px;padding-left:28px"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed;line-height:1;font-weight:700"><tbody><tr><td valign="top" style="width:100%"><table border="0" cellpadding="0" cellspacing="0" style="font-weight:700;display:flex;justify-content:center"><tbody><tr><td valign="top" style="text-align:left;color:#282B2D;font-size:26px">您的博客有了新的回复！</td></tr></tbody></table></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" style="line-height:1;display:flex;justify-content:center"><tbody><tr><td style="padding-top:22px;padding-bottom:40px"><table border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;color:#666"><tbody><tr><td style="display:grid;justify-items:center"><span style="font-size:18px;color:#666">${IP} · ${MAIL}</span> <span style="font-size:18px;color:#666">${POST_URL}</span></td></tr></tbody></table></td></tr></tbody></table><table width="100%" style="line-height:1;border-spacing:0"><tbody><tr><td style="padding:24px 20px 24px 20px;background:#F5F8FC;border:1px solid #F0F0F0"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td width="76" height="76"><img width="76" style="display:block;max-width:100%;max-height:100%" src="https://s11.ax1x.com/2023/08/28/pPaYpyF.png"></td><td><table cellspacing="0" cellpadding="0" style="line-height:38px;border-spacing:0"><tbody><tr><td align="left" style="padding-left:16px;color:#666;font-size:20px;width:450px;display:block"><span style="color:#666">${NICK} 回复说：</span></td></tr><tr><td align="left" style="padding-left:16px;color:#282B2D;font-size:22px;width:450px;display:block"><span style="text-decoration:none;color:#282B2D">${COMMENT}</span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table width="100%" style="line-height:1;border-spacing:0"><tbody><tr><td><table width="100%" style="border-spacing:0"><tbody><tr><td style="background:#2475E7;height:88px;color:#fff;font-size:30px;text-align:center"><a style="text-decoration:none;color:#fff" target="_blank" href="${POST_URL}" rel="noopener"><span width="642" height="90">查看详情</span></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><div style="text-align:center;margin:1.25rem 0">这是由系统自动发送的电子邮件，请勿在此直接回复！</div></div>效果展示
样式六：冰刻无痕版
模板说明
本样式出自【@ 冰刻无痕 | twikoo评论系统及邮件通知配置】，此模板无需修改，复制即可使用。
MAIL_TEMPLATE
<div style="background-image:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg.jpg);background-color:#ded8ca;width:100%"><div style="background:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/leisi-714x62.png) repeat-y scroll top"><div style="font-size:14px;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:#cc80803d;box-shadow:0 1px 5px rgba(0,0,0,.15);margin:auto"><img class="headerimg no-lightbox entered loaded" src="https://blog-pictures-bucket.oss-cn-beijing.aliyuncs.com/Halo-blog/%E5%8A%A8%E6%BC%AB%E4%BA%BA%E7%89%A9/016.webp" style="width:100%;overflow:hidden;pointer-events:none" data-ll-status="loaded"><div style="width:100%;background-image:-moz-linear-gradient(0deg,#43c6b8,#ffd1f4);height:66px;background:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;color:#9d2850"><p style="font-size:16px;font-weight:700;text-align:center;word-break:break-all;padding:23px 32px;margin:0;border-radius:10px 10px 0 0">您在<a style="text-decoration:none;color:#9d2850" href="${SITE_URL}" target="_blank">『${SITE_NAME}』上的留言有新回复啦！</a></p></div><div style="margin:40px auto;width:90%"><p>Hi，<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:15px;color:#555">${COMMENT}</div><p><strong>${PARENT_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:15px;color:#555">${PARENT_COMMENT}</div><p>您可以<strong style="color:#cf5c83">点击查看详情</strong>，欢迎再次光临<a style="text-decoration:none;color:#cf5c83" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>。</p><div style="text-align:center"><p style="border-radius:50px;padding:10px;background:#fafafa;display:inline-block"><a style="text-decoration:none;color:#cf5c83" href="${POST_URL}" target="_blank">点击查看详情>></a></p></div><hr><p style="font-size:14px;color:#b7adad">本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。<br></p></div></div></div></div>MAIL_TEMPLATE_ADMIN
<div style="background-image:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg.jpg);background-color:#ded8ca;width:100%"><div style="background:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/leisi-714x62.png) repeat-y scroll top"><div style="font-size:14px;color:#555;width:666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,SimSun,sans-serif;border:1px solid #eee;max-width:100%;background:#cc80803d;box-shadow:0 1px 5px rgba(0,0,0,.15);margin:auto"><img class="headerimg no-lightbox entered loaded" src="https://blog-pictures-bucket.oss-cn-beijing.aliyuncs.com/Halo-blog/%E5%8A%A8%E6%BC%AB%E4%BA%BA%E7%89%A9/016.webp" style="width:100%;overflow:hidden;pointer-events:none" data-ll-status="loaded"><div style="width:100%;color:#9d2850;background-image:-moz-linear-gradient(0deg,#43c6b8,#ffd1f4);height:66px;background:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat"><p style="font-size:16px;font-weight:700;text-align:center;word-break:break-all;padding:23px 32px;margin:0;border-radius:10px 10px 0 0">您在<a style="text-decoration:none;color:#9d2850" href="${SITE_URL}" target="_blank">『${SITE_NAME}』</a>博客中收到新回复</p></div><div style="margin:40px auto;width:90%"><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:15px;color:#555">${COMMENT}</div><div style="text-align:center"><p style="border-radius:50px;padding:10px;background:#fafafa;display:inline-block"><a style="text-decoration:none;color:#cf5c83" href="${POST_URL}" target="_blank">点击查看详情>></a></p></div></div></div></div></div>效果展示
参考链接
[1]:https://blog.zhheo.com/p/169a1abb.html
阅读建议
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果
