typecho评论邮件提醒插件美化

博主：小茶猫
发布时间：2022 年 01 月 03 日
6779 次浏览
15 条评论
2885字数
分类：学习笔记

这里有三款typecho常用的邮件提醒插件，CommentToMail、LoveXiaozhou、Mailer。

CommentToMail

美化参考纸盒博客的Mailer模板，修改后适配CommentToMail

美化后的页面

在原样式的情况下进行了美化

原`owner.html`

<div style="margin: 16px 40px; background-color: #eef2fa; border: 1px solid #d8e3e8; padding: 0 15px;  -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;">
    <p>{siteTitle}：<a target="_blank" href="{permalink}">{title}</a></strong>&nbsp;有新的评论</p>
    <p><strong>{author}</strong>&nbsp;评论说：{text}</p>
    <p>时间：{time}<br />IP：{ip}<br />邮箱：{mail}<br />状态：{status} [<a href='{manage}' target='_blank'>管理评论</a>]<br /></p>
</div>

原`guest.html`

<div style="margin: 16px 40px; background-color: #eef2fa; border: 1px solid #d8e3e8; padding: 0 15px;  -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;">
    <p>{author_p}：<a target="_blank" href="{permalink}">{title}</a>&nbsp;有新的回复</p>
    <p><strong>{author}</strong>&nbsp;回复说：{text}</p>
    <p>你的评论：{text_p}</p>
    <p>时间：{time}</p>
    <p>本邮件为{siteTitle}自动发送，请勿直接回复，如有疑问，<a href="mailto:{contactme}" target="_blank">联系我</a> 。</p>
</div>

修改后`owner.html`

<div
    style="width: 550px;height: auto;border-radius: 5px;margin:0 auto;box-shadow: 0px 0px 20px #888888;position: relative;padding-bottom: 5px;">
    <div
        style="background-image: url(https://xiaochamao.com/usr/uploads/img/202201031845253.png);width:550px;height: 250px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;">
    </div>
    <div
        style="width: 200px;height: 40px;background-color: rgb(255, 114, 114);margin-top: -20px;margin-left: 20px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);color: rgb(255, 255, 255);text-align: center;line-height: 40px;">
        博主</div>
    <div
        style="background-color:white;line-height:180%;padding:0 15px 12px;width:520px;margin:20px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;margin-bottom: 0px;">
        <h2 style="font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span
                style="color: #ff7272;font-weight: bold;"></span>您的<a style="text-decoration:none;color: #ff7272;"
                href="{{post_permalink}}" target="_blank">《{title}》</a>有了新的回复：</h2>
        <div style="padding:0 12px 0 12px;margin-top:18px">
            <p><strong>{author}</strong>&nbsp;给您的评论：</p>
            <style type="text/css">
                .comment>img {
                    margin: 0px 6px 5px 6px;
                    width: 25px;
                }
            </style>
            <p class="comment"
                style="background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0">
                {text}</p>
            <p>详细信息：</p>
            <p
                style="background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0">
                时间：{time}<br />IP：{ip}<br />邮箱：<a style="text-decoration:none;color: #ff7272;"
                    href="mailto:{{comment_author_mail}}">{mail}</a><br />状态：{status} [<a
                    style="text-decoration:none;color: #ff7272;" href='{manage}' target='_blank'>管理评论</a>]</p>
        </div>
    </div>
    <a style="text-decoration: none;color: rgb(255, 255, 255);width: 40%;text-align: center;background-color: rgb(255, 114, 114);height: 40px;line-height: 40px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);display: block;margin: auto;"
        href="{permalink}" target="_blank">查看回复的完整內容</a>
    <div
        style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;margin-top: 30px;">
        <p>本邮件为系统自动发送，请勿直接回复~</p>
    </div>
    <div
        style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center; padding-bottom: 1px;">
        <p>©2020-2022 Copyright <a href="https://xiaochamao.com/" target="_blank">{siteTitle}</a></p>
    </div>
</div>

修改后`guest.html`

<div
    style="width: 550px;height: auto;border-radius: 5px;margin:0 auto;box-shadow: 0px 0px 20px #888888;position: relative;padding-bottom: 5px;">
    <div
        style="background-image: url(https://xiaochamao.com/usr/uploads/img/202201031845253.png);width:550px;height: 250px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;">
    </div>
    <div
        style="width: 200px;height: 40px;background-color: rgb(255, 114, 114);margin-top: -20px;margin-left: 20px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);color: rgb(255, 255, 255);text-align: center;line-height: 40px;">
        {author_p}</div>
    <div
        style="background-color:white;line-height:180%;padding:0 15px 12px;width:520px;margin:20px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;margin-bottom: 0px;">
        <h2 style="font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span
                style="color: #12ADDB;font-weight: bold;"></span>您在<a style="text-decoration:none;color: #ff7272;"
                href="{{post_permalink}}" target="_blank">《{title}》</a>的评论有了新的回复：</h2>
        <div style="padding:0 12px 0 12px;margin-top:18px">
            <style type="text/css">
                .comment>img {
                    margin: 0px 6px 5px 6px;
                    width: 25px;
                }
            </style>
            <p>您的评论：</p>
            <p class="comment"
                style="background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0">
                {text_p}</p>
            <p><strong>{author}</strong>&nbsp;给您的回复：</p>
            <p class="comment"
                style="background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0">
                {text}</p>
        </div>
    </div>
    <a style="text-decoration:none; color:#FFF;width: 40%;text-align: center;background-color:#ff7272;height: 40px;line-height: 35px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.30);margin: -10px auto;display: block;"
        href="{permalink}" target="_blank">查看回复的完整內容</a>
    <div
        style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;margin-top: 30px;">
        <p>本邮件为系统自动发送，请勿直接回复~</p>
    </div>
    <div
        style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;padding-bottom: 1px;">
        <p>©2020-2022 Copyright <a href="https://xiaochamao.com/" target="_blank">{siteTitle}</a></p>
    </div>
</div>

修改模板后的插件

下载地址

密码9cr5

LoveXiaozhou

邮件发送例图

下载地址

密码：c295

Mailer

在博客评论区 form 元素中合适位置添加

<span>
  <input name="receiveMail" type="checkbox" value="yes" checked />
  <label for="receiveMail"><strong>接收</strong>邮件通知</label>
</span>

美化例图

美化模板，来自纸盒博客

向博主发信内容模板

<div style="width: 550px;height: auto;border-radius: 5px;margin:0 auto;box-shadow: 0px 0px 20px #888888;position: relative;">
    <div style="background-image: url(https://cdn.zggsong.cn/2020/03/21/f913433848e78.png);width:550px;height: 250px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;"></div>
    <div style="background-color:white;line-height:180%;padding:0 15px 12px;width:520px;margin:10px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;margin-bottom: 0px;">
        <h2 style="font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span style="color: #ff7272;font-weight: bold;"></span>您的<a style="text-decoration:none;color: #ff7272;" href="{{post_permalink}}" target="_blank">《{{post_title}}》</a>有了新的回复：</h2>
        <div style="padding:0 12px 0 12px;margin-top:18px">
            <p><strong>{{comment_author_name}}</strong>&nbsp;给您的评论：</p>
            <style type="text/css">
                .comment>img{margin: 0px 6px 5px 6px;width: 25px;}
            </style>
            <p class="comment" style="background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0">{{comment_content}}</p>
            <p>详细信息：</p>
            <p style="background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0">IP：{{ip}}<br />邮箱：<a style="text-decoration:none;color: #ff7272;" href="mailto:{{comment_author_mail}}">{{comment_author_mail}}</a><br />状态：{{status}} [<a style="text-decoration:none;color: #ff7272;" href='{{manage_url}}' target='_blank'>管理评论</a>]</p>
        </div>
    </div>
    <a style="text-decoration: none;color: rgb(255, 255, 255);width: 40%;text-align: center;background-color: rgb(255, 114, 114);height: 40px;line-height: 40px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);display: block;margin: auto;" href="{{comment_permalink}}" target="_blank">查看回复的完整內容</a>
    <div style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center; padding-bottom: 1px;">
        <p>©2019-2020 Copyright {{site_name}}</p>
    </div>
</div>

向访客发信内容模板

<div style="width: 550px;height: auto;border-radius: 5px;margin:0 auto;box-shadow: 0px 0px 20px #888888;position: relative;padding-bottom: 5px;">
    <div style="background-image: url(https://cdn.zggsong.cn/2020/03/21/f913433848e78.png);width:550px;height: 300px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;"></div>
    <div style="width: 200px;height: 40px;background-color: rgb(255, 114, 114);margin-top: -20px;margin-left: 20px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);color: rgb(255, 255, 255);text-align: center;line-height: 40px;">Dear: {{comment_parent_author_name}}</div>
    <div style="background-color:white;line-height:180%;padding:0 15px 12px;width:520px;margin:30px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;margin-bottom: 0px;">  
        <h2 style="font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span style="color: #12ADDB;font-weight: bold;"></span>您在<a style="text-decoration:none;color: #ff7272;" href="{{post_permalink}}" target="_blank">《{{post_title}}》</a>的评论有了新的回复：</h2>  
        <div style="padding:0 12px 0 12px;margin-top:18px">
            <style type="text/css">
                .comment>img{margin: 0px 6px 5px 6px;width: 25px;}
            </style>
            <p>您的评论：</p>  
            <p class="comment" style="background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0">{{comment_parent_content}}</p>  
            <p><strong>{{comment_author_name}}</strong>&nbsp;给您的回复：</p>  
            <p class="comment" style="background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0">{{comment_content}}</p>  
        </div>  
    </div>
    <div style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;word-wrap:break-word;margin-top: -30px;">
        <p style="padding:20px;">萤火虫消失之后，那光的轨迹仍久久地印在我的脑际。那微弱浅淡的光点，仿佛迷失方向的魂灵，在漆黑厚重的夜幕中彷徨。——《挪威的森林》村上春树</p>
    </div>
    <a style="text-decoration:none; color:#FFF;width: 40%;text-align: center;background-color:#ff7272;height: 40px;line-height: 35px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.30);margin: -10px auto;display: block;" href="{{comment_permalink}}" target="_blank">查看回复的完整內容</a>
    <div style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;margin-top: 30px;">
        <p>本邮件为系统自动发送，请勿直接回复~</p>
    </div>
    <div style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;padding-bottom: 1px;">
        <p>©2019-2020 Copyright {{site_name}}</p>
    </div>
</div>

下载地址

密码：54xp

最后修改：2022 年 01 月 03 日

如果觉得我的文章对你有用，请随意赞赏

15 条评论

Koko
2022-09-17 14:36:27

感谢分享已经用上了OωO

回复
泡芙
2022-05-16 14:44:51

第三个插件里的邮件服务器和端口怎么填呀，不会弄呜呜呜

回复
1. 小茶猫
  2022-05-16 23:24:53
  
  @泡芙
  
  邮件服务器可以去你的邮箱的官方文档里面找，QQ邮箱的是smtp.qq.com，端口465
  
  回复
Janexia
2022-03-23 11:15:21

SOCKET错误,0:
第一个插件log里面报错了，发不出去，测试发送正常，评论发送报错

回复
兴哥's Blog
2022-01-11 21:13:17

这是怎么弄的感觉美化后很好看页

回复
1. 小茶猫
  2022-01-11 21:18:02
  
  @兴哥's Blog
  
  是吧，我看着改的，好看就完事了
  
  回复
  1. bernie
    2022-03-19 17:48:37
    
    @小茶猫
    
    你这个我怎么尝试都是无效的啊，别的可以用但是不能用客户的发，只能博主给博主发邮箱才有效，但是你这个我怎么配置都不行，不知道哪里出现了问题，方便帮个忙吗？
    
    回复
  2. 兴哥's Blog
    2022-01-11 21:20:39
    
    @小茶猫
    
    你这站点用的什么字体？分享一下呀
    
    回复
    
    小茶猫
    2022-01-11 23:39:33
    
    @兴哥's Blog
    
    handsome主题内置的字体，具体是啥字体我不太清楚(๑•́₃ •̀๑)
    
    回复
小杰
2022-01-08 13:25:34

666,学习博主

回复
1. 小茶猫
  2022-01-08 13:32:13
  
  @小杰
  
  向着大佬们学习(. ❛ ᴗ ❛.)
  
  回复
  1. 小杰
    2022-01-08 13:49:33
    
    @小茶猫
    
    不不不，你才是大佬 |´・ω・)ノ
    
    回复
s
2022-01-04 21:32:44

看不懂

回复
1. 小茶猫
  2022-01-04 21:34:21
  
  @s
  
  就是te的三个邮件提醒插件，插件压缩包带美化的代码。
  
  回复
  1. s
    2022-01-05 12:59:52
    
    @小茶猫
    
    明白了！我还以为都是一个呢！
    
    回复