使用了CommentToMail 插件通过邮件通知回复消息,那么问题就来了。一个简洁好看一点的email样式还是需要的。但是要明确一点,大多数的Email 客户端 只支持 内联样式
的css方式。内联样式
就是如:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
所以,这里我推荐一个很好用的 CSS Inliner Tool ,自动将html页面中的css转换成内联样式不会破坏你的媒体查询部分.
有些电子邮件客户端会从电子邮件中移除<head>
和<style>
标记,因此最好在您的标记中嵌入您的CSS。 我们知道,编写内嵌CSS非常耗时且重复,因此我们构建了此转换工具以自动内联您的电子邮件的CSS。
只需在下面粘贴您的电子邮件的HTML,点击转换,您将获得一个更易于电子邮件的版本,可以发送。 如果您的电子邮件的CSS包含用于响应式样式的媒体查询,请不要担心,内联工具将保留这些规则集。
开启你的新的邮件通知页面吧。附上我使用的页面模板。(CommentToMail插件专用!)
guest.html:
<div class="nui-fClear sR0">
<br />
<table style="width: 99.8%;height:99.8% ">
<tbody>
<tr>
<td style="background:#FAFAFA">
<div style="background-color:white;border-left: 2px solid #555555;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;width:500px;margin:50px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;">
<h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span style="color: #f59200;font-weight: bold;">> </span>您在 <a style="text-decoration:none;color: #f59200;" href="http://www.ihewro.com">友人C</a> 博客上的留言有回复啦!</h2>
<div style="padding:0 12px 0 12px;margin-top:18px">
<p>{author_p} 同学,您曾在文章《{title}》上发表评论:</p>
<p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">{text_p}</p>
<p>{author} 给您的回复如下:</p>
<p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">{text}</p>
<p>您可以点击 <a style="text-decoration:none; color:#f59200" href="{permalink}">查看回复的完整內容 </a>,欢迎再次光临 <a style="text-decoration:none; color:#f59200" href="http://www.ihewro.com">友人C</a>。</p>
</div>
</div> </td>
</tr>
</tbody>
</table>
<br />
<br />
</div>
owner.html:
<div class="nui-fClear sR0">
<br />
<table style="width: 99.8%;height:99.8% ">
<tbody>
<tr>
<td style="background:#FAFAFA">
<div style="background-color:white;border-left: 2px solid #555555;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;width:500px;margin:50px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;">
<h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span style="color: #f59200;font-weight: bold;">> </span><a style="text-decoration:none;color: #f59200;" href="http://www.ihewro.com">友人C</a> 博客有新的评论啦! </h2>
<div style="padding:0 12px 0 12px;margin-top:18px">
<p>{author} 同学在文章《{title}》上发表评论:</p>
<p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">{text}</p>
<p>您可以点击 <a style="text-decoration:none; color:#f59200" href="{permalink}">查看评论的完整內容 </a>,欢迎再次光临 <a style="text-decoration:none; color:#f59200" href="http://www.ihewro.com">友人C</a>。</p>
</div>
</div> </td>
</tr>
</tbody>
</table>
<br />
<br />
</div>