前言

在综合前人的基础上，对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,&quot;">
    <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>&nbsp;在&nbsp;<strong><a href="{permalink}" style="text-decoration:underline;color:inherit;">{title}</a></strong>&nbsp;新评论：
        </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>&nbsp;|&nbsp;<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,&quot;">
    <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>&nbsp;您在&nbsp;<strong><a href="{permalink}" style="text-decoration:underline;color:inherit;">{title}</a></strong>&nbsp;的评论：
        </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>&nbsp;在&nbsp;<strong><a href="{permalink}" style="text-decoration:underline;color:inherit;">{title}</a></strong>&nbsp;回复你：
        </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后台开启即可。

附件下载

点击下载