MENU

推荐一款CommentToMail邮件插件的模板

February 16, 2019 • 网站优化

  • CommentToMail是个好Typecho插件!
  • 此文章介绍了一款我正在使用的CommentToMail邮件插件的精美模板,将代码分别复制到插件中的 owner.htmlguest.html 即可食用!

图片比例为11:5,可自行更改div标签中的url

owner.html

效果:
QQ20190216-195724@2x.png

代码:

<div style="width: 550px;height: auto;border-radius: 5px;margin:0 auto;border:1px solid #ffb0b0;box-shadow: 0px 0px 20px #888888;position: relative;">
    <div style="background-image: url(https://www.zrahh.com/img/mail.png);width:550px;height: 250px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;"></div>
    <div style="background-color:white;line-height:180%;padding:0 15px 12px;width:520px;margin:10px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;margin-bottom: 0px;">
        <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span style="color: #12ADDB;font-weight: bold;">&gt; </span>您的文章<a style="text-decoration:none;color: #12ADDB;" href="{permalink}" target="_blank">《{title}》</a>有了新的回复耶~</h2>
        <div style="padding:0 12px 0 12px;margin-top:18px">
        <p>时间:<span style="border-bottom:1px dashed #ccc;" t="5" times=" 20:42">{time}</span></p> 
            <p><strong>{author}</strong>&nbsp;给您的评论:</p>
            <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">{text}</p>
            <p>其他信息:</p>
            <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">IP:{ip}<br />邮箱:<a href="mailto:{mail}">{mail}</a><br />状态:{status} [<a href='{manage}' target='_blank'>管理评论</a>]</p>
        </div>
    </div>
    <a style="text-decoration: none;color: rgb(255, 255, 255);width: 40%;text-align: center;background-color: rgb(145, 165, 165);height: 40px;line-height: 40px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);display: block;margin: auto;" href="{permalink}" target="_blank">查看回复的完整內容</a>
    <div style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;">
        <p>©2017-2019 Copyright {author}</p>
    </div>
</div>

guest.html

效果:
QQ20190216-200228@2x.png

代码:

<div style="width: 550px;height: auto;border-radius: 5px;margin:0 auto;border:1px solid #ffb0b0;box-shadow: 0px 0px 20px #888888;position: relative;padding-bottom: 5px;">
    <div style="background-image: url(https://www.zrahh.com/img/mail.png);width:550px;height: 250px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;"></div>
    <div style="width: 200px;height: 40px;background-color: #91a5a5;margin-top: -20px;margin-left: 20px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);color: rgb(255, 255, 255);text-align: center;line-height: 40px;">Dear: {author_p}</div>
    <div style="background-color:white;line-height:180%;padding:0 15px 12px;width:520px;margin:30px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;margin-bottom: 0px;">  
        <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span style="color: #12ADDB;font-weight: bold;">&gt; </span>您在<a style="text-decoration:none;color: #12ADDB;" href="{permalink}" target="_blank">《{title}》</a>的评论有了新的回复呐~</h2>  
        <div style="padding:0 12px 0 12px;margin-top:18px">  
            <p>时间:<span style="border-bottom:1px dashed #ccc;" t="5" times=" 20:42">{time}</span></p>          
            <p>您的评论:</p>  
            <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">{text_p}</p>  
            <p><strong>{author}</strong>&nbsp;给您的回复:</p>  
            <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">{text}</p>  
        </div>  
    </div>
    <div style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;word-wrap:break-word;margin-top: -30px;">
        <p style="padding:20px;">萤火虫消失之后,那光的轨迹仍久久地印在我的脑际。那微弱浅淡的光点,仿佛迷失方向的魂灵,在漆黑厚重的夜幕中彷徨。——《挪威的森林》村上村树</p>
    </div>
    <a style="text-decoration:none; color:#FFF;width: 40%;text-align: center;background-color:#91a5a5;height: 40px;line-height: 35px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.30);margin: -10px auto;display: block;" href="{permalink}" target="_blank">查看回复的完整內容</a>
    <div style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;margin-top: 30px;">
        <p>本邮件为系统自动发送,请勿直接回复~</p>
    </div>
    <div style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;">
        <p>©2017-2019 Copyright {author}</p>
    </div>
</div>

SimpleZero原创,左岸分享!

Leave a Comment

34 Comments
  1. 林逸 林逸     Windows 10 /    Google Chrome

    偷走啦!不做伸手党,留名~@(你懂的)

  2. 倾心 倾心     Android Pie /    Google Chrome

    @(滑稽)偷偷拿走,233~

  3. AdviseRed AdviseRed     Windows 10 /    Google Chrome

    快点给老子更!!!!!!!!@(滑稽)

  4. Raven Raven     Windows 10 /    Google Chrome

    大佬,改了你这个模板后,owner是可以有的,guest收不到邮件呢?@(喷)

    1. 左岸 左岸     MacOS /    Google Chrome

      @Raven不会啊,我刚刚测试了还能收到呢@(小乖)

    2. Raven Raven     Android Pie /    Google Chrome

      @左岸我反复测试了一下,最后发现是 Dear author_p那个div加载不出来,只要加上那个就收不到,会不会是安装的插件不同版本的原因呀@(小乖)(原谅没学过前段不知道怎么表述,望大佬看的懂)

  5. 东方幻梦 东方幻梦     Windows 7 /    Google Chrome

    我在想...emlog能不能弄上#(狂汗)

    1. 左岸 左岸     Android Pie /    Google Chrome

      @东方幻梦没用过emlog唉,如果有类似得插件改改变量肯定可以的。

  6. 逝雪蓝冰 逝雪蓝冰     Windows 7 /    Google Chrome

    果然私人订制一下要更好看一点,收藏了,准备有空就去捣鼓一下!@(太开心)

    1. 左岸 左岸     MacOS /    Google Chrome

      @逝雪蓝冰可以换一下背景图,很不错的@(吐舌)

  7. 可迷Kemi 可迷Kemi     iPhone /    Safari

    怎么没有用ios的。。。看遍了评论区

    1. 左岸 左岸     MacOS /    Google Chrome

      @可迷Kemi哈哈,用安卓的比较多,其他文章下面也有ios的@(小乖)

  8. Mr.Chou Mr.Chou     Windows 7 /    Google Chrome

    我用的是LOVEKK那款,自己也修改了..

    1. 左岸 左岸     MacOS /    Google Chrome

      @Mr.ChouLOVEKK也是个很不错的插件呀!自带的模板看的不舒服就忍不住手痒改一下哈哈 ::quyin:1huaji::

    2. Mr.Chou Mr.Chou     Android Pie /    Google Chrome

      @左岸都有些什么毛病,一有时间总想改这改那

    3. 左岸 左岸     MacOS /    Google Chrome

      @Mr.Chou今天看您的博客感触很大,想开一个生活随笔模块了!

  9. 枫灵er 枫灵er     Windows 10 /    Google Chrome

    我来回访啦!!嘿嘿嘿

    1. 左岸 左岸     MacOS /    Google Chrome

      @枫灵er嘿嘿,欢迎常来哦! ::quyin:feizao::

    2. 枫灵er 枫灵er     Windows 10 /    Google Chrome

      @左岸嘿嘿嘿会的!!!
      (๑•̀ㅁ•́ฅ)

  10. 刘大喵 刘大喵     Linux /    Google Chrome

    我以前试过邮件加图片好像会显示不出来? ::aru:frown:: 不知道什么问题 回头试试你这个

    1. 左岸 左岸     Android Pie /    Google Chrome

      @刘大喵嗯嗯,您可以试下,我这里是没问题的! ::quyin:heng::