前言
在综合前人的基础上,对typecho邮件评论模板进行了更新,修复了配色方案以及自适应效果。在文章末尾即可下载。
代码
owner
代码
<base target="_blank" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<style type="text/css">
::-webkit-scrollbar{ display: none; }
</style>
<style id="cloudAttachStyle" type="text/css">
#divNeteaseBigAttach, #divNeteaseBigAttach_bak{display:none;}
</style>
<div class="container" style="max-width:500px;margin:20px auto;background-color:#fff;box-shadow:1px 1px px #888888;border-radius:10px;font-family:-apple-system,BlinkMacSystemFont,"">
<div class="mail-box" style="width:100%;">
<div class="mail-header" style="background:url('https://blog.bbskali.cn/emali.jpg') center center no-repeat;background-size:100% auto;margin:10px 0;width:100%;height:220px;box-sizing:border-box;overflow-y:hidden;">
</div>
<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://blog.bbskali.cn"> {siteTitle} </a>上有新的评论啦!
</p>
</div>
<p class="mail-p3" style="border-radius:3px;margin:0;margin-bottom:10px;padding:15px 10px;">
<strong style="display:inline-block;line-height:20px;background-color:#00a7e0;color:#fff;border-radius:4px;padding:5px 10px;height:20px;">{author}</strong> 在 <strong><a href="{permalink}" style="text-decoration:underline;color:inherit;">{title}</a></strong> 新评论:
</p>
<div style="margin:40px auto;width:95%">
<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"><img class="ico" width="16" height="16" src="https://blog.bbskali.cn/time.png">:{time}</span><span class="w20"> </span><span class="wauto"><img class="ico" width="18" height="18" src="https://blog.bbskali.cn/ip.png">:{ip}</span></p>
<p class="wrap" style="text-decoration:none"><span class="w260"><img class="ico" width="16" height="16" src="https://blog.bbskali.cn/email.png">:{mail}</span><span class="w20"> </span><span class="wauto"><img class="ico" width="21" height="19" src="https://blog.bbskali.cn/start.png">:{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>
<p class="mail-footer" style="border-radius:3px;margin:0;padding:15px 20px;text-align:right;">
{siteTitle} 献上诚挚的问候
</p>
</div>
</div>
<style type="text/css">
body{font-size:14px;font-family:arial,verdana,sans-serif;line-height:1.666;padding:0;margin:0;overflow:auto;white-space:normal;word-wrap:break-word;min-height:100px}
td, input, button, select, body{font-family:Helvetica, 'Microsoft Yahei', verdana}
pre {white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;width:95%}
th,td{font-family:arial,verdana,sans-serif;line-height:1.666}
img{ border:0}
header,footer,section,aside,article,nav,hgroup,figure,figcaption{display:block}
blockquote{margin-right:0px}
.wrap span {
display: inline-block;
font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;
font-size: 12px;
}
.w260{ width: 190px;}
.w20{ width: 20px;}
.wauto{ width: auto;}
.ico{vertical-align:middle; }
</style>
<style id="ntes_link_color" type="text/css">a,td a{color:#064977}</style>
guest
代码
<base target="_blank" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<style type="text/css">
::-webkit-scrollbar{ display: none; }
</style>
<style id="cloudAttachStyle" type="text/css">
#divNeteaseBigAttach, #divNeteaseBigAttach_bak{display:none;}
</style>
<div class="container" style="max-width:500px;margin:20px auto;background-color:#fff;box-shadow:1px 1px px #888888;border-radius:10px;font-family:-apple-system,BlinkMacSystemFont,"">
<div class="mail-box" style="width:100%;">
<div class="mail-header" style="background:url('https://blog.bbskali.cn/emali.jpg') center center no-repeat;background-size:100% auto;margin:10px 0;width:100%;height:220px;box-sizing:border-box;overflow-y:hidden;">
</div>
<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://blog.bbskali.cn"> {siteTitle} </a>上的评论有回复啦!
</p>
</div>
<p class="mail-p3" style="border-radius:3px;margin:0;margin-bottom:10px;padding:15px 10px;">
<strong style="display:inline-block;line-height:20px;background-color:#ec6149;color:#fff;border-radius:4px;padding:5px 10px;height:20px;">{author_p}</strong> 您在 <strong><a href="{permalink}" style="text-decoration:underline;color:inherit;">{title}</a></strong> 的评论:
</p>
<div style="margin:40px auto;width:95%">
<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 class="mail-p3" style="border-radius:3px;margin:0;margin-bottom:10px;padding:15px 10px;">
<strong style="display:inline-block;line-height:20px;background-color:#00a7e0;color:#fff;border-radius:4px;padding:5px 10px;height:20px;">{author}</strong> 在 <strong><a href="{permalink}" style="text-decoration:underline;color:inherit;">{title}</a></strong> 回复你:
</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>
</div>
<p class="mail-footer" style="border-radius:3px;margin:0;padding:15px 20px;text-align:right;">
{siteTitle} 献上诚挚的问候
</p>
</div>
</div>
<style type="text/css">
body{font-size:14px;font-family:arial,verdana,sans-serif;line-height:1.666;padding:0;margin:0;overflow:auto;white-space:normal;word-wrap:break-word;min-height:100px}
td, input, button, select, body{font-family:Helvetica, 'Microsoft Yahei', verdana}
pre {white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;width:95%}
th,td{font-family:arial,verdana,sans-serif;line-height:1.666}
img{ border:0}
header,footer,section,aside,article,nav,hgroup,figure,figcaption{display:block}
blockquote{margin-right:0px}
</style>
<style id="ntes_link_color" type="text/css">a,td a{color:#064977}</style>
效果图
评论提醒效果
评论回复效果
使用
下载附件,上传至plugins
后台开启即可。
请问博主,解压之后需要重命名什么?为什么我启用显示500
CommentToMail
谢谢分享~
没事!相互学习!
现在还能用吗?
可以的
博主,我想请教一下。别人评论我可以收到邮件通知,但是我回复别人了,别人并没有收到邮件通知,这是个怎么解决?
看看端口是否有问题,比如阿里云服务器是关闭了25端口。
不错,谢谢分享!
哈哈,不错啊,学习了!????