Twikoo 评论提醒邮件模板美化
文章摘要
静莹莹
前言
嗨！欢迎回来！
最近不是有人问我配置主题的事吗，就问我我的 Twikoo 评论提醒邮件模板是怎么写的，我才想起来我的模板还用的是默认的呢，其实我从这个博客刚开始配置还没有上线的时候就想给我的评论提醒邮件模板美化一下的，但是后面因为懒一直都没有做，正好今天有兴致我赶紧把它做出来了写了一篇文章，要不然不知道还要拖到什么时候呢。
我用的模板基本上是基于@HEO大佬的模板魔改的，他的链接我会放在下面，因为我的模板自定义起来还挺麻烦的，如果不想折腾这么多的话就可以直接用他的。
这次主要魔改了以下几项：
- 将页面布局由 flex 改为表格布局，解决 Gmail 格式混乱问题
- 添加背景图像功能（图片失效时回退为黄色背景）
- 主色调改为黄色（符合本博客风格）
尚未解决的问题：
- 头像定位在Gmail/Outlook中失效（临时解决方法：选一张主体不在中间的图片）
那么我们话不多说，先看看效果吧！
效果展示
效果展示
Gmail（Outlook同）：
QQ：
博主提醒（Outlook）：
手机端（苹果自带邮件）：
.webp)
这里我是让静莹莹帮我全权代理了评论邮件的收发，所以这里写的是她的名字，到时候我提供的代码里面不会显示这一行，大家想要的话可以自己加（还不知道静莹莹是谁的可以看看下面这篇文章，不过她整天都在博客上面晃悠应该没有人不认识她了吧(。・ω・。)）
代码
下面是邮件样式完整的代码，其实就是html啦，有需要可以自取哦！
访客提醒（未压缩版）
1 | <table width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, sans-serif; "> |
博主提醒（未压缩版）
1 | <table width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, sans-serif;"> |
访客提醒（压缩版）
1 | <table width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, sans-serif; "> <tr> <td align="center" style="background-color: #fccb1a; background-image: url('替换为背景图片链接'); background-size: cover; background-position: center center; height: 320px; position: relative;"> <table cellpadding="0" cellspacing="0" border="0" style=" position: relative; height: 100%;"> <tr> <td align="center" valign="bottom" style="padding-bottom: 76px;"> <img src="替换为头像链接" width="152" height="152" style="width: 152px; height: 152px; background-size: cover; border-radius: 1000px; display: block; position: relative; top: 150px;"> </td> </tr> </table> </td> </tr> <tr> <td align="center" style="padding-top: 92px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px;"> <tr> <td align="center" style="padding: 0 20px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center"> <span style="font-size: 26px; font-family: PingFang-SC-Bold, PingFang-SC, Arial; font-weight: bold; color: #000000; line-height: 37px; text-align: center; display: block;"> 嗨！我是（替换为你的名字或者连着后面的<\br>一起删掉）！<br>您在 ${SITE_NAME} 博客里面的评论收到回复啦！ </span> </td> </tr> <tr> <td align="center" style="padding-top: 21px;"> <span style="font-size: 16px; font-family: PingFang-SC-Bold, PingFang-SC, Arial; font-weight: bold; color: #00000030; line-height: 22px; text-align: center; display: block;"> 你之前 在 ${SITE_NAME} 博客中的评论收到来自 ${NICK} 的回复 </span> </td> </tr> </table> </td> </tr> <tr> <td align="center" style="padding: 34px 20px 0 20px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background: #F7F7F7; border-radius: 12px; min-height: 128px;"> <tr> <td style="padding: 32px 16px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="padding: 0 30px 16px 30px;"> <span style="height: 22px; font-size: 16px; font-family: PingFang-SC-Bold, PingFang-SC, Arial; font-weight: bold; color: #fccb1a; line-height: 22px; display: block;"> ${PARENT_NICK} </span> <span style="margin-top: 6px; margin-right: 22px; font-size: 16px; font-family: PingFangSC-Regular, PingFang SC, Arial; font-weight: 400; color: #000000; line-height: 22px; display: block;"> ${PARENT_COMMENT} </span> </td> </tr> </table> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="padding: 0 0 16px 0;"> <hr style="border: 1px dashed #e2a31c2e; height: 0px; margin: 0; width: 100%;"> </td> </tr> </table> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="padding: 0 30px;"> <span style="height: 22px; font-size: 16px; font-family: PingFang-SC-Bold, PingFang-SC, Arial; font-weight: bold; color: #C5343E; line-height: 22px; display: block;"> ${NICK} </span> <span style="margin-top: 6px; margin-right: 22px; font-size: 16px; font-family: PingFangSC-Regular, PingFang SC, Arial; font-weight: 400; color: #000000; line-height: 22px; display: block;"> ${COMMENT} </span> </td> </tr> </table> <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 32px;"> <tr> <td align="center"> <a href="${POST_URL}" style="min-width: 106px; height: 38px; background: #e2a31c38; border-radius: 32px; display: inline-block; text-decoration: none; line-height: 38px; text-align: center;"> <span style="color: #e2a31c; font-size: 16px;">查看详情</span> </a> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="center" style="padding-top: 34px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center"> <span style="height: 17px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC, Arial; font-weight: 400; color: #00000045; line-height: 17px; display: block;"> 这封邮件是由评论服务自动发出的，请到博客里回复哦 </span> <a href="${SITE_URL}" style="height: 17px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC, Arial; font-weight: 400; color: #fccb1a; line-height: 17px; margin-top: 6px; text-decoration: none; display: inline-block;"> 前往博客 </a> </td> </tr> </table> </td> </tr> </table> </td> </tr></table> |
博主提醒（压缩版）
1 | <table width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, sans-serif;"> <tr> <td align="center" style="background-color: #fccb1a; background-image: url('替换为背景图片链接'); background-size: cover; background-position: center center; height: 320px; position: relative;"> <table cellpadding="0" cellspacing="0" border="0" style="position: relative; height: 100%;"> <tr> <td align="center" valign="bottom" style="padding-bottom: 76px;"> <img src="替换为头像链接" width="152" height="152" style="width: 152px; height: 152px; background-size: cover; border-radius: 1000px; display: block; position: relative; top: 150px;"> </td> </tr> </table> </td> </tr> <tr> <td align="center" style="padding-top: 92px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px;"> <tr> <td align="center" style="padding: 0 20px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center"> <span style="font-size: 26px; font-family: PingFang-SC-Bold, PingFang-SC, Arial; font-weight: bold; color: #000000; line-height: 37px; text-align: center; display: block;"> 嗨，${SITE_NAME} 博客里面又有评论啦！ </span> </td> </tr> <tr> <td align="center" style="padding-top: 21px;"> <span style="font-size: 16px; font-family: PingFang-SC-Bold, PingFang-SC, Arial; font-weight: bold; color: #00000030; line-height: 22px; text-align: center; display: block;"> ${SITE_NAME} 博客中来自 ${NICK} 的评论： </span> </td> </tr> </table> </td> </tr> <tr> <td align="center" style="padding: 34px 20px 0 20px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background: #F7F7F7; border-radius: 12px; min-height: 128px;"> <tr> <td style="padding: 32px 16px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="padding: 0 30px;"> <span style="height: 22px; font-size: 16px; font-family: PingFang-SC-Bold, PingFang-SC, Arial; font-weight: bold; color: #C5343E; line-height: 22px; display: block;"> ${NICK} </span> <span style="margin-top: 6px; margin-right: 22px; font-size: 16px; font-family: PingFangSC-Regular, PingFang SC, Arial; font-weight: 400; color: #000000; line-height: 22px; display: block;"> ${COMMENT} </span> </td> </tr> </table> <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 32px;"> <tr> <td align="center"> <a href="${POST_URL}" style="min-width: 106px; height: 38px; background: #e2a31c38; border-radius: 32px; display: inline-block; text-decoration: none; line-height: 38px; text-align: center;"> <span style="color: #e2a31c; font-size: 16px;">查看详情</span> </a> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="center" style="padding-top: 34px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center"> <span style="height: 17px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC, Arial; font-weight: 400; color: #00000045; line-height: 17px; display: block;"> 别忘了回复哦！ </span> <a href="${SITE_URL}" style="height: 17px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC, Arial; font-weight: 400; color: #fccb1a; line-height: 17px; margin-top: 6px; text-decoration: none; display: inline-block;"> 前往博客 </a> </td> </tr> </table> </td> </tr> </table> </td> </tr></table> |
使用教程
总共有两个个地方需要替换：
未压缩版约第三行：
background-image: url('替换为背景图片链接');（最好替换为高度320px的图片，宽度可以尽可能宽一点，以适配不同尺寸的屏幕宽度）未压缩版约第七行：
<img src="替换为头像链接"（不需要圆形图片，可以自动裁剪为圆形（至少代码里面是这么写的））
如果用的是未压缩版的话要先去这个网站压缩一下代码才能用哦！
添加教程：
- 在 Twikoo 管理页面中选择“邮件通知”
- 将以压缩的代码粘贴到
MAIL_TEMPLATE（访客通知）和MAIL_TEMPLATE_ADMIN（博主通知）中
然后记得要测试一下哦！
大功告成！
评论区欢迎大家来试试哦！我只要看到了都会回复的
参考文章：
喜欢这篇的人也看了
评论 ()
评论协议
欢迎来到我的世界！ / Welcome to my world!
Meteorite
『不管你在世界的哪个地方，我一定会，再次去见你的』
