有关Typecho邮件评论发信及邮件模板美化
本文最后更新于 211 天前,其中的信息可能已经有所发展或是发生改变。

有小伙伴问了我网站的邮件是怎么弄的,我简单的描述一下

Smtp邮件插件

只用过CommentToMailMailer,其他的不太了解,所以只推荐这两个插件。

Mailer的部署

目前本站用的是熊猫小A大佬的Mailer

这个插件需要Type­cho开发版(17.11.15 及以上版本)的环境。如果是使用正式版的,可以尝试这篇文章的升级的方法:TYPECHO博客程序升级为开发版

大致简述一下升级操作,如下:
升级操作
删除/admin/var/index.php这三个文件夹或文件,在把开发版里的这三个东西放进去(记得备份)
然后回到Typecho的后台界面,会有个红字的提示,大意是:

检测到版本已经部分升级,还需要更新一部分文件,是否要进行升级

选择升级后,就完成了正式版升级到开发版的过程

然后进行Mailer的安装

下载插件,上传至插件目录,后台启用后设置相关信息。然后在博客评论区form元素中合适位置添加:

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

以上代码必须添加,不添加不会发信

域名邮箱的发信设置

本站是使用腾讯企业邮绑定的域名邮箱,虽然腾讯企业邮的wiki中描述说是选择加密ssl端口465
但是这么设置,Mailer会出现错误提示,需要如下设置:

邮件服务器:smtp.exmail.qq.com
端口号:25
连接加密方式:tls
启用身份验证:是

Mailer提示设置成功。

邮件模板的美化

下一步进行邮件模板的美化,如果需要CommentToMail的邮件美化模板,可以自行参考这位大佬的文章:[Typecho]邮件提醒模板

Mailer模板的变量相比于CommentToMail的不太一样,需要进行一些修改,我改动了一下,如下

向博主发信内容模板

<div style="width: 550px;height: auto;border-radius: 5px;margin:0 auto;border:1px solid #ffb0b0;box-shadow: 0px 0px 20px #888888;position: relative;">
    <div style="background-image: url(https://xn----ehqz9kbvaa-wang-static.smartgslb.com/picture/email.jpg);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="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span style="color: #12ADDB;font-weight: bold;">&gt; </span>您的文章<a style="text-decoration:none;color: #12ADDB;" href="{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>
            <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">{{comment_content}}</p>
            <p>其他信息:</p>
            <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">IP:{{ip}}<br />邮箱:<a href="mailto:{{comment_author_mail}}">{{comment_author_mail}}</a><br />状态:{{status}}[<a 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>

向访客发信内容模板

<div style="width: 550px;height: auto;border-radius: 5px;margin:0 auto;border:1px solid #ffb0b0;box-shadow: 0px 0px 20px #888888;position: relative;padding-bottom: 5px;">
    <div style="background-image: url(https://xn----ehqz9kbvaa-wang-static.smartgslb.com/picture/email.jpg);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="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span style="color: #12ADDB;font-weight: bold;">&gt; </span>您在<a style="text-decoration:none;color: #12ADDB;" href="{{post_permalink}}" target="_blank">《{{post_title}}》</a>的评论有了新的回复呐~</h2>
        <div style="padding:0 12px 0 12px;margin-top:18px">
            <p>您的评论:</p>
            <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">{{comment_parent_content}}</p>
            <p><strong>{{comment_author_name}}</strong>&nbsp;给您的回复:</p>
            <p style="background-color: #f5f5f5;border: 0px solid #DDD;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;">
        <p>©2020 Copyright {{site_name}}</p>
    </div>
</div>

效果预览

向博主发信样式

向访客发信样式

评论

  1. 解忧杂货店.
    Windows Chrome 80.0.3987.122
    7月前
    2020-3-04 7:49:35

    感谢!!!😊

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇