友人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. owen

    不知道什么原因,邮件通知一直失败⌇●﹏●⌇

  2. S

    赞赞

  3. Lvv

    |´・ω・)ノGet!话说大大你回复的评论我都收不到邮件

    1. S
      @Lvv

      赞赞赞

    2. 友人C
      @Lvv

      你用的是不是QQ邮箱呀,我能收到评论通知呀,在垃圾邮件里面吗?

      1. Lvv
        @友人C

        对的QQ邮箱,但是垃圾邮件里也找不到

        1. 友人C
          @Lvv

          好奇怪啊。好几个人说收不到邮件了,可是我自己测试却能够收到。。。

          1. Lvv
            @友人C

            ⌇●﹏●⌇最奇怪的是,这个回复邮件我就收到了

            1. 友人C
              @Lvv

              我用的是阿里云企业邮箱发信的,这锅可能是阿里云的( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃

  4. yufan

    终于弄好这个插件了,我转走了OωO

    1. 友人C
      @yufan

      尽管转载~

  5. 落叶大大

    拒收此次评论回复邮件通知 默认是选中的。把checked="checked" 去了就好了

    1. 思绪的空中生活
      @落叶大大

      能不能改个头像,你的娘子都有头像,太不像话了

    2. 友人C
      @落叶大大

      已改~

  6. 烟花易冷

    那你很棒哦

  7. 阿歪

    为什么“拒收此次评论回复邮件通知”是默认打勾的啊……

    1. hewro
      @阿歪

      我这边是默认不选上的,可能是缓存问题吧。我等下看看

  8. 阿歪

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

  9. 1900

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

    1. hewro
      @1900

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

  10. 蔡锶铎

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

    1. hewro
      @蔡锶铎

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

      1. 蔡锶铎
        @hewro

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

        1. Hodpel
          @蔡锶铎

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

        2. 友人c
          @蔡锶铎

          还好有WiFi

  11. LiarOnce

    为何感觉话没说完 :arrow:

    1. hewro
      @LiarOnce

      说完了啊 :grin:

发表评论