本站所使用的CommentToMail版本号为 lantian发布的2.0.1版本,Typecho有很多的邮件评论插件,其中部分会出现无法发信的问题,不过目前我在用的版本是很正常的。

起源

近期站点重建,于是又重新优化了一下评论邮件的模板,样式灵感来源于@catyo的一篇博文

申请一张免费的 MasterCard® 木质借记卡 - 猫鼬的星球计划 (catyo.cn)

照着图片,复现了一遍,又根据插件给出的原本模板进行制作,最后呈现出下方的样子,本来是有图片的,但是有的邮件系统会不显示图片,于是就去掉了。

预览

评论者收到博主回复的评论邮件

image-20211213120011367

博主收到评论的邮件

image-20211213120200669

邮件模板源码

将下方内容分别复制到插件模板设置里面就可以了

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>&nbsp;给您的评论:
                    </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&nbsp;{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>&nbsp;在 <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>
如果觉得我的文章对你有用,请随意赞赏