MENU

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

我的 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.html和guest.html的文件，分别复制粘贴下面两段代码。然后上传到 CommentToMail 插件目录下替换掉原有的owner.html和guest.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 博客配置邮件提醒（附美化样式）

> 此篇文章【CommentToMail 插件给 Typecho 博客配置邮件提醒（附美化样式）】，均来自于网络，贫小子仅作分享

取消回复
Leave a Comment

已有 1 条评论
  1. 贫小子 贫小子
    Reply

    测试成功

0:00