Logs Hub

Mailer加持,让博客体验更完善

从建立这个博客开始,自始至终都没有说会想过未来真的会有人读你写的东西,甚至给你留下评论。

前言

好吧当时其实也没有想太多,因为对这个邮件回复其实是有一些误解。这是怎么回事呢:

我一直认为:想让Typecho给你自动发送邮件来跟踪你的评论消息其实很困难。

但是就在昨天晚上,我不知道怎么的,就访问别的大佬的站内,看一些文章。偶尔一下就发现,他写到的有关邮件回复的文章:邮件评论回复插件这时我也想到了为何不尝试一下这样的“新鲜事”呢 :@(深思) Maybe在我看来这已经很新鲜了好嘛说做就做!

过程

参照教程,看着看着就感觉不对了,咦!怎么是熊猫小A写的,正好我的主题也是他写的!鬼晓得当时我居然没发现这个插件就正好给我的小站整上个“全家桶” :@(赞一个)

首先说一下我搭建前的一个环境:Typecho我使用的是最新的正式版本,但听说只有开发版才有这个插件所需要的接口,所以说只能将你的博客站升级到开发版后才能使用这个插件。哦对了忘记介绍了,这次的插件就是它:Mailer:又一款评论邮件提醒插件

不过呢在安装之前,首先做的事就是要[notice]备份! 备份! 备份![/notice]因为开发板和正式版不同,一旦出现问题数据无价!经历了惨痛崩坏的我,说多了都是泪 :@(装大款)

  1. 前往Typecho官方网站下载页找到开发版下载
  2. 下载build文件,将原网站目录下的admin var index.php删除。
  3. 解压build文件后,将admin var index.php重新粘贴至网站目录上传,即可。
  4. 打开博客站后台,可以发现升级的提示,点击升级

升级到开发版后,其实观察了一下,并没有什么太大变化,原来启用的插件/主题都可以使用。不过新增加了直接预览还未发布的文章,这点倒是挺好的,虽然说文本编辑页也是有预览的,但效果显然没有这个好,这边点个赞! ::(真棒)

接下来我们就可以安装插件了,前往插件的Github页面,下载后上传至网站根目录usr中的Plugin文件夹下。 [notice]一定要更改解压后的文件夹名为Mailer否则会出现 Database 500 error报错问题[/notice]

接下来配置插件很重要。这边我另外提一下,我使用了QQ的域名邮箱服务,且我去了解到域名邮箱也是有SMTP服务的,可以作为发件邮箱,这样就免去了企业邮箱或绑定域名邮箱的必须,但如果你也有同样的SMTP邮箱服务,也可以使用,这边只是介绍一下其实QQ邮箱还是有这个服务的,既然有的话就利用起来也是不错哒 ::(滑稽) [notice]QQ域名邮箱支持域名有限,如.COM/.CN/.NET等,有些可能不支持,注册域名时请斟酌选择。[/notice]

Mailer配置.png
Mailer配置.png

这里需要注意,填写密码时,请先前往QQ邮箱设置中账户页下的POP3/IMAP/SMTP服务中开启POP3/SMTP服务,验证您的身份后就会生成一个授权码,将生成的授权码填写至密码一栏即可。如果出现发送指令失败的服务,可以更换端口与协议重试后即可

到这里,插件基本上就配置完了。如果你也和我一样使用VOID主题,那么到这里就设置完成了;但如果你使用的是其他主题,你需要将一下代码添加至你博客评论的文件中(一般为comments.php):

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

你还可以更改发件模板,让你的邮件看起来更加棒!这边我也提供我使用的两个模板:

针对博主的邮件模板

<div style="width: 620px;height: auto;border-radius: 5px;margin:0 auto;box-shadow: 0px 0px 20px #888888;position: relative;">
    <div style="background-image: url(https://img.moegirl.org/common/b/b9/%E6%8A%98%E6%9C%A8.jpg);width:620px;height: 287px;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>Master!您编撰的文章 <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> 给您的评论:</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 Address:{{ip}}<br />Mail:<a style="text-decoration:none;color: #ff7272;" href="mailto:{{comment_author_mail}}">{{comment_author_mail}}</a><br />Status:{{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: 620px;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://img.moegirl.org/common/b/b9/%E6%8A%98%E6%9C%A8.jpg);width:620px;height: 287px;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> 给您的回复:</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>本邮件由:最爱Master的邮箱姬 自动发送,请勿直接回复呐~</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>
上述代码可能会有显示误差,COPY后注意格式!

到这里就设置成功啦,最后附上邮箱模板的效果图。

博主邮件模板示范图.png
博主邮件模板示范图.png
访客邮件模板示例图.png
访客邮件模板示例图.png

后记 代码部分版权归属纸盒博客 无文字

Copyright © 2021 Sean