Typecho邮件模板

一些邮件通知的美化模板

请注意,本文编写于 497 天前,最后修改于 19 天前,其中某些信息可能已经过时。

分享两个在网上扒来的CommentToMail邮件模板。

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

好像水文的能力又加强了(o゚v゚)ノ


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

<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="这里填你自己的图片链接">
        </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 Sharo
Kirima Sharo


这个模板来自小尾巴《Typecho - 邮件模板》

<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的有点像,大概是照着他的改的吧。已经替换掉了原模板中的图片。

<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(这里填你自己的图片链接);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>

效果图:

添加新评论

已有 16 条评论

哇,这个好赞。有朝一日我一定要用上(

mikusa mikusa 回复 @Zeee

噫,你这是要挖我的黑历史啊,大佬快收手……

Zeee Zeee 回复 @mikusa

就……不知不觉看到这里了…… 贵站干货真多

mikusa mikusa 回复 @Zeee

啊啊啊住手啊……

Zeee Zeee 回复 @mikusa

对不起!我不看了

mikusa mikusa 回复 @Zeee

求求大佬快点睡觉吧……

Zeee Zeee 回复 @mikusa

噗,到这个点了

搬走搬走(手动滑稽)

邮件功能修复了,我要把这个搬走

mikusa mikusa 回复 @Lesun

搬走吧

我也启用了这个插件,测试成功,但是评论不发邮件,心塞

mikusa mikusa 回复 @Lesun

你的邮箱是自建的吧,后缀太不常见而且设置有问题,我评论的邮件通知发给你都被退回了

Lesun Lesun 回复 @mikusa

额,别的博客好像没有退回的现象。。。既然有这个现象,那我换一个好了

mikusa mikusa 回复 @Xinger

还行吧