第2页 - 制作美观的评论回复通知页面（附简洁美观模板）

制作美观的评论回复通知页面（附简洁美观模板）

2016 年 11 月 11 日

37081 次浏览

1191字数

使用了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;">&gt; </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;">&gt; </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>