CommentToMail 插件给 Typecho 博客配置邮件提醒(附美化样式)

2019-07-1113:35:30 1 163 人看过

我的 Typecho 博客建起来到现在差不多也有一年的时间了,当时博客圈子里正兴起“WordPress 平台和 typehco 平台孰优孰劣”的讨论。很多博主也是那时候开始从 WordPress 平台换到了 typecho 平台。但是我觉得好不好这件事,除了要看客观因素,还要看自己喜不喜欢,用得顺不顺手。毕竟适合自己的,才是最好的。所以抱着学习的心态,便建了我的第二个博客:时光笔记

这个博客使用了友人 C 的 Handsome 主题,托管在腾讯云一台 1 核/2 GB/1Mbps 的机子上。由于精力有限,建成后基本没有怎么更新过,更不用说做其他功能或样式上的修改了。最近又重新拾起了时光笔记这个博客。反正放任不管,服务器和域名也是要续费的,不如尝试打理一下,看看能做到什么样子。今天先为 typecho 添加邮件提醒功能。

一、使用

1、下载 CommentToMail 插件,解压上传到/usr/plugins 目录。

链接:CommentToMail

提取码:k001

2、登录 typecho 后台,"控制台——>插件”页面中启用插件。插件设置页面填写相关信息,这里以 QQ 邮箱为例。

发信方式:smtp

SMTP 地址:smtp.qq.com

SMTP 端口:465

SMTP 用户:(注:填写你的邮箱)

SMTP 密码:(注:填写 QQ 邮箱的授权码,授权码登录 QQ 邮箱“设置——>账户”页面中获取)

CommentToMail 插件给 Typecho 博客配置邮件提醒(附美化样式)

关键的信息已经填好了,剩下的选项根据自己的需求填写即可。我们可以回到博客添加一条评论,测试一下是否部署成功,部署成功收到的邮件样式如下所示:

CommentToMail 插件给 Typecho 博客配置邮件提醒(附美化样式)

二、美化

我们看到,原插件的样式是比较简单的,我们可以通过添加自定义 CSS 样式进行美化。
方法:分别创建一个名为、owner.htmlguest.html的文件,分别复制粘贴下面两段代码。然后上传到 CommentToMail 插件目录下替换掉原有的owner.htmlguest.html的文件即可。如何嫌麻烦,也可以直接下载我修改好的插件:

名称:CommentToMail 邮件提醒美化版

链接:https://pan.baidu.com/s/1D-O_mbeslljOueOM9NvCsQ

提取码:2pbl

owner.html 代码如下:

<table style="width: 99.8%;height:99.8% "><tbody><tr><td style="background:#fafafa url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAy0lEQVQY0x2PsQtAYBDFP1keKZfBKIqNycCERUkMKLuSgZnRarIpJX8s3zfcDe9+794du+8bRVHQOI4wDAOmaULTNDDGYFkWMVVVQUTQdZ3iOMZxHCjLElVV0TRNYHVdC7ptW6RpSn3f4wdJkiTs+w6WJAl4DcOAbdugKAq974umaRAEARgXn+cRW3zfFxuiKCJZloXGHMeBbdv4Beq6Duu6Issy7iYB8Jbnucg8zxPLsggnj/zvIxaGIXmeB9d1wSE+nOeZf4HruvABUtou5ypjMF4AAAAASUVORK5CYII=')">
    <div style="border-radius: 10px 10px 10px 10px;font-size:13px;    color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);">
        <div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;">
            <p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="https://www.liuguogy.com"> {siteTitle} </a>上的留言有新回复啦!
            </p>
        </div>
        <div style="margin:40px auto;width:90%">
            <p>{author_p} 同学,您曾在文章《{title}》上发表评论:</p>
            <p style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{text_p}</p>
            <p>{author} 给您的回复如下:</p>
            <p style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{text}</p>
              <p>您可以点击 <a style="text-decoration:none; color:#12addb" href="{permalink}">查看回复的完整內容 </a>,欢迎再次光临 <a style="text-decoration:none; color:#12addb" href="https://www.liuguogy.com"> {siteTitle} </a>。</p>
            <style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style>
        </div>
    </div>
</td></tr></tbody></table>

guest.html 代码如下:

<style>
    .wrap span {
        display: inline-block;
    }
    .w260{ width: 260px;}
    .w20{ width: 20px;}
    .wauto{ width: auto;}
</style>
<table style="width: 99.8%;height:99.8% "><tbody><tr><td style="background:#fafafa url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAy0lEQVQY0x2PsQtAYBDFP1keKZfBKIqNycCERUkMKLuSgZnRarIpJX8s3zfcDe9+794du+8bRVHQOI4wDAOmaULTNDDGYFkWMVVVQUTQdZ3iOMZxHCjLElVV0TRNYHVdC7ptW6RpSn3f4wdJkiTs+w6WJAl4DcOAbdugKAq974umaRAEARgXn+cRW3zfFxuiKCJZloXGHMeBbdv4Beq6Duu6Issy7iYB8Jbnucg8zxPLsggnj/zvIxaGIXmeB9d1wSE+nOeZf4HruvABUtou5ypjMF4AAAAASUVORK5CYII=')">
    <div style="border-radius: 10px 10px 10px 10px;font-size:13px;    color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);">
        <div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;">
            <p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您的<a style="text-decoration:none;color: #ffffff;" href="https://www.liuguogy.com"> {siteTitle} </a>上有新的评论啦!
            </p>
        </div>
        <div style="margin:40px auto;width:90%">
            <p>{author} 在您文章《{title}》上发表评论:</p>
            <p style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{text}</p>

            <p class="wrap" style="text-decoration:none"><span class="w260">时间:{time}</span><span class="w20"> </span><span class="wauto">IP:{ip}</span></p>
            <p class="wrap" style="text-decoration:none"><span class="w260">邮箱:{mail}</span><span class="w20"> </span><span class="wauto">状态:{status}</span></p>
            <p><a style="text-decoration:none; color:#12addb" href="{permalink}" target='_blank'>[查看评论]</a> | <a style="text-decoration:none; color:#12addb" href="{manage}" target='_blank'>[管理评论] </a></p>
            <style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style>
        </div>
    </div>
</td></tr></tbody></table>

三、效果

读者邮件提醒效果

CommentToMail 插件给 Typecho 博客配置邮件提醒(附美化样式)

管理员邮件提醒效果

CommentToMail 插件给 Typecho 博客配置邮件提醒(附美化样式)

weinxin
博客小程序【一起行动派】
欢迎访问行动派博客小程序,小程序和博客同步更新,查看内容更加方便!
Action

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar 心灵博客 3

      哈哈,现在都是这个美化界面了。