邮件样式模板集

Posted on 2026-03-03 17:40 笔名钟意阅读(0) 评论(0) 收藏举报

薇尔莉特

动漫来源出自: 紫罗兰永恒花园
邮件模板作者: 旧版作者未知, 我是在Akilar看到的改版.

<head>
    <base target="_blank"/>
    <style id="scrollbar" type="text/css">::-webkit-scrollbar {
        width: 0 !important
    }

    pre {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        *white-space: normal !important
    }

    pre {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        *white-space: normal !important
    }

    #letter img {
        max-width: 300px
    }</style>
    <style id="from-wrapstyle" type="text/css">#form-wrap {
        overflow: hidden;
        height: 447px;
        position: relative;
        top: 0px;
        transition: all 1s ease-in-out .3s;
        z-index: 0
    }</style>
    <style id="from-wraphoverstyle" type="text/css">#form-wrap:hover {
        height: 1300px;
        top: -200px
    }</style>
</head>
<body>
<div style="width: 530px;margin: 20px auto 0;height: 1000px;">
    <div id="form-wrap"><img src="https://upyun.thatcdn.cn/public/web/email_template/head_before.png" alt="before"
                             style="position: absolute;bottom: 126px;left: 0px;background-repeat: no-repeat;width: 530px;height: 317px;z-index:-100">
        <div style="position: relative;overflow: visible;height: 1500px;width: 500px;margin: 0px auto;transition: all 1s ease-in-out .3s;padding-top:200px;"
        <form>
            <div style="background: white;width: 95%;max-width: 800px;margin: auto auto;border-radius: 5px;border: 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);">
                <img style="width:100%;overflow: hidden;"
                     src="https://upyun.thatcdn.cn/public/web/email_template/head_wely.jpg"/>
                <div style="padding: 5px 20px;"><br>
                    <div><h3 style="text-decoration: none; color: rgb(246, 214, 175);">{{ parent.nick }}，见信安：</h3>
                    </div>
                    <br>
                    <div id="letter"
                         style="overflow:auto;height:300px;width:100%;display:block;word-break: break-all;word-wrap: break-word;">
                        <p style="display: inline-block;">您在<a style="text-decoration: none;color: rgb(246, 214, 175)"
                                                                 target="_blank"
                                                                 href="{{site.url}}">⟬{{ site.name }}⟭</a>上发表的评论:
                        </p>
                        <div id="parentC"
                             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;font-family: 'Arial', 'Microsoft YaHei' , '黑体' , '宋体' , sans-serif;">
                            {{ parent.comment }}
                        </div>
                        <p>收到了来自{{ self.nick }}的回复：</p>
                        <div id="selfC"
                             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;font-family: 'Arial', 'Microsoft YaHei' , '黑体' , '宋体' , sans-serif;">
                            {{ self.comment }}
                        </div>
                    </div>
                    <br>
                    <div style="text-align: center;margin-top: 40px;"><img
                            src="https://upyun.thatcdn.cn/public/web/email_template/footer_bilibili.png" alt="hr"
                            style="width:100%; margin:5px auto 5px auto; display: block;"/><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;background-color: rgb(246, 214, 175);"
                            target="_blank" href="{{site.postUrl}}">{{ parent.nick }}｜请您点击签收~</a></div>
                    <p style="font-size: 12px;text-align: center;color: #999;"><br>薇尔莉特·伊芙加登<br>自动书记人偶竭诚为您服务！<br>©2020-2023<a
                            style="text-decoration:none; color:rgb(246, 214, 175)"
                            href="{{site.url}}">{{ site.name }}</a></p></div>
            </div>
        </form>
    </div>
    <img src="https://upyun.thatcdn.cn/public/web/email_template/head_after.png" alt="after"
         style="      position: absolute;bottom: -2px;left: 0;background-repeat: no-repeat;width: 530px;height: 259px;z-index:100">
</div>
</div></body>

简洁渐变

邮箱模板作者: 未知, 以前PHP站点扒的.

<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);">
	<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="{{site.url}}" target="_blank">{{site.name}}</a>上的留言有新评论啦！</p>
	</div>
		<div style="margin:40px auto;width:90%"><p>{{self.nick}} 回复说：</p>
		<div 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;">{{self.comment | safe}}</div>
		<p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a>。<hr />
		</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>
	</div>`;
	mailSubject: '{{parent.nick | safe}}，『{{site.name | safe}}』上的评论收到了回复',
    mailTemplate: `<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);">
	<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="{{site.url}}" target="_blank">{{site.name}}</a>上的留言有新回复啦！</p>
	</div>
		<div style="margin:40px auto;width:90%"><p>Hi, {{parent.nick}}，您曾在文章上发表评论：</p>
		<div 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;">{{self.comment | safe}}</div>
		<p><strong>{{self.nick}}</strong> 给您的回复如下：</p>
		<div 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;">{{self.comment | safe}}</div>
		<p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb" href="{{site.url}}" target="_blank">{{site.name}}</a>。<hr />
		<p style="font-size:12px;color:#b7adad">本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。</p>
		</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>
	</div>

简洁头图

邮件模板作者: SaraKale根据上面改的.

<div style="background-image: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg.jpg);;padding:20px 0px 20px;margin:0px;background-color:#ded8ca;width:100%;">
	<div style="background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/leisi-714x62.png) repeat-y scroll top;">
		<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffe8dd61;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);margin:auto">
			<img class="headerimg no-lightbox entered loaded" src="https://npm.elemecdn.com/sarakale-assets@v1/bg/bg3.jpg" style="width:100%;overflow:hidden;pointer-events:none" data-ll-status="loaded">
				<div style="width:100%;color:#9d2850;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;">
				<p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;padding: 23px 32px;margin:0;border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #9d2850;" href="{{site.url}}"target="_blank">{{site.name}}</a>上的文章有了新的评论</p>
				</div>
					<div style="margin:40px auto;width:90%;"><p><strong>{{self.nick}}</strong> 回复说：</p>
					<div 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:15px;color:#555555;">{{self.comment | safe}}
					</div>
					<p>您可以点击<a style="text-decoration:none; color:#cf5c83" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a></p>
					</div>
		</div>
	</div>
</div>`,
  mailSubject: '{{parent.nick}}，您在『{{site.name}}』上发表的评论收到了来自 {{self.nick}} 的回复',
  mailTemplate: `<div style="background-image:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg.jpg);;padding:20px 0px 20px;margin:0px;background-color:#ded8ca;width:100%;">
<div style="background:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/leisi-714x62.png) repeat-y scroll top;">
	<div style="border-radius:10px 10px 10px 10px;font-size:14px;color:#555555;width:666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background:#ffe8dd61;box-shadow:0 1px 5px rgba(0,0,0,0.15);margin:auto">
	<img class="headerimg no-lightbox entered loaded" src="https://npm.elemecdn.com/sarakale-assets@v1/bg/bg3.jpg" style="width:100%;overflow:hidden;pointer-events:none" data-ll-status="loaded">
		<div style="width:100%;border-radius:10px 10px 0 0;background-image:-moz-linear-gradient(0deg,rgb(67,198,184),rgb(255,209,244));height:66px;background:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;color:#9d2850;">
		<p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;padding:23px 32px;margin:0;border-radius:10px 10px 0 0;">您在<a style="text-decoration:none;color:#9d2850;" href="{{site.url}}">『{{site.name | safe}}』</a>上的留言有新回复啦！</p>
		</div>
		<div style="margin:40px auto;width:90%;"><p>Hi，{{parent.nick}}，您曾在文章上发表评论：</p>
		<div 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:15px;color:#555555;">{{parent.comment | safe}}</div>
		<p><strong>{{self.nick}}</strong> 给您的回复如下：</p>
		<div 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:15px;color:#555555;">{{self.comment | safe}}</div>
		<p>您可以点击<a style="text-decoration:none;color:#cf5c83" href="{{site.postUrl}}" target="_blank"> 查看回复的完整內容 </a>，欢迎再次光临<a style="text-decoration:none;color:#cf5c83" href="{{site.url}}" target="_blank"> {{site.name}} </a>。
		<hr /><p style="font-size:14px;color:#b7adad">本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。<br />https://sarakale.top/blog</p></p>
		</div>
	</div>
</div>
</div>

组装时间线测试

网易云memos微信读书联合测试

{% timeline api:https://netease.thatapi.cn/user/event?uid=134968139&limit=10 type:custom
config:"[{ 'type': 'root', 'src': 'events' }, { 'type': 'timelines', 'identifier': 'life', 'num': '3', 'sort': 'timestamp' }, { 'type': 'author', 'src': 'user.nickname' }, { 'type': 'avatar', 'src': 'user.avatarUrl' }, { 'type': 'msg', 'src': 'json.msg' }, { 'type': 'netease', 'src': 'json.song.id' }, { 'type': 'tags', 'src': 'map:bottomActivityInfos|name|exclude:JUU5JUJCJTkxJUU4JTgzJUI2' }, { 'type': 'pics', 'src': 'map:pics|originUrl' }, { 'type': 'timestamp', 'src': 'showTime' }, {'type': 'icon', 'src': 'default:aHR0cHMlM0ElMkYlMkZibG9nLnRoYXRjb2Rlci5jbiUyRmN1c3RvbSUyRmltZyUyRiVFNyVCRCU5MSVFNiU5OCU5MyVFNCVCQSU5MSVFOSU5RiVCMyVFNCVCOSU5MC5zdmc='}, { 'type': 'origin', 'src': 'default:LS0lMjBGb3JtJTIwJUU3JUJEJTkxJUU2JTk4JTkzJUU0JUJBJTkxJUU5JTlGJUIzJUU0JUI5JTkw' } ]" %}

{% timeline api:https://mem.sov.red/api/v1/memos?filter=creator%3D%3D'users%2F1'&pageSize=10 type:custom
config:"[{ 'type': 'timelines', 'identifier': 'life', 'num': '3', 'sort': 'timestamp' }, { 'type': 'author', 'src': 'creatorName' }, { 'type': 'avatar', 'src': 'default:aHR0cHMlM0ElMkYlMkZibG9nLnRoYXRjb2Rlci5jbiUyRmN1c3RvbSUyRmltZyUyRmZsb21vLnN2Zw' }, { 'type': 'msg', 'src': 'content|regex:JTIzJTVCJTVDZCU1Q3U0ZTAwLSU1Q3U5ZmE1YS16QS1aJTVEJTJCJTVCJTVDcyU1Q24lNUQ=|markdown:true' }, { 'type': 'pics', 'src': 'map:resourceList|externalLink' }, { 'type': 'timestamp', 'src': 'createdTs' }, {'type': 'icon', 'src': 'default:aHR0cHMlM0ElMkYlMkZibG9nLnRoYXRjb2Rlci5jbiUyRmN1c3RvbSUyRmltZyUyRmZsb21vLnN2Zw'}, { 'type': 'origin', 'src': 'default:LS0lMjBGb3JtJTIwTWVtb3M=' } ]" %}

{% timeline api:https://blog.thatcoder.cn/custom/test/ThatRead.json type:custom
config:"[{ 'type': 'root', 'src': 'data' }, { 'type': 'timelines', 'identifier': 'life', 'num': '3', 'sort': 'timestamp' }, { 'type': 'author', 'src': 'ideaAuthor' }, { 'type': 'avatar', 'src': 'ideaAvtar' }, { 'type': 'msg', 'src': 'ideaContent' }, { 'type': 'quote', 'src': 'ideaQuote' }, { 'type': 'timestamp', 'src': 'ideaTime' }, {'type': 'icon', 'src': 'default:aHR0cHMlM0ElMkYlMkZibG9nLnRoYXRjb2Rlci5jbiUyRmN1c3RvbSUyRmltZyUyRiVFNSVCRSVBRSVFNCVCRiVBMSVFOCVBRiVCQiVFNCVCOSVBNi5zdmc='}, { 'type': 'origin', 'src': 'default:LS0lMjBGcm9tJTIwJUU1JUJFJUFFJUU0JUJGJUExJUU4JUFGJUJCJUU0JUI5JUE2' } ]" %}

memos单个测试

标识符不同应该不会混淆进去
{% timeline api:https://mem.sov.red/api/v1/memos?filter=creator%3D%3D'users%2F1'&pageSize=10 type:custom
config:"[{ 'type': 'author', 'src': 'creatorName' }, { 'type': 'avatar', 'src': 'default:aHR0cHMlM0ElMkYlMkZibG9nLnRoYXRjb2Rlci5jbiUyRmN1c3RvbSUyRmltZyUyRmZsb21vLnN2Zw' }, { 'type': 'msg', 'src': 'content|regex:JTIzJTVCJTVDZCU1Q3U0ZTAwLSU1Q3U5ZmE1YS16QS1aJTVEJTJCJTVCJTVDcyU1Q24lNUQ=|markdown:true' }, { 'type': 'pics', 'src': 'map:resourceList|externalLink' }, { 'type': 'timestamp', 'src': 'createdTs' }, {'type': 'icon', 'src': 'default:aHR0cHMlM0ElMkYlMkZibG9nLnRoYXRjb2Rlci5jbiUyRmN1c3RvbSUyRmltZyUyRmZsb21vLnN2Zw'}, { 'type': 'origin', 'src': 'default:LS0lMjBGb3JtJTIwTWVtb3M=' } ]" %}

刷新页面返回顶部

Joney Knight