本站所使用的CommentToMail版本号为 lantian发布的2.0.1版本,Typecho有很多的邮件评论插件,其中部分会出现无法发信的问题,不过目前我在用的版本是很正常的。
起源
近期站点重建,于是又重新优化了一下评论邮件的模板,样式灵感来源于@catyo的一篇博文
申请一张免费的 MasterCard® 木质借记卡 - 猫鼬的星球计划 (catyo.cn)
照着图片,复现了一遍,又根据插件给出的原本模板进行制作,最后呈现出下方的样子,本来是有图片的,但是有的邮件系统会不显示图片,于是就去掉了。
预览
评论者收到博主回复的评论邮件
博主收到评论的邮件
邮件模板源码
将下方内容分别复制到插件模板设置里面就可以了
owner.html
<div style="width: 600px;margin: 20px auto;">
<div style="width: 600px;background-color: #fff;box-shadow: 0px 0px 10px #ddd;">
<div style="width: 560px;margin: 20px;padding: 20px 0;">
<div style="font-weight: 900;font-size: 18px;margin-bottom: 20px;">您的文章【{title}】有了新的回复:</div>
<div style="color: #555;font-size: 16px;word-break: break-all;">
<p style="word-break: break-all;margin-bottom: 20px;">
<style>img{max-width:100%}</style>
<strong>{author}</strong> 给您的评论:
</p>
<p style="word-break: break-all;margin-bottom: 20px;background:#eee;padding:10px">“{text}”</p>
<p style="word-break: break-all;margin-bottom: 20px;">
其他信息:
</p>
<p style="word-break: break-all;margin-bottom: 20px;background:#eee;padding:10px">
时间:{time} <br>
IP:{ip}<br />
邮箱:<a style="color:#ee5253;" href="mailto:{mail}">{mail}</a><br />
状态:{status} [<a style="color:#ee5253;" href='{manage}' target='_blank'>管理评论</a>]</p>
</p>
<p style="word-break: break-all;margin-bottom: 20px;">快点击下方的按钮查看吧!</p>
<a style="text-decoration: none;margin: 0 auto;background-color: #1D5756;color: #fff;padding: 10px;width: 300px;text-align: center;margin-bottom: 20px;border-radius: 5px;display: block;" href="{permalink}" target="_blank">点击这儿查看详情</a>
</div>
</div>
</div>
<div class="footer" style="text-align: center;font-size: 12px;">
<p style="text-align:center;color: #555;">Copyright 2018 - Now 冰微未来</p>
<p style="text-align:center;color: #555;">本邮件为系统自动发送,请勿直接回复</p>
</div>
</div>
guest.html
<div style="width: 600px;margin: 20px auto;">
<div style="width: 600px;background-color: #fff;box-shadow: 0px 0px 10px #ddd;">
<div style="width: 560px;margin: 20px;padding: 20px 0;">
<div style="font-weight: 900;font-size: 18px;margin-bottom: 20px;">Hi {author_p},</div>
<div style="color: #555;font-size: 16px;word-break: break-all;">
<p style="word-break: break-all;margin-bottom: 20px;">最近一切都还好吗?还记得您在“<span style="color: #000;"> {title} </span>”留下的评论吗? 有朋友给了您新的回复哦~</p>
<p style="word-break: break-all;margin-bottom: 20px;"><style>img{max-width:100%}</style><strong>{author}</strong> 在 <span style="border-bottom:1px dashed #ccc;" t="5" times=" 20:42">{time}</span> 对您的评论:“{text_p}” 发表了这样的见解:</p>
<p style="word-break: break-all;margin-bottom: 20px;background:#eee;padding:10px">“{text}”</p>
<p style="word-break: break-all;margin-bottom: 20px;">快点击下方的按钮查看吧!</p>
<a style="text-decoration: none;margin: 0 auto;background-color: #1D5756;color: #fff;padding: 10px;width: 300px;text-align: center;margin-bottom: 20px;border-radius: 5px;display: block;" href="{permalink}" target="_blank">点击这儿查看详情</a>
<p style="word-break: break-all;margin-bottom: 20px;">欢迎您再次光临~</p>
</div>
</div>
</div>
<dir class="footer" style="text-align: center;font-size: 12px;">
<p style="text-align:center;color: #555;">Copyright 2018 - Now 冰微未来</p>
<p style="text-align:center;color: #555;">本邮件为系统自动发送,请勿直接回复</p>
</dir>
</div>
1 条评论
好看,但是我懒得折腾了,过两天搞一下