typecho 邮件模板

文章目录
  1. 1. guest.html 模版代码和截图如下：
  2. 2. owner.html 模版代码和截图如下：
  3. 3. 手机上的显示效果：
  • 效果图如下
  • 效果图
    1. owner.html
    2. guest.html

    • 要使用模板，需要安装并启用CommentToMail插件，在评论邮件提醒控制台里将代码复制到guest.html即可。

    这个模板来自kirima sharo “水更新了一下邮件的样式〜”，已经替换掉了原模板中的图片和一些链接。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <div style="background: white;
      width: 80%;
      margin: 100px auto;
      border-radius: 5px;
      border:#e91e639e 1px solid;
      overflow: hidden;
      -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);">
        <header style="overflow: hidden;">
                <a href="#">
                    <img style="width:100%;" src="https://ws1.sinaimg.cn/large/0076sz9Cly1fw84qatfkaj31d00qy4qp.jpg">
                </a>
            </header>
      <div style="padding: 5px 20px;">
        <p style="position: relative;
      color: white;
      float: left;
      background: #e91e63;
      padding: 5px 30px;
      margin: -25px auto 0 ;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.30)">Mail</p>
        <br>
        <h3>您在<a style="text-decoration: none;color: #e91e63 " target="_blank" href="{permalink}">{title}</a>有新的回复</h3>
        <br>
        <p style="font-size: 14px;">您在文章《{title}》上发表的评论:</p>
        <p style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#eee;margin:15px 0px;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">{text_p}</p>
        <p style="font-size: 14px;">博主给您的回复如下</p>
        <p style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#eee;margin:15px 0px;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">{text}</p>
        <p style="font-size: 13px;text-align: right;">{time}</p>
        <hr>
         <div style="text-align: center;"><a style="text-transform: uppercase;
      text-decoration: none;
      font-size: 14px;
      border: 2px solid #6c7575;
      color: #2f3333;
      padding: 10px;
      display: inline-block;
      margin: 10px auto 0;
      " target="_blank" href="{permalink}">查看回复的完整内容</a></div>
        <br>
        <p style="font-size: 14px;text-align: center;">(本邮件为系统自动发送，请勿直接回复。tip:图片显示不了的添加信任即可! 欢迎再次光临<a style="text-decoration: none;color: #e91e63" target="_blank" href="https://www.himiku.com">MIKUSAの小站</a>)</p>
      </div>
    </div>

    效果图：

    Kirima SharoKirima Sharo

    这个模板来自小尾巴“Typecho - 邮件模板”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div style="background: #f8f8f8; color: #666; font-size: 12px;"> 
      <div style="width: 570px; margin: 0 auto; background: #fff; padding: 25px 70px; border-top: 30px solid #1abc9c;"> 
        <div style="text-align: center; margin-bottom: 40px; line-height: 1.8em;"> 
          <h1 style="color: #333;">小尾巴</h1> 
        </div> 
        <p style="font-size: 18px; color: #333;">{author_p}, 您好!</p> 
        您曾在《<a target="_blank" href="{permalink}">{title}</a>》上发表评论:<br /> &nbsp;&nbsp;&nbsp;&nbsp; 
        <p style="border: 1px solid #eee; padding: 20px; margin: 15px 0;"> {text_p} </p> 
        {author} 给您的回应:<br /> &nbsp;&nbsp;&nbsp;&nbsp; 
        <p style="border: 1px solid #eee; padding: 20px; margin: 15px 0;"> 
          <a href="' . htmlspecialchars(get_comment_link($parent_id)) . '">{text}<br /></a> </p> <p class="footer" style="border-top: 1px solid #DDDDDD; padding-top: 6px; margin-top: 15px; color: #838383; text-align: center;">你可以点击此链接 
        <a target="_blank" href="{permalink}">查看完整內容</a>|欢迎再次来访 
        <a href="http://xiaowiba.com">小尾巴</a> 
        </p> 
        <a style="display: block; width: 400px; height: 40px; background: #1abc9c; margin: 25px auto 40px; font-size: 16px; line-height: 40px; letter-spacing: 3px; color: #f8f8f8; text-align: center; text-decoration: none;" href="http://xiaowiba.com" target="_blank">发现更多精彩&gt;&gt;</a> 
        <p style="text-align: center;color: #bbb;margin-top: 40px;">「{siteTitle}」 2018 Copyright.</p> 
      </div> 
    </div>

    这是效果：

    小尾巴小尾巴

    这个模板来自Mikuac “Typecho邮件提醒模板”，和kirima的有点像，大概是照着他的改的吧。已经替换掉了原模板中的图片，顺带加了个。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <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://ws1.sinaimg.cn/large/006Bk6Fzly1fxidutu8uoj30w20kegqh.jpg);width:550px;height: 300px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;"></div>
        <div style="width: 200px;height: 40px;background-color: rgb(255, 114, 114);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>
        <a style="text-decoration:none; color:#FFF;width: 40%;text-align: center;background-color:#ff7272;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>

    效果图：

    img

    guest.html 模版代码和截图如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    xml
    <div style="border-radius:5px;font-size:13px;width:680px;font-family:微软雅黑,'Helvetica Neue',Arial,sans-serif;margin:10px auto 0px;border:1px solid #eee;max-width:100%;">
        <div style="width:100%;background:#49BDAD;color:#FFFFFF;border-radius:5px 5px 0 0;">
            <p style="font-size:15px;word-break:break-all;padding:20px 32px;margin:0;">您在《<a style="color:#FFFFFF;font-weight:bold;text-decoration:none;" href="{permalink}" target="_blank">{title}</a>》一文上的留言有回复啦！</p>
        </div>
        <div style="margin:0px auto;width:90%">
            <p>{author_p}，您好!</p>
            <p>您于 {time} 在文章《{title}》上发表评论：</p>
            <p style="background:#EFEFEF;margin:15px 0px;padding:20px;border-radius:5px;font-size:14px;color:#333;">{text_p}</p>
            <p>{author}给您的回复如下：</p>
            <p style="background:#EFEFEF;margin:15px 0px;padding:20px;border-radius:5px;font-size:14px;color:#333;">{text}</p>
            <p>您可以点击 <a style="color:#42b983;text-decoration:none；" href="{permalink}" target="_blank">查看回复的完整內容</a>。</p>
            <p>感谢您对 <a style="color:#42b983;text-decoration:none；" href="http://xsinger.me/" target="_blank">{siteTitle}</a> 的关注，如您有任何疑问，欢迎来我网站留言。</p>
            <p>（注：此邮件由系统自动发出，请勿回复。）</p>
        </div>
    </div>

    img

    owner.html 模版代码和截图如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    xml
    <div style="border-radius:5px;font-size:13px;width:680px;font-family:微软雅黑,'Helvetica Neue',Arial,sans-serif;margin:10px auto 0px;border:1px solid #eee;max-width:100%;">
        <div style="width:100%;background:#49BDAD;color:#FFFFFF;border-radius:5px 5px 0 0;">
            <p style="font-size:15px;word-break:break-all;padding:20px 32px;margin:0;">{siteTitle}：《<a style="color:#FFFFFF;font-weight:bold;text-decoration:none;" target="_blank" href="{permalink}">{title}</a>》一文有新的评论啦！</p>
        </div>
        <div style="margin:0px auto;width:90%">
            <p>{author} 于 {time} 在《{title}》评论说：</p>
            <p style="background:#EFEFEF;margin:15px 0px;padding:20px;border-radius:5px;font-size:14px;color:#333;">{text}</p>
            <p>IP地址：{ip}，评论邮箱：{mail}。</p>
            <p>本评论已{status}，可登录<a href='{manage}' target='_blank'>网站后台</a>管理评论。</p>
        </div>
    </div>

    img

    手机上的显示效果：

    img

    效果图如下

    TIM图片20181202154532.png

    guest.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
     复制
    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24
    <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://ws1.sinaimg.cn/large/006Bk6Fzly1fxidutu8uoj30w20kegqh.jpg);width:550px;height: 300px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;"></div>
        <div style="width: 200px;height: 40px;background-color: rgb(255, 114, 114);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:#ff7272;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>

    owner.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
     复制
    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17
    <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://ws1.sinaimg.cn/large/006Bk6Fzly1fxidutu8uoj30w20kegqh.jpg);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(255, 114, 114);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>

    版权属于：零

    owner代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    <base target="_blank" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8">
    <style type="text/css">
        ::-webkit-scrollbar{ display: none; }
    </style>
    <style id="cloudAttachStyle" type="text/css">
        #divNeteaseBigAttach, #divNeteaseBigAttach_bak{display:none;}
    </style>
    <div class="container" style="max-width:500px;margin:20px auto;background-color:#fff;box-shadow:1px 1px px #888888;border-radius:10px;font-family:-apple-system,BlinkMacSystemFont,&quot;">
        <div class="mail-box" style="width:100%;">
            <div class="mail-header" style="background:url('https://blog.bbskali.cn/emali.jpg') center center no-repeat;background-size:100% auto;margin:10px 0;width:100%;height:220px;box-sizing:border-box;overflow-y:hidden;">
            </div>
            
            <div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;">
                <p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您的<a style="text-decoration:none;color: #ffffff;" href="https://blog.bbskali.cn"> {siteTitle} </a>上有新的评论啦！
                </p>
            </div>
            <p class="mail-p3" style="border-radius:3px;margin:0;margin-bottom:10px;padding:15px 10px;">
                <strong style="display:inline-block;line-height:20px;background-color:#00a7e0;color:#fff;border-radius:4px;padding:5px 10px;height:20px;">{author}</strong>&nbsp;在&nbsp;<strong><a href="{permalink}" style="text-decoration:underline;color:inherit;">{title}</a></strong>&nbsp;新评论：
            </p>
           <div style="margin:40px auto;width:95%">
                <p>{author} 在您文章《{title}》上发表评论如下，请您检阅:</p>
                <p style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{text}</p>
            
                <p class="wrap" style="text-decoration:none"><span  class="w260"><img class="ico"  width="16" height="16" src="https://blog.bbskali.cn/time.png">：{time}</span><span class="w20"> </span><span class="wauto"><img class="ico" width="18" height="18" src="https://blog.bbskali.cn/ip.png">：{ip}</span></p>
                <p class="wrap" style="text-decoration:none"><span class="w260"><img class="ico" width="16" height="16" src="https://blog.bbskali.cn/email.png">：{mail}</span><span class="w20"> </span><span class="wauto"><img class="ico" width="21" height="19" src="https://blog.bbskali.cn/start.png">：{status}</span></p>
                <p><a style="text-decoration:none; color:#12addb" href="{permalink}" target='_blank'>[查看评论]</a>&nbsp;|&nbsp;<a style="text-decoration:none; color:#12addb" href="{manage}" target='_blank'>[管理评论] </a></p>
                <style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style>
            </div>
            <p class="mail-footer" style="border-radius:3px;margin:0;padding:15px 20px;text-align:right;">
                {siteTitle} 献上诚挚的问候
            </p>
        </div>
    </div>
    <style type="text/css">
        body{font-size:14px;font-family:arial,verdana,sans-serif;line-height:1.666;padding:0;margin:0;overflow:auto;white-space:normal;word-wrap:break-word;min-height:100px}
        td, input, button, select, body{font-family:Helvetica, 'Microsoft Yahei', verdana}
        pre {white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;width:95%}
        th,td{font-family:arial,verdana,sans-serif;line-height:1.666}
        img{ border:0}
        header,footer,section,aside,article,nav,hgroup,figure,figcaption{display:block}
        blockquote{margin-right:0px}
        .wrap span {
            display: inline-block;
            font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;
            font-size: 12px;
            
        }
        .w260{ width: 190px;}
        .w20{ width: 20px;}
        .wauto{ width: auto;}
        .ico{vertical-align:middle;  }
    </style>
    <style id="ntes_link_color" type="text/css">a,td a{color:#064977}</style>

     复制

    guest代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    html
    <base target="_blank" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8">
    <style type="text/css">
        ::-webkit-scrollbar{ display: none; }
    </style>
    <style id="cloudAttachStyle" type="text/css">
        #divNeteaseBigAttach, #divNeteaseBigAttach_bak{display:none;}
    </style>
    <div class="container" style="max-width:500px;margin:20px auto;background-color:#fff;box-shadow:1px 1px px #888888;border-radius:10px;font-family:-apple-system,BlinkMacSystemFont,&quot;">
        <div class="mail-box" style="width:100%;">
            <div class="mail-header" style="background:url('https://blog.bbskali.cn/emali.jpg') center center no-repeat;background-size:100% auto;margin:10px 0;width:100%;height:220px;box-sizing:border-box;overflow-y:hidden;">
            </div>
            
            <div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;">
                <p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您的<a style="text-decoration:none;color: #ffffff;" href="https://blog.bbskali.cn"> {siteTitle} </a>上的评论有回复啦！
                </p>
            </div>
            <p class="mail-p3" style="border-radius:3px;margin:0;margin-bottom:10px;padding:15px 10px;">
                <strong style="display:inline-block;line-height:20px;background-color:#ec6149;color:#fff;border-radius:4px;padding:5px 10px;height:20px;">{author_p}</strong>&nbsp;您在&nbsp;<strong><a href="{permalink}" style="text-decoration:underline;color:inherit;">{title}</a></strong>&nbsp;的评论：
            </p>
           <div style="margin:40px auto;width:95%">
                
                <p style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{text_p}</p>
            
               <p class="mail-p3" style="border-radius:3px;margin:0;margin-bottom:10px;padding:15px 10px;">
                <strong style="display:inline-block;line-height:20px;background-color:#00a7e0;color:#fff;border-radius:4px;padding:5px 10px;height:20px;">{author}</strong>&nbsp;在&nbsp;<strong><a href="{permalink}" style="text-decoration:underline;color:inherit;">{title}</a></strong>&nbsp;回复你：
            </p>
             <p style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{text}</p>
            
            
            </div>
            <p class="mail-footer" style="border-radius:3px;margin:0;padding:15px 20px;text-align:right;">
                {siteTitle} 献上诚挚的问候
            </p>
        </div>
    </div>
    <style type="text/css">
        body{font-size:14px;font-family:arial,verdana,sans-serif;line-height:1.666;padding:0;margin:0;overflow:auto;white-space:normal;word-wrap:break-word;min-height:100px}
        td, input, button, select, body{font-family:Helvetica, 'Microsoft Yahei', verdana}
        pre {white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;width:95%}
        th,td{font-family:arial,verdana,sans-serif;line-height:1.666}
        img{ border:0}
        header,footer,section,aside,article,nav,hgroup,figure,figcaption{display:block}
        blockquote{margin-right:0px}
    </style>
    <style id="ntes_link_color" type="text/css">a,td a{color:#064977}</style>
     复制

    效果图

    提醒评论效果评论回复主效果
    1.png

    2.png

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

    owner.html

    效果：
    QQ20190216-195724@2x.png

    代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    html
    <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://cdn.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

    代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    html
    <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://cdn.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 原创，左岸分享！

    原地址：https://xsinger.me/diy/272.html https://mikuac.com/archives/508/ https://www.himiku.com/archives/442.html https://www.kirimasharo.com/archives/278.html https://blog.bbskali.cn/index.php/archives/657/ https://www.zrahh.com/archives/173.html