友人C

制作美观的评论回复通知页面(附简洁美观模板)
使用了CommentToMail 插件通过邮件通知回复消息,那么问题就来了。一个简洁好看一点的email样式还是需...
扫描右侧二维码阅读全文
11
2016/11

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

使用了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插件专用!)

1.png

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>
最后修改:2016 年 12 月 25 日 01 : 15 PM
如果觉得我的文章对你有用,请随意赞赏

27 条评论

  1. 阿歪

    一直想弄这玩意。。。 :cry:

  2. 1900

    总觉得多说这种更为方便。

    1. hewro
      @1900

      之前模板都是使用多说,这次不想用了,想使用原生了。

  3. 蔡锶铎

    等有空折腾个邮件通知再回来参考下qwq

    1. hewro
      @蔡锶铎

      :lol: 期待中,,,你的评论什么通知都木有 :???:

      1. 蔡锶铎
        @hewro

        突然感觉流量的来源有50%都是回来看回复的

        1. Hodpel
          @蔡锶铎

          我每次去要么看文章要么看回复(:з」∠)

        2. 友人c
          @蔡锶铎

          还好有WiFi

  4. LiarOnce

    为何感觉话没说完 :arrow:

    1. hewro
      @LiarOnce

      说完了啊 :grin:

发表评论