Typecho CommentToMail邮件插件模板美化

Author： cyz4531
发布时间：June 23, 2020
593views
2 comments
7546字数
Categories： Typecho
百度已收录

Typecho的邮件插件

每当游客给你进行评论或者留言时，都希望自己能够第一时间的知道，想达到这个效果，就需要一款好用的Typecho的插件->CommentToMail,它可以通过邮件的形式第一时间让你得知你博客内的情况，十分好用！

CommentToMail版本

首先，CommentToMail插件大致上有俩个版本，一个是需要设置网站监控，另一个是修改版，则不需要设置网站监控。(个人建议使用修改版，不用那么麻烦！)

插件下载

正式版：

本文我只讲述修改版的使用教程，正式版的请看作者的博客哦！

Rat's

使用CommentToMail插件给博客配置邮件通知评论功能，附带美化版样式

修改版：

关注作者：作者找不到！！！

食用方法：

步骤1：下载好插件，上传并解压到到 /usr/plugins目录下，文件夹命名为CommentToMail
步骤2：博客后台 -> 控制台 -> 插件找到插件启动即可
步骤3：

我们需要进去插件设置里面配置基本信息。
首先得配置好SMTP的基本信息 ;
STMP地址  ->  smtp.qq.com ;
SMTP端口 ->  465 ;
SMTP密码  ->  (需要你的QQ邮箱开启SMTP服务才有，不用着急，在下方我也会给教程)  
接收邮件填你的QQ邮箱，如果地址为空则使用文章作者个人设置中的邮件地址！
最后保存设置即可！

开启STMP服务

登录QQ邮箱 -> 点击最顶段的设置 -> 账户 -> 找到开启服务，把STMP服务开启即可，开启就会得到 SMTP的密码

如图：

邮件美化

插件的内置邮件的样式不太美观，需要我们美化一下。

原本的邮件模样：

美化后的邮件模样：

相比之下，是不是美了许多丫！

美化步骤

步骤1：博客后台 -> 控制台 -> 评论邮件提醒 -> 编辑邮件模板
步骤2：首先修改guest.html,把 Guest 里的代码复制粘贴进去
步骤3：接着修改owner.html,把 Owner 里的代码复制粘贴进去

Guest
Owner

<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://sunpma.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://sunpma.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>

<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://sunpma.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>

注意：粘贴Guest的代码时，小伙伴需要把 “欢迎再次光临” 后面的href="地址"改为自己博客的地址哦！

完工！小伙伴可以去快乐的享受啦！

关注我的博客，http://www.cyz4531.top，你可以了解到更多哦！
欢迎在下方点赞评论哦！

版权属于：冷眸_ln
本文链接：https://cyz4531.top/index.php/archives/17/
可以转载本站文章，但转载时请以超链接形式标明文章原始出处，Thank you！

Last modification：July 6th, 2020 at 11:35 pm

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

2 comments

亦
July 9th, 2020 at 06:00 pm

博主，你好，我用了正式版的插件，但是没有模板，全是文字

Reply
1. cyz4531Author
  July 9th, 2020 at 08:28 pm
  
  @亦
  确保你开启了插件，然后，博客后台->控制台->评论邮件提醒，把俩个代码分别复制粘贴进去即可
  
  Reply

Typecho CommentToMail邮件插件模板美化

cyz4531 • 2020 年 06 月 23 日

Typecho的邮件插件

每当游客给你进行评论或者留言时，都希望自己能够第一时间的知道，想达到这个效果，就需要一款好用的Typecho的插件->CommentToMail,它可以通过邮件的形式第一时间让你得知你博客内的情况，十分好用！

CommentToMail版本

插件下载

正式版：

本文我只讲述修改版的使用教程，正式版的请看作者的博客哦！

Rat's

使用CommentToMail插件给博客配置邮件通知评论功能，附带美化版样式

修改版：

关注作者：作者找不到！！！

食用方法：

我们需要进去插件设置里面配置基本信息。
首先得配置好SMTP的基本信息 ;
STMP地址  ->  smtp.qq.com ;
SMTP端口 ->  465 ;
SMTP密码  ->  (需要你的QQ邮箱开启SMTP服务才有，不用着急，在下方我也会给教程)  
接收邮件填你的QQ邮箱，如果地址为空则使用文章作者个人设置中的邮件地址！
最后保存设置即可！

开启STMP服务

登录QQ邮箱 -> 点击最顶段的设置 -> 账户 -> 找到开启服务，把STMP服务开启即可，开启就会得到 SMTP的密码

如图：

邮件美化

插件的内置邮件的样式不太美观，需要我们美化一下。

原本的邮件模样：

美化后的邮件模样：

相比之下，是不是美了许多丫！

<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://sunpma.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://sunpma.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>

<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://sunpma.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>

注意：粘贴Guest的代码时，小伙伴需要把 “欢迎再次光临” 后面的href="地址"改为自己博客的地址哦！

完工！小伙伴可以去快乐的享受啦！

关注我的博客，http://www.cyz4531.top，你可以了解到更多哦！
欢迎在下方点赞评论哦！

版权属于：冷眸_ln
本文链接：https://cyz4531.top/index.php/archives/17/
可以转载本站文章，但转载时请以超链接形式标明文章原始出处，Thank you！

Typecho CommentToMail邮件插件模板美化

Typecho的邮件插件

CommentToMail版本

插件下载

食用方法：

开启STMP服务

邮件美化

美化步骤

2 comments

Leave a Comment Cancel reply

关于Typecho的主题魔改记录

Typecho CommentToMail邮件插件模板美化

宝塔面板安装Oneindex

百度网盘如何提速下载？

typecho配置Robots.txt

浏览器出现 “未连接到互联网代理服务器出现问题，或者地址有误”

onedrive免费扩容10G

Vscode好用插件推荐

酷我音乐的pojie版下载

Pycharm的详细安装步骤

Typecho CommentToMail邮件插件模板美化

Typecho的邮件插件

CommentToMail版本

插件下载

食用方法：

开启STMP服务

邮件美化

美化步骤