twikoo邮箱通知模板分享
原创2024年8月22日大约 56 分钟...约 16674 字
相关信息
7bu 图床在上传相同图片时,生成的链接是一样的~可以减少成本,但是对客户来说无疑一个人没有那么多访问量的情况下,导致达到那么多。好筹划。
1. 效果预览
MAIL_TEMPLATE 预览效果
MAIL_TEMPLATE_ADMIN 模板预览效果
2. 参考文章
3. MAIL_TEMPLATE 模板
代码已经分享到了 CodePen
将代码压缩(例如 minify),然后进到 twikoo 后台-配置管理-邮件通知
在 MAIL_TEMPLATE
一项填入压缩后的代码
代码如下:
模版
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
<div class="box_3 flex-col" style="
display: flex;
position: relative;
width: 100%;
height: 206px;
background: #3E3DA8;
background-size: auto 100%;
background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url("https://imgmo.com/images/2023/09/26/4e2e15ef06227b24194674bbb6dea458.png");
background-position: center;
top: 0;
left: 0;
justify-content: center;
border-radius: 15px 15px 15px 15px;
"><div class="section_1 flex-col" style="
background-image: url("https://imgmo.com/images/2023/09/26/60245c22765755533c72a892803de49a.png");
position: absolute;
width: 152px;
height: 152px;
display: flex;
top: 130px;
background-size: cover;
"></div></div>
<div class="box_4 flex-col" style="
margin-top: 92px;
display: flex;
flex-direction: column;
align-items: center;
">
<div class="text-group_5 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;
">
<span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #F3E6FF;
line-height: 37px;
text-align: center;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
<span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FEB3B1;
line-height: 22px;
margin-top: 21px;
text-align: center;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</span>
</div>
<div class="box_2 flex-row" style="
margin: 0 20px;
min-height: 128px;
background: #F3E6FF;
border-radius: 12px;
margin-top: 34px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 3px 16px 32px 16px;
width: 85%;
">
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
flex-direction: column;
width: 90%;
margin: auto;
margin-bottom: 16px;
">
<div style="
padding:15px 12px 0 12px;
margin-top:0px
">
<div class=Messages_box>
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 45px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F9;
padding:3px 10% 4px 10%;
border-radius:9px
">留言板</strong></p>
<hr style="
display: flex;
position: relative;
border: 9px double #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">原文记录</strong></p>
<div class="ax_post_box-comments-single Messages-author"
style="
display:flex;
justify-content:flex-end;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none;
order:2
"><img src=${PARENT_IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-right:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:8px solid;
border-left-color:#3E3DA8;
border-right:0;
border-right-color:transparent;
right:-7px;
left:auto;
top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner
style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${PARENT_COMMENT}</div></div></div>
<hr style="
display: flex;
position: relative;
border: 1px dashed #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
margin-top:30px
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">当前位置</strong></p>
<p><strong style="
font-size: 20px;
color:#3E3DA8"
>${NICK}</strong><strong style="
color:#E25860;
"> 回复:</strong></p>
<div class="ax_post_box-comments-single Messages-user" style="
display:flex;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none
"><img src=${IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-left:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid;
border-right-color:#3E3DA8;
left:-7px;
right:auto;
top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${COMMENT}</div></div></div></div></div></div>
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #7877F9;
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
<span class="text_5" style="
color: #F3E6FF;
">查看详情</span>
</a>
</div>
<div class="text-group_6 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin-top: 34px;
">
<span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
">此邮件由评论服务自动发出,直接回复无效。</span>
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEB3B1;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
" href="${SITE_URL}">前往博客</a>
<a class="text_8" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
"></a>
</div>
</div>
</div>
我的修改
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
<div class="box_3 flex-col" style="
display: flex;
position: relative;
width: 100%;
height: 206px;
background: #3E3DA8;
background-size: auto 100%;
background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url("https://bu.dusays.com/2024/01/27/65b4c831864d1.webp");
background-position: center;
top: 0;
left: 0;
justify-content: center;
border-radius: 15px 15px 15px 15px;
">
<div class="section_1 flex-col" style="
background-image: url("https://bu.dusays.com/2024/01/27/65b505aed10bc.png");
position: absolute;
width: 152px;
height: 152px;
display: flex;
top: 130px;
background-size: cover;
"></div>
</div>
<div class="box_4 flex-col" style="
margin-top: 92px;
display: flex;
flex-direction: column;
align-items: center;
">
<div class="text-group_5 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;
">
<span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #F3E6FF;
line-height: 37px;
text-align: center;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
<span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FEB3B1;
line-height: 22px;
margin-top: 21px;
text-align: center;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</span>
</div>
<div class="box_2 flex-row" style="
margin: 0 20px;
min-height: 128px;
background: #F3E6FF;
border-radius: 12px;
margin-top: 34px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 3px 16px 32px 16px;
width: 85%;
">
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
flex-direction: column;
width: 90%;
margin: auto;
margin-bottom: 16px;
">
<div style="
padding:15px 12px 0 12px;
margin-top:0px
">
<div class=Messages_box>
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 45px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F9;
padding:3px 10% 4px 10%;
border-radius:9px
">留言板</strong></p>
<hr style="
display: flex;
position: relative;
border: 9px double #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">原文记录</strong></p>
<div class="ax_post_box-comments-single Messages-author"
style="
display:flex;
justify-content:flex-end;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none;
order:2
"><img src=${PARENT_IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-right:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:8px solid;
border-left-color:#3E3DA8;
border-right:0;
border-right-color:transparent;
right:-7px;
left:auto;
top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner
style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${PARENT_COMMENT}
</div>
</div>
</div>
<hr style="
display: flex;
position: relative;
border: 1px dashed #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
margin-top:30px
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">当前位置</strong></p>
<p><strong style="
font-size: 20px;
color:#3E3DA8"
>${NICK}</strong><strong style="
color:#E25860;
"> 回复:</strong></p>
<div class="ax_post_box-comments-single Messages-user" style="
display:flex;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none
"><img src=${IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-left:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid;
border-right-color:#3E3DA8;
left:-7px;
right:auto;
top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${COMMENT}
</div>
</div>
</div>
</div>
</div>
</div>
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #7877F9;
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
<span class="text_5" style="
color: #F3E6FF;
">查看详情</span>
</a>
</div>
<div class="text-group_6 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin-top: 34px;
">
<span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
">此邮件由评论服务自动发出,直接回复无效。</span>
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEB3B1;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
" href="${SITE_URL}">前往博客</a>
<a class="text_8" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
"></a>
</div>
</div>
</div>
CodePen「防止链接失效|备份」
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
<div class="box_3 flex-col" style="
display: flex;
position: relative;
width: 100%;
height: 206px;
background: #3E3DA8;
background-size: auto 100%;
background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url("https://imgmo.com/images/2023/09/26/4e2e15ef06227b24194674bbb6dea458.png");
background-position: center;
top: 0;
left: 0;
justify-content: center;
border-radius: 15px 15px 15px 15px;
"><div class="section_1 flex-col" style="
background-image: url("https://imgmo.com/images/2023/09/26/60245c22765755533c72a892803de49a.png");
position: absolute;
width: 152px;
height: 152px;
display: flex;
top: 130px;
background-size: cover;
"></div></div>
<div class="box_4 flex-col" style="
margin-top: 92px;
display: flex;
flex-direction: column;
align-items: center;
">
<div class="text-group_5 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;
">
<span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #F3E6FF;
line-height: 37px;
text-align: center;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
<span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FEB3B1;
line-height: 22px;
margin-top: 21px;
text-align: center;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</span>
</div>
<div class="box_2 flex-row" style="
margin: 0 20px;
min-height: 128px;
background: #F3E6FF;
border-radius: 12px;
margin-top: 34px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 3px 16px 32px 16px;
width: 85%;
">
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
flex-direction: column;
width: 90%;
margin: auto;
margin-bottom: 16px;
">
<div style="
padding:15px 12px 0 12px;
margin-top:0px
">
<div class=Messages_box>
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 45px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F9;
padding:3px 10% 4px 10%;
border-radius:9px
">留言板</strong></p>
<hr style="
display: flex;
position: relative;
border: 9px double #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">原文记录</strong></p>
<div class="ax_post_box-comments-single Messages-author"
style="
display:flex;
justify-content:flex-end;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none;
order:2
"><img src=${PARENT_IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-right:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:8px solid;
border-left-color:#3E3DA8;
border-right:0;
border-right-color:transparent;
right:-7px;
left:auto;
top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner
style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${PARENT_COMMENT}</div></div></div>
<hr style="
display: flex;
position: relative;
border: 1px dashed #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
margin-top:30px
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">当前位置</strong></p>
<p><strong style="
font-size: 20px;
color:#3E3DA8"
>${NICK}</strong><strong style="
color:#E25860;
"> 回复:</strong></p>
<div class="ax_post_box-comments-single Messages-user" style="
display:flex;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none
"><img src=${IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-left:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid;
border-right-color:#3E3DA8;
left:-7px;
right:auto;
top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${COMMENT}</div></div></div></div></div></div>
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #7877F9;
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
<span class="text_5" style="
color: #F3E6FF;
">查看详情</span>
</a>
</div>
<div class="text-group_6 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin-top: 34px;
">
<span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
">此邮件由评论服务自动发出,直接回复无效。</span>
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEB3B1;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
" href="${SITE_URL}">前往博客</a>
<a class="text_8" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
"></a>
</div>
</div>
</div>
我压缩后的代码
<div class="flex-col page"style="background-image:linear-gradient(to bottom,#7877f9,#3e3da8)"><div class="flex-col box_3"style="display:flex;position:relative;width:100%;height:206px;background:#3e3da8;background-size:auto 100%;background-image:linear-gradient(to bottom,rgba(62,61,168,0) 0,rgba(62,61,168,.1) 80%,rgba(62,61,168,1) 100%),url(https://bu.dusays.com/2024/01/27/65b4c831864d1.webp);background-position:center;top:0;left:0;justify-content:center;border-radius:15px 15px 15px 15px"><div class="flex-col section_1"style=background-image:url(https://bu.dusays.com/2024/01/27/65b505aed10bc.png);position:absolute;width:152px;height:152px;display:flex;top:130px;background-size:cover></div></div><div class="flex-col box_4"style=margin-top:92px;display:flex;flex-direction:column;align-items:center><div class="flex-col justify-between text-group_5"style="display:flex;flex-direction:column;align-items:center;margin:0 20px"><span class=text_1 style=font-size:26px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#f3e6ff;line-height:37px;text-align:center>嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span><span class=text_2 style=font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#feb3b1;line-height:22px;margin-top:21px;text-align:center>你之前的评论 在 ${SITE_NAME}博客中收到来自 ${NICK} 的回复</span></div><div class="box_2 flex-row"style="margin:0 20px;min-height:128px;background:#f3e6ff;border-radius:12px;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;padding:3px 16px 32px 16px;width:85%"><div class="flex-col justify-between text-wrapper_4"style=display:flex;flex-direction:column;width:90%;margin:auto;margin-bottom:16px><div style="padding:15px 12px 0 12px;margin-top:0"><div class=Messages_box><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="font-size:45px;color:#f3e6ff;max-width:506px;background-color:#7877f9;padding:3px 10% 4px 10%;border-radius:9px">留言板</strong><hr style="display:flex;position:relative;border:9px double #3e3da8;box-sizing:content-box;height:0;overflow:visible;width:100%"><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="font-size:10px;color:#f3e6ff;max-width:506px;background-color:#7877F980;padding:3px 60px 4px 60px;border-radius:9px">原文记录</strong><div class="ax_post_box-comments-single Messages-author"style=display:flex;justify-content:flex-end;margin-bottom:5px;margin-top:7px;color:#feb3b1><div class=ax_post_box-comment-avatar style=width:auto;flex:none;order:2><img src=${PARENT_IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=position:relative;margin-right:10px><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid;border-left-color:#3e3da8;border-right:0;border-right-color:transparent;right:-7px;left:auto;top:12px;position:absolute"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#3e3da8;padding:10px;border-radius:9px;margin-bottom:3px>${PARENT_COMMENT}</div></div></div><hr style="display:flex;position:relative;border:1px dashed #3e3da8;box-sizing:content-box;height:0;overflow:visible;width:100%;margin-top:30px"><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="font-size:10px;color:#f3e6ff;max-width:506px;background-color:#7877F980;padding:3px 60px 4px 60px;border-radius:9px">当前位置</strong><p><strong style=font-size:20px;color:#3e3da8>${NICK}</strong><strong style=color:#e25860>回复:</strong><div class="ax_post_box-comments-single Messages-user"style=display:flex;margin-bottom:5px;margin-top:7px;color:#feb3b1><div class=ax_post_box-comment-avatar style=width:auto;flex:none><img src=${IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=position:relative;margin-left:10px><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#3e3da8;left:-7px;right:auto;top:12px;position:absolute"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#3e3da8;padding:10px;border-radius:9px;margin-bottom:3px>${COMMENT}</div></div></div></div></div></div><a class="flex-col text-wrapper_2"style=min-width:106px;height:38px;background:#7877f9;border-radius:32px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:auto;margin-top:32px href=${POST_URL}><span class=text_5 style=color:#f3e6ff>查看详情</span></a></div><div class="flex-col justify-between text-group_6"style=display:flex;flex-direction:column;align-items:center;margin-top:34px><span class=text_6 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px">此邮件由评论服务自动发出,直接回复无效。</span><a class=text_7 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#feb3b1;line-height:17px;margin-top:6px;text-decoration:none"href=${SITE_URL}>前往博客</a><a class=text_8 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px;margin-top:6px;text-decoration:none"></a></div></div></div>
4. MAIL_TEMPLATE_ADMIN 模板
如果还需要 MAIL_TEMPLATE_ADMIN 的模板代码
也分享到 CodePen 了
代码如下:
模版
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
<div class="box_3 flex-col" style="
display: flex;
position: relative;
width: 100%;
height: 206px;
background: #3E3DA8;
background-size: auto 100%;
background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url("https://imgmo.com/images/2023/09/26/4e2e15ef06227b24194674bbb6dea458.png");
background-position: center;
top: 0;
left: 0;
justify-content: center;
border-radius: 15px 15px 15px 15px;
"><div class="section_1 flex-col" style="
background-image: url("https://imgmo.com/images/2023/09/26/60245c22765755533c72a892803de49a.png");
position: absolute;
width: 152px;
height: 152px;
display: flex;
top: 130px;
background-size: cover;
"></div></div>
<div class="box_4 flex-col" style="
margin-top: 92px;
display: flex;
flex-direction: column;
align-items: center;
">
<div class="text-group_5 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;
">
<span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #F3E6FF;
line-height: 37px;
text-align: center;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
<span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FEB3B1;
line-height: 22px;
margin-top: 21px;
text-align: center;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} (${MAIL}) 的回复</span>
</div>
<div class="box_2 flex-row" style="
margin: 0 20px;
min-height: 128px;
background: #F3E6FF;
border-radius: 12px;
margin-top: 34px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 3px 16px 32px 16px;
width: 85%;
">
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
flex-direction: column;
width: 90%;
margin: auto;
margin-bottom: 16px;
">
<div style="
padding:15px 12px 0 12px;
margin-top:0px
">
<div class=Messages_box>
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 45px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F9;
padding:3px 10% 4px 10%;
border-radius:9px
">📫博主收件箱</strong></p>
<hr style="
display: flex;
position: relative;
border: 2px dashed #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">新消息</strong></p>
<p><strong style="
font-size: 20px;
color:#3E3DA8"
>${NICK}</strong><strong style="
color:#E25860;
"> :</strong></p>
<div class="ax_post_box-comments-single Messages-user" style="
display:flex;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none
"><img src=${IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-left:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid;
border-right-color:#3E3DA8;
left:-7px;
right:auto;
top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${COMMENT}</div></div></div></div></div></div>
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #7877F9;
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
<span class="text_5" style="
color: #F3E6FF;
">查看详情</span>
</a>
</div>
<div class="text-group_6 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin-top: 34px;
">
<span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
">此邮件由评论服务自动发出,直接回复无效。</span>
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEB3B1;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
" href="${SITE_URL}">前往博客</a>
<a class="text_8" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
"></a>
</div>
</div>
</div>
我的修改
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
<div class="box_3 flex-col" style="
display: flex;
position: relative;
width: 100%;
height: 206px;
background: #3E3DA8;
background-size: auto 100%;
background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url("https://bu.dusays.com/2024/01/27/65b4c831864d1.webp");
background-position: center;
top: 0;
left: 0;
justify-content: center;
border-radius: 15px 15px 15px 15px;
">
<div class="section_1 flex-col" style="
background-image: url("https://bornforthis.cn/aiyc.svg");
position: absolute;
width: 152px;
height: 152px;
display: flex;
top: 130px;
background-size: cover;
"></div>
</div>
<div class="box_4 flex-col" style="
margin-top: 92px;
display: flex;
flex-direction: column;
align-items: center;
">
<div class="text-group_5 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;
">
<span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #F3E6FF;
line-height: 37px;
text-align: center;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
<span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FEB3B1;
line-height: 22px;
margin-top: 21px;
text-align: center;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} (${MAIL}) 的回复</span>
</div>
<div class="box_2 flex-row" style="
margin: 0 20px;
min-height: 128px;
background: #F3E6FF;
border-radius: 12px;
margin-top: 34px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 3px 16px 32px 16px;
width: 85%;
">
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
flex-direction: column;
width: 90%;
margin: auto;
margin-bottom: 16px;
">
<div style="
padding:15px 12px 0 12px;
margin-top:0px
">
<div class=Messages_box>
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 45px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F9;
padding:3px 10% 4px 10%;
border-radius:9px
">📫博主收件箱</strong></p>
<hr style="
display: flex;
position: relative;
border: 2px dashed #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">新消息</strong></p>
<p><strong style="
font-size: 20px;
color:#3E3DA8"
>${NICK}</strong><strong style="
color:#E25860;
"> :</strong></p>
<div class="ax_post_box-comments-single Messages-user" style="
display:flex;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none
"><img src=${IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-left:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid;
border-right-color:#3E3DA8;
left:-7px;
right:auto;
top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${COMMENT}
</div>
</div>
</div>
</div>
</div>
</div>
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #7877F9;
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
<span class="text_5" style="
color: #F3E6FF;
">查看详情</span>
</a>
</div>
<div class="text-group_6 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin-top: 34px;
">
<span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
">此邮件由评论服务自动发出,直接回复无效。</span>
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEB3B1;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
" href="${SITE_URL}">前往博客</a>
<a class="text_8" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
"></a>
</div>
</div>
</div>
压缩后的代码
<div class="flex-col page"style="background-image:linear-gradient(to bottom,#7877f9,#3e3da8)"><div class="flex-col box_3"style="display:flex;position:relative;width:100%;height:206px;background:#3e3da8;background-size:auto 100%;background-image:linear-gradient(to bottom,rgba(62,61,168,0) 0,rgba(62,61,168,.1) 80%,rgba(62,61,168,1) 100%),url(https://bu.dusays.com/2024/01/27/65b4c831864d1.webp);background-position:center;top:0;left:0;justify-content:center;border-radius:15px 15px 15px 15px"><div class="flex-col section_1"style=background-image:url(https://bornforthis.cn/aiyc.svg);position:absolute;width:152px;height:152px;display:flex;top:130px;background-size:cover></div></div><div class="flex-col box_4"style=margin-top:92px;display:flex;flex-direction:column;align-items:center><div class="flex-col justify-between text-group_5"style="display:flex;flex-direction:column;align-items:center;margin:0 20px"><span class=text_1 style=font-size:26px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#f3e6ff;line-height:37px;text-align:center>嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span> <span class=text_2 style=font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#feb3b1;line-height:22px;margin-top:21px;text-align:center>你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} (${MAIL}) 的回复</span></div><div class="box_2 flex-row"style="margin:0 20px;min-height:128px;background:#f3e6ff;border-radius:12px;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;padding:3px 16px 32px 16px;width:85%"><div class="flex-col justify-between text-wrapper_4"style=display:flex;flex-direction:column;width:90%;margin:auto;margin-bottom:16px><div style="padding:15px 12px 0 12px;margin-top:0"><div class=Messages_box><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="font-size:45px;color:#f3e6ff;max-width:506px;background-color:#7877f9;padding:3px 10% 4px 10%;border-radius:9px">📫博主收件箱</strong><hr style="display:flex;position:relative;border:2px dashed #3e3da8;box-sizing:content-box;height:0;overflow:visible;width:100%"><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="font-size:10px;color:#f3e6ff;max-width:506px;background-color:#7877F980;padding:3px 60px 4px 60px;border-radius:9px">新消息</strong><p><strong style=font-size:20px;color:#3e3da8>${NICK}</strong><strong style=color:#e25860> :</strong><div class="Messages-user ax_post_box-comments-single"style=display:flex;margin-bottom:5px;margin-top:7px;color:#feb3b1><div class=ax_post_box-comment-avatar style=width:auto;flex:none><img src=${IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=position:relative;margin-left:10px><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#3e3da8;left:-7px;right:auto;top:12px;position:absolute"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#3e3da8;padding:10px;border-radius:9px;margin-bottom:3px>${COMMENT}</div></div></div></div></div></div><a class="flex-col text-wrapper_2"style=min-width:106px;height:38px;background:#7877f9;border-radius:32px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:auto;margin-top:32px href=${POST_URL}><span class=text_5 style=color:#f3e6ff>查看详情</span></a></div><div class="flex-col justify-between text-group_6"style=display:flex;flex-direction:column;align-items:center;margin-top:34px><span class=text_6 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px">此邮件由评论服务自动发出,直接回复无效。</span> <a class=text_7 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#feb3b1;line-height:17px;margin-top:6px;text-decoration:none"href=${SITE_URL}>前往博客</a> <a class=text_8 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px;margin-top:6px;text-decoration:none"></a></div></div></div>
CodePen「防止链接丢失|备份」
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
<div class="box_3 flex-col" style="
display: flex;
position: relative;
width: 100%;
height: 206px;
background: #3E3DA8;
background-size: auto 100%;
background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url("https://imgmo.com/images/2023/09/26/4e2e15ef06227b24194674bbb6dea458.png");
background-position: center;
top: 0;
left: 0;
justify-content: center;
border-radius: 15px 15px 15px 15px;
"><div class="section_1 flex-col" style="
background-image: url("https://imgmo.com/images/2023/09/26/60245c22765755533c72a892803de49a.png");
position: absolute;
width: 152px;
height: 152px;
display: flex;
top: 130px;
background-size: cover;
"></div></div>
<div class="box_4 flex-col" style="
margin-top: 92px;
display: flex;
flex-direction: column;
align-items: center;
">
<div class="text-group_5 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;
">
<span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #F3E6FF;
line-height: 37px;
text-align: center;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
<span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FEB3B1;
line-height: 22px;
margin-top: 21px;
text-align: center;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} (${MAIL}) 的回复</span>
</div>
<div class="box_2 flex-row" style="
margin: 0 20px;
min-height: 128px;
background: #F3E6FF;
border-radius: 12px;
margin-top: 34px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 3px 16px 32px 16px;
width: 85%;
">
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
flex-direction: column;
width: 90%;
margin: auto;
margin-bottom: 16px;
">
<div style="
padding:15px 12px 0 12px;
margin-top:0px
">
<div class=Messages_box>
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 45px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F9;
padding:3px 10% 4px 10%;
border-radius:9px
">📫博主收件箱</strong></p>
<hr style="
display: flex;
position: relative;
border: 2px dashed #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">新消息</strong></p>
<p><strong style="
font-size: 20px;
color:#3E3DA8"
>${NICK}</strong><strong style="
color:#E25860;
"> :</strong></p>
<div class="ax_post_box-comments-single Messages-user" style="
display:flex;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none
"><img src=${IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-left:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid;
border-right-color:#3E3DA8;
left:-7px;
right:auto;
top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${COMMENT}</div></div></div></div></div></div>
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #7877F9;
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
<span class="text_5" style="
color: #F3E6FF;
">查看详情</span>
</a>
</div>
<div class="text-group_6 flex-col justify-between" style="
display: flex;
flex-direction: column;
align-items: center;
margin-top: 34px;
">
<span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
">此邮件由评论服务自动发出,直接回复无效。</span>
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEB3B1;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
" href="${SITE_URL}">前往博客</a>
<a class="text_8" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
"></a>
</div>
</div>
</div>
5. 问题
对于谷歌邮箱是有问题的,有能力的可以修复评论给我哈~
Code1
<div class="flex-col page"style="background-image:linear-gradient(to bottom,#7877f9,#3e3da8)"><div class="flex-col box_3"style="display:flex;position:relative;width:100%;height:206px;background:#3e3da8;background-size:auto 100%;background-image:linear-gradient(to bottom,rgba(62,61,168,0) 0,rgba(62,61,168,.1) 80%,rgba(62,61,168,1) 100%),url(https://blog.bornforthis.cn/img/email/%E8%AF%BB%E8%80%85%E8%83%8C%E6%99%AF.webp);background-position:center;top:0;left:0;justify-content:center;border-radius:15px 15px 15px 15px"><div class="flex-col section_1"style=background-image:url(https://bornforthis.cn/aiyc.svg);position:absolute;width:152px;height:152px;display:flex;top:130px;background-size:cover></div></div><div class="flex-col box_4"style=margin-top:92px;display:flex;flex-direction:column;align-items:center><div class="flex-col justify-between text-group_5"style="display:flex;flex-direction:column;align-items:center;margin:0 20px"><span class=text_1 style=font-size:26px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#f3e6ff;line-height:37px;text-align:center>嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span><span class=text_2 style=font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#feb3b1;line-height:22px;margin-top:21px;text-align:center>你之前的评论 在 ${SITE_NAME}博客中收到来自 ${NICK} 的回复</span></div><div class="box_2 flex-row"style="margin:0 20px;min-height:128px;background:#f3e6ff;border-radius:12px;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;padding:3px 16px 32px 16px;width:85%"><div class="flex-col justify-between text-wrapper_4"style=display:flex;flex-direction:column;width:90%;margin:auto;margin-bottom:16px><div style="padding:15px 12px 0 12px;margin-top:0"><div class=Messages_box><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="font-size:45px;color:#f3e6ff;max-width:506px;background-color:#7877f9;padding:3px 10% 4px 10%;border-radius:9px">留言板</strong><hr style="display:flex;position:relative;border:9px double #3e3da8;box-sizing:content-box;height:0;overflow:visible;width:100%"><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="font-size:10px;color:#f3e6ff;max-width:506px;background-color:#7877F980;padding:3px 60px 4px 60px;border-radius:9px">原文记录</strong><div class="ax_post_box-comments-single Messages-author"style=display:flex;justify-content:flex-end;margin-bottom:5px;margin-top:7px;color:#feb3b1><div class=ax_post_box-comment-avatar style=width:auto;flex:none;order:2><img src=${PARENT_IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=position:relative;margin-right:10px><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid;border-left-color:#3e3da8;border-right:0;border-right-color:transparent;right:-7px;left:auto;top:12px;position:absolute"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#3e3da8;padding:10px;border-radius:9px;margin-bottom:3px>${PARENT_COMMENT}</div></div></div><hr style="display:flex;position:relative;border:1px dashed #3e3da8;box-sizing:content-box;height:0;overflow:visible;width:100%;margin-top:30px"><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="font-size:10px;color:#f3e6ff;max-width:506px;background-color:#7877F980;padding:3px 60px 4px 60px;border-radius:9px">当前位置</strong><p><strong style=font-size:20px;color:#3e3da8>${NICK}</strong><strong style=color:#e25860>回复:</strong><div class="ax_post_box-comments-single Messages-user"style=display:flex;margin-bottom:5px;margin-top:7px;color:#feb3b1><div class=ax_post_box-comment-avatar style=width:auto;flex:none><img src=${IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=position:relative;margin-left:10px><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#3e3da8;left:-7px;right:auto;top:12px;position:absolute"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#3e3da8;padding:10px;border-radius:9px;margin-bottom:3px>${COMMENT}</div></div></div></div></div></div><a class="flex-col text-wrapper_2"style=min-width:106px;height:38px;background:#7877f9;border-radius:32px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:auto;margin-top:32px href=${POST_URL}><span class=text_5 style=color:#f3e6ff>查看详情</span></a></div><div class="flex-col justify-between text-group_6"style=display:flex;flex-direction:column;align-items:center;margin-top:34px><span class=text_6 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px">此邮件由评论服务自动发出,直接回复无效。</span><a class=text_7 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#feb3b1;line-height:17px;margin-top:6px;text-decoration:none"href=${SITE_URL}>前往博客</a><a class=text_8 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px;margin-top:6px;text-decoration:none"></a></div></div></div>
Code2
<div class="flex-col page"style="background-image:linear-gradient(to bottom,#7877f9,#3e3da8)"><div class="flex-col box_3"style="display:flex;position:relative;width:100%;height:206px;background:#3e3da8;background-size:auto 100%;background-image:linear-gradient(to bottom,rgba(62,61,168,0) 0,rgba(62,61,168,.1) 80%,rgba(62,61,168,1) 100%),url(https://blog.bornforthis.cn/img/email/%E8%AF%BB%E8%80%85%E8%83%8C%E6%99%AF.webp);background-position:center;top:0;left:0;justify-content:center;border-radius:15px 15px 15px 15px"><div class="flex-col section_1"style=background-image:url(https://blog.bornforthis.cn/img/email/%E5%A4%B4%E5%83%8F.png);position:absolute;width:152px;height:152px;display:flex;top:130px;background-size:cover></div></div><div class="flex-col box_4"style=margin-top:92px;display:flex;flex-direction:column;align-items:center><div class="flex-col justify-between text-group_5"style="display:flex;flex-direction:column;align-items:center;margin:0 20px"><span class=text_1 style=font-size:26px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#f3e6ff;line-height:37px;text-align:center>嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span> <span class=text_2 style=font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#feb3b1;line-height:22px;margin-top:21px;text-align:center>你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} (${MAIL}) 的回复</span></div><div class="box_2 flex-row"style="margin:0 20px;min-height:128px;background:#f3e6ff;border-radius:12px;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;padding:3px 16px 32px 16px;width:85%"><div class="flex-col justify-between text-wrapper_4"style=display:flex;flex-direction:column;width:90%;margin:auto;margin-bottom:16px><div style="padding:15px 12px 0 12px;margin-top:0"><div class=Messages_box><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="font-size:45px;color:#f3e6ff;max-width:506px;background-color:#7877f9;padding:3px 10% 4px 10%;border-radius:9px">📫博主收件箱</strong><hr style="display:flex;position:relative;border:2px dashed #3e3da8;box-sizing:content-box;height:0;overflow:visible;width:100%"><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="font-size:10px;color:#f3e6ff;max-width:506px;background-color:#7877F980;padding:3px 60px 4px 60px;border-radius:9px">新消息</strong><p><strong style=font-size:20px;color:#3e3da8>${NICK}</strong><strong style=color:#e25860> :</strong><div class="Messages-user ax_post_box-comments-single"style=display:flex;margin-bottom:5px;margin-top:7px;color:#feb3b1><div class=ax_post_box-comment-avatar style=width:auto;flex:none><img src=${IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=position:relative;margin-left:10px><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#3e3da8;left:-7px;right:auto;top:12px;position:absolute"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#3e3da8;padding:10px;border-radius:9px;margin-bottom:3px>${COMMENT}</div></div></div></div></div></div><a class="flex-col text-wrapper_2"style=min-width:106px;height:38px;background:#7877f9;border-radius:32px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:auto;margin-top:32px href=${POST_URL}><span class=text_5 style=color:#f3e6ff>查看详情</span></a></div><div class="flex-col justify-between text-group_6"style=display:flex;flex-direction:column;align-items:center;margin-top:34px><span class=text_6 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px">此邮件由评论服务自动发出,直接回复无效。</span> <a class=text_7 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#feb3b1;line-height:17px;margin-top:6px;text-decoration:none"href=${SITE_URL}>前往博客</a> <a class=text_8 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px;margin-top:6px;text-decoration:none"></a></div></div></div>
6. 修复记录
6.1 第一次修复
- 修复了在谷歌邮箱中不正确显示的问题(删除了不兼容的 position、justify-content、flex-wrap、align-items、top、flex-direction)
CodePen「MAIL_TEMPLATE 模板」
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
<div class="box_3 flex-col" style="
display: flex;
width: 100%;
height: 206px;
background: #3E3DA8;
background-size: auto 100%;
background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url("https://bu.dusays.com/2023/09/22/650d668578553.png");
background-position: center;
top: 0;
left: 0;
border-radius: 15px 15px 15px 15px;
"><div class="section_1 flex-col" style="
background-image: url("https://bu.dusays.com/2023/09/22/650d5b6ec9ab7.png");
width: 152px;
height: 152px;
display: flex;
margin: 130px auto;
background-size: cover;
"></div></div>
<div class="box_4 flex-col" style="
margin-top: 92px;
">
<div class="text-group_5 flex-col justify-between" style="
display: grid;
margin: 0 20px;
text-align: center;
">
<span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #F3E6FF;
line-height: 37px;
text-align: center;
width: 100%;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
<span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FEB3B1;
line-height: 22px;
margin-top: 21px;
text-align: center;
width: 100%;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</span>
</div>
<div class="box_2 flex-row" style="
margin: 0 auto;
min-height: 128px;
background: #F3E6FF;
border-radius: 12px;
margin-top: 34px;
display: grid;
padding: 3px 16px 32px 16px;
width: 85%;
">
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
width: 100%;
margin: auto;
margin-bottom: 16px;
">
<div style="
width: 100%;
padding:15px 12px 0 12px;
margin-top:0px
">
<div class=Messages_box>
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 45px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F9;
padding:3px 10% 4px 10%;
border-radius:9px
">留言板</strong></p>
<hr style="
display: flex;
border: 9px double #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
margin: 0px auto;
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">原文记录</strong></p>
<div class="ax_post_box-comments-single Messages-author"
style="
display:flex;
justify-content:flex-end;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none;
order:2
"><img src=${PARENT_IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-right:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:8px solid;
border-left-color:#3E3DA8;
border-right:0;
border-right-color:transparent;
right:-7px;
left:auto;
margin-top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner
style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${PARENT_COMMENT}</div></div></div>
<hr style="
display: flex;
border: 1px dashed #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
margin-top:30px
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
margin: 0px auto;
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">当前位置</strong></p>
<p><strong style="
font-size: 20px;
color:#3E3DA8"
>${NICK}</strong><strong style="
color:#E25860;
"> 回复:</strong></p>
<div class="ax_post_box-comments-single Messages-user" style="
display:flex;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none
"><img src=${IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-left:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid;
border-right-color:#3E3DA8;
left:-7px;
right:auto;
margin-top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${COMMENT}</div></div></div></div></div></div>
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #7877F9;
border-radius: 32px;
display: flex;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
<span class="text_5" style="
color: #F3E6FF;
margin: auto;
">查看详情</span>
</a>
</div>
<div class="text-group_6 flex-col justify-between" style="
display: grid;
margin-top: 34px;
text-align: center;
">
<span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
width: 100%;
">此邮件由评论服务自动发出,直接回复无效。</span>
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEB3B1;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
width: 100%;
" href="${SITE_URL}">前往博客</a>
<a class="text_8" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
"></a>
</div>
</div>
</div>
我的修改「MAIL_TEMPLATE 模板」
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
<div class="box_3 flex-col" style="
display: flex;
width: 100%;
height: 206px;
background: #3E3DA8;
background-size: auto 100%;
background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url("https://blog.bornforthis.cn/img/email/%E8%AF%BB%E8%80%85%E8%83%8C%E6%99%AF.webp");
background-position: center;
top: 0;
left: 0;
border-radius: 15px 15px 15px 15px;
">
<div class="section_1 flex-col" style="
background-image: url("https://bornforthis.cn/aiyc.svg");
width: 152px;
height: 152px;
display: flex;
margin: 130px auto;
background-size: cover;
"></div>
</div>
<div class="box_4 flex-col" style="
margin-top: 92px;
">
<div class="text-group_5 flex-col justify-between" style="
display: grid;
margin: 0 20px;
text-align: center;
">
<span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #F3E6FF;
line-height: 37px;
text-align: center;
width: 100%;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
<span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FEB3B1;
line-height: 22px;
margin-top: 21px;
text-align: center;
width: 100%;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</span>
</div>
<div class="box_2 flex-row" style="
margin: 0 auto;
min-height: 128px;
background: #F3E6FF;
border-radius: 12px;
margin-top: 34px;
display: grid;
padding: 3px 16px 32px 16px;
width: 85%;
">
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
width: 100%;
margin: auto;
margin-bottom: 16px;
">
<div style="
width: 100%;
padding:15px 12px 0 12px;
margin-top:0px
">
<div class=Messages_box>
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
font-size: 45px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F9;
padding:3px 10% 4px 10%;
border-radius:9px
">留言板</strong></p>
<hr style="
display: flex;
border: 9px double #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
margin: 0px auto;
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">原文记录</strong></p>
<div class="ax_post_box-comments-single Messages-author"
style="
display:flex;
justify-content:flex-end;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none;
order:2
"><img src=${PARENT_IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-right:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:8px solid;
border-left-color:#3E3DA8;
border-right:0;
border-right-color:transparent;
right:-7px;
left:auto;
margin-top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner
style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${PARENT_COMMENT}
</div>
</div>
</div>
<hr style="
display: flex;
border: 1px dashed #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
margin-top:30px
">
<p style="
font-size: 20px;
display:flex;
justify-content:center;
color:#3E3DA8
"><strong style="
margin: 0px auto;
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">当前位置</strong></p>
<p><strong style="
font-size: 20px;
color:#3E3DA8"
>${NICK}</strong><strong style="
color:#E25860;
"> 回复:</strong></p>
<div class="ax_post_box-comments-single Messages-user" style="
display:flex;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none
"><img src=${IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
position:relative;
margin-left:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid;
border-right-color:#3E3DA8;
left:-7px;
right:auto;
margin-top:12px;
position:absolute
"></span>
<div class=ax_post_box-comment-text-inner style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${COMMENT}
</div>
</div>
</div>
</div>
</div>
</div>
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #7877F9;
border-radius: 32px;
display: flex;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
<span class="text_5" style="
color: #F3E6FF;
margin: auto;
">查看详情</span>
</a>
</div>
<div class="text-group_6 flex-col justify-between" style="
display: grid;
margin-top: 34px;
text-align: center;
">
<span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
width: 100%;
">此邮件由评论服务自动发出,直接回复无效。</span>
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEB3B1;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
width: 100%;
" href="${SITE_URL}">前往博客</a>
<a class="text_8" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
"></a>
</div>
</div>
</div>
压缩后「MAIL_TEMPLATE 模板」
<div class="flex-col page"style="background-image:linear-gradient(to bottom,#7877f9,#3e3da8)"><div class="flex-col box_3"style="display:flex;width:100%;height:206px;background:#3e3da8;background-size:auto 100%;background-image:linear-gradient(to bottom,rgba(62,61,168,0) 0,rgba(62,61,168,.1) 80%,rgba(62,61,168,1) 100%),url(https://blog.bornforthis.cn/img/email/%E8%AF%BB%E8%80%85%E8%83%8C%E6%99%AF.webp);background-position:center;top:0;left:0;border-radius:15px 15px 15px 15px"><div class="flex-col section_1"style="background-image:url(https://bornforthis.cn/aiyc.svg);width:152px;height:152px;display:flex;margin:130px auto;background-size:cover"></div></div><div class="flex-col box_4"style=margin-top:92px><div class="flex-col justify-between text-group_5"style="display:grid;margin:0 20px;text-align:center"><span class=text_1 style=font-size:26px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#f3e6ff;line-height:37px;text-align:center;width:100%>嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span> <span class=text_2 style=font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#feb3b1;line-height:22px;margin-top:21px;text-align:center;width:100%>你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</span></div><div class="box_2 flex-row"style="margin:0 auto;min-height:128px;background:#f3e6ff;border-radius:12px;margin-top:34px;display:grid;padding:3px 16px 32px 16px;width:85%"><div class="flex-col justify-between text-wrapper_4"style=display:flex;width:100%;margin:auto;margin-bottom:16px><div style="width:100%;padding:15px 12px 0 12px;margin-top:0"><div class=Messages_box><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="font-size:45px;color:#f3e6ff;max-width:506px;background-color:#7877f9;padding:3px 10% 4px 10%;border-radius:9px">留言板</strong><hr style="display:flex;border:9px double #3e3da8;box-sizing:content-box;height:0;overflow:visible;width:100%"><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="margin:0 auto;font-size:10px;color:#f3e6ff;max-width:506px;background-color:#7877F980;padding:3px 60px 4px 60px;border-radius:9px">原文记录</strong><div class="ax_post_box-comments-single Messages-author"style=display:flex;justify-content:flex-end;margin-bottom:5px;margin-top:7px;color:#feb3b1><div class=ax_post_box-comment-avatar style=width:auto;flex:none;order:2><img src=${PARENT_IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=position:relative;margin-right:10px><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid;border-left-color:#3e3da8;border-right:0;border-right-color:transparent;right:-7px;left:auto;margin-top:12px;position:absolute"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#3e3da8;padding:10px;border-radius:9px;margin-bottom:3px>${PARENT_COMMENT}</div></div></div><hr style="display:flex;border:1px dashed #3e3da8;box-sizing:content-box;height:0;overflow:visible;width:100%;margin-top:30px"><p style=font-size:20px;display:flex;justify-content:center;color:#3e3da8><strong style="margin:0 auto;font-size:10px;color:#f3e6ff;max-width:506px;background-color:#7877F980;padding:3px 60px 4px 60px;border-radius:9px">当前位置</strong><p><strong style=font-size:20px;color:#3e3da8>${NICK}</strong><strong style=color:#e25860> 回复:</strong><div class="ax_post_box-comments-single Messages-user"style=display:flex;margin-bottom:5px;margin-top:7px;color:#feb3b1><div class=ax_post_box-comment-avatar style=width:auto;flex:none><img src=${IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=position:relative;margin-left:10px><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#3e3da8;left:-7px;right:auto;margin-top:12px;position:absolute"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#3e3da8;padding:10px;border-radius:9px;margin-bottom:3px>${COMMENT}</div></div></div></div></div></div><a class="flex-col text-wrapper_2"style=min-width:106px;height:38px;background:#7877f9;border-radius:32px;display:flex;text-decoration:none;margin:auto;margin-top:32px href=${POST_URL}><span class=text_5 style=color:#f3e6ff;margin:auto>查看详情</span></a></div><div class="flex-col justify-between text-group_6"style=display:grid;margin-top:34px;text-align:center><span class=text_6 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px;width:100%">此邮件由评论服务自动发出,直接回复无效。</span> <a class=text_7 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#feb3b1;line-height:17px;margin-top:6px;text-decoration:none;width:100%"href=${SITE_URL}>前往博客</a> <a class=text_8 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px;margin-top:6px;text-decoration:none"></a></div></div></div>
CodePen「MAIL_TEMPLATE_ADMIN 模板」
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
<div class="box_3 flex-col" style="
display: flex;
width: 100%;
height: 206px;
background: #3E3DA8;
background-size: auto 100%;
background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url("https://bu.dusays.com/2023/09/22/650d668578553.png");
background-position: center;
top: 0;
left: 0;
border-radius: 15px 15px 15px 15px;
"><div class="section_1 flex-col" style="
background-image: url("https://bu.dusays.com/2023/09/22/650d5b6ec9ab7.png");
width: 152px;
height: 152px;
display: flex;
margin: 130px auto;
background-size: cover;
"></div></div>
<div class="box_4 flex-col" style="
margin-top: 92px;
">
<div class="text-group_5 flex-col justify-between" style="
display: grid;
margin: 0 20px;
text-align: center;
">
<span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #F3E6FF;
line-height: 37px;
text-align: center;
width: 100%;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
<span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FEB3B1;
line-height: 22px;
margin-top: 21px;
text-align: center;
width: 100%;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} (${MAIL}) 的回复</span>
</div>
<div class="box_2 flex-row" style="
margin: 0 auto;
min-height: 128px;
background: #F3E6FF;
border-radius: 12px;
margin-top: 34px;
display: grid;
padding: 3px 16px 32px 16px;
width: 85%;
">
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
width: 100%;
margin: auto;
margin-bottom: 16px;
">
<div style="
width: 100%;
padding:15px 12px 0 12px;
margin-top:0px
">
<div class=Messages_box>
<p style="
font-size: 20px;
display:flex;
color:#3E3DA8;
"><strong style="
font-size: 45px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F9;
padding:3px 10% 4px 10%;
border-radius:9px;
margin: 0 auto;
">📫博主收件箱</strong></p>
<hr style="
display: flex;
border: 2px dashed #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
">
<p style="
font-size: 20px;
display:flex;
color:#3E3DA8
"><strong style="
margin: 0px auto;
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">新消息</strong></p>
<p><strong style="
font-size: 20px;
color:#3E3DA8"
>${NICK}</strong><strong style="
color:#E25860;
"> :</strong></p>
<div class="ax_post_box-comments-single Messages-user" style="
display:flex;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none
"><img src=${IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
margin-left:10px;
display: flex;
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid;
border-right-color:#3E3DA8;
left:-7px;
right:auto;
margin-top:12px;
"></span>
<div class=ax_post_box-comment-text-inner style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${COMMENT}</div></div></div></div></div></div>
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #7877F9;
border-radius: 32px;
display: flex;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
<span class="text_5" style="
color: #F3E6FF;
margin: auto;
">查看详情</span>
</a>
</div>
<div class="text-group_6 flex-col justify-between" style="
display: grid;
text-align: center;
margin-top: 34px;
">
<span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
width: 100%;
">此邮件由评论服务自动发出,直接回复无效。</span>
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEB3B1;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
width: 100%;
" href="${SITE_URL}">前往博客</a>
<a class="text_8" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
"></a>
</div>
</div>
</div>
我的修改
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
<div class="box_3 flex-col" style="
display: flex;
width: 100%;
height: 206px;
background: #3E3DA8;
background-size: auto 100%;
background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url("https://blog.bornforthis.cn/img/email/duzhebeij.png");
background-position: center;
top: 0;
left: 0;
border-radius: 15px 15px 15px 15px;
">
<div class="section_1 flex-col" style="
background-image: url("https://blog.bornforthis.cn/img/email/touxiang.png");
width: 152px;
height: 152px;
display: flex;
margin: 130px auto;
background-size: cover;
"></div>
</div>
<div class="box_4 flex-col" style="
margin-top: 92px;
">
<div class="text-group_5 flex-col justify-between" style="
display: grid;
margin: 0 20px;
text-align: center;
">
<span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #F3E6FF;
line-height: 37px;
text-align: center;
width: 100%;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
<span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FEB3B1;
line-height: 22px;
margin-top: 21px;
text-align: center;
width: 100%;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} (${MAIL}) 的回复</span>
</div>
<div class="box_2 flex-row" style="
margin: 0 auto;
min-height: 128px;
background: #F3E6FF;
border-radius: 12px;
margin-top: 34px;
display: grid;
padding: 3px 16px 32px 16px;
width: 85%;
">
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
width: 100%;
margin: auto;
margin-bottom: 16px;
">
<div style="
width: 100%;
padding:15px 12px 0 12px;
margin-top:0px
">
<div class=Messages_box>
<p style="
font-size: 20px;
display:flex;
color:#3E3DA8;
"><strong style="
font-size: 45px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F9;
padding:3px 10% 4px 10%;
border-radius:9px;
margin: 0 auto;
">📫博主收件箱</strong></p>
<hr style="
display: flex;
border: 2px dashed #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
">
<p style="
font-size: 20px;
display:flex;
color:#3E3DA8
"><strong style="
margin: 0px auto;
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">新消息</strong></p>
<p><strong style="
font-size: 20px;
color:#3E3DA8"
>${NICK}</strong><strong style="
color:#E25860;
"> :</strong></p>
<div class="ax_post_box-comments-single Messages-user" style="
display:flex;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none
"><img src=${IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
margin-left:10px;
display: flex;
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid;
border-right-color:#3E3DA8;
left:-7px;
right:auto;
margin-top:12px;
"></span>
<div class=ax_post_box-comment-text-inner style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${COMMENT}
</div>
</div>
</div>
</div>
</div>
</div>
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #7877F9;
border-radius: 32px;
display: flex;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
<span class="text_5" style="
color: #F3E6FF;
margin: auto;
">查看详情</span>
</a>
</div>
<div class="text-group_6 flex-col justify-between" style="
display: grid;
text-align: center;
margin-top: 34px;
">
<span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
width: 100%;
">此邮件由评论服务自动发出,直接回复无效。</span>
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEB3B1;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
width: 100%;
" href="${SITE_URL}">前往博客</a>
<a class="text_8" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
"></a>
</div>
</div>
</div>
我的压缩
<div class="flex-col page"style="background-image:linear-gradient(to bottom,#7877f9,#3e3da8)"><div class="flex-col box_3"style="display:flex;width:100%;height:206px;background:#3e3da8;background-size:auto 100%;background-image:linear-gradient(to bottom,rgba(62,61,168,0) 0,rgba(62,61,168,.1) 80%,rgba(62,61,168,1) 100%),url(https://blog.bornforthis.cn/img/email/duzhebeij.png);background-position:center;top:0;left:0;border-radius:15px 15px 15px 15px"><div class="flex-col section_1"style="background-image:url(https://blog.bornforthis.cn/img/email/touxiang.png);width:152px;height:152px;display:flex;margin:130px auto;background-size:cover"></div></div><div class="flex-col box_4"style=margin-top:92px><div class="flex-col justify-between text-group_5"style="display:grid;margin:0 20px;text-align:center"><span class=text_1 style=font-size:26px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#f3e6ff;line-height:37px;text-align:center;width:100%>嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span> <span class=text_2 style=font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#feb3b1;line-height:22px;margin-top:21px;text-align:center;width:100%>你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} (${MAIL}) 的回复</span></div><div class="box_2 flex-row"style="margin:0 auto;min-height:128px;background:#f3e6ff;border-radius:12px;margin-top:34px;display:grid;padding:3px 16px 32px 16px;width:85%"><div class="flex-col justify-between text-wrapper_4"style=display:flex;width:100%;margin:auto;margin-bottom:16px><div style="width:100%;padding:15px 12px 0 12px;margin-top:0"><div class=Messages_box><p style=font-size:20px;display:flex;color:#3e3da8><strong style="font-size:45px;color:#f3e6ff;max-width:506px;background-color:#7877f9;padding:3px 10% 4px 10%;border-radius:9px;margin:0 auto">📫博主收件箱</strong><hr style="display:flex;border:2px dashed #3e3da8;box-sizing:content-box;height:0;overflow:visible;width:100%"><p style=font-size:20px;display:flex;color:#3e3da8><strong style="margin:0 auto;font-size:10px;color:#f3e6ff;max-width:506px;background-color:#7877F980;padding:3px 60px 4px 60px;border-radius:9px">新消息</strong><p><strong style=font-size:20px;color:#3e3da8>${NICK}</strong><strong style=color:#e25860> :</strong><div class="Messages-user ax_post_box-comments-single"style=display:flex;margin-bottom:5px;margin-top:7px;color:#feb3b1><div class=ax_post_box-comment-avatar style=width:auto;flex:none><img src=${IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=margin-left:10px;display:flex><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#3e3da8;left:-7px;right:auto;margin-top:12px"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#3e3da8;padding:10px;border-radius:9px;margin-bottom:3px>${COMMENT}</div></div></div></div></div></div><a class="flex-col text-wrapper_2"style=min-width:106px;height:38px;background:#7877f9;border-radius:32px;display:flex;text-decoration:none;margin:auto;margin-top:32px href=${POST_URL}><span class=text_5 style=color:#f3e6ff;margin:auto>查看详情</span></a></div><div class="flex-col justify-between text-group_6"style=display:grid;text-align:center;margin-top:34px><span class=text_6 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px;width:100%">此邮件由评论服务自动发出,直接回复无效。</span> <a class=text_7 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#feb3b1;line-height:17px;margin-top:6px;text-decoration:none;width:100%"href=${SITE_URL}>前往博客</a> <a class=text_8 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px;margin-top:6px;text-decoration:none"></a></div></div></div>
6.2 第二次修复
MAIL_TEMPLATE模板
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
<div class="box_3 flex-col" style="
display: flex;
width: 100%;
height: 206px;
background: #3E3DA8;
background-size: auto 100%;
background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url("https://blog.bornforthis.cn/img/email/%E8%AF%BB%E8%80%85%E8%83%8C%E6%99%AF.webp");
background-position: center;
top: 0;
left: 0;
border-radius: 15px 15px 15px 15px;
">
<div class="section_1 flex-col" style="
background-image: url("https://bornforthis.cn/aiyc.svg");
width: 152px;
height: 152px;
display: flex;
margin: 130px auto;
background-size: cover;
"></div>
</div>
<div class="box_4 flex-col" style="
margin-top: 92px;
">
<div class="text-group_5 flex-col justify-between" style="
display: grid;
margin: 0 20px;
text-align: center;
">
<span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #F3E6FF;
line-height: 37px;
text-align: center;
width: 100%;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
<span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FEB3B1;
line-height: 22px;
margin-top: 21px;
text-align: center;
width: 100%;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</span>
</div>
<div class="box_2 flex-row" style="
margin: 0 auto;
min-height: 128px;
background: #F3E6FF;
border-radius: 12px;
margin-top: 34px;
display: grid;
padding: 3px 16px 32px 16px;
width: 85%;
">
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
width: 100%;
margin: auto;
margin-bottom: 16px;
">
<div style="
width: 100%;
padding:15px 12px 0 12px;
margin-top:0px
">
<div class=Messages_box>
<p style="
font-size: 20px;
display:flex;
color:#3E3DA8
"><strong style="
font-size: 45px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F9;
padding:3px 10% 4px 10%;
border-radius:9px;
margin:0 auto;
">留言板</strong></p>
<hr style="
display: flex;
border: 9px double #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 90%;
">
<p style="
font-size: 20px;
display:flex;
color:#3E3DA8
"><strong style="
margin: 0px auto;
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">原文记录</strong></p>
<div class="ax_post_box-comments-single Messages-author"
style="
display:flex;
float: right;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-text style="
margin-right:10px;
display:flex;
">
<div class=ax_post_box-comment-text-inner
style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${PARENT_COMMENT}
</div>
<span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:8px solid;
border-left-color:#3E3DA8;
border-right:0;
border-right-color:transparent;
right:-7px;
left:auto;
margin-top:12px;
"></span>
</div>
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none;
order:2
"><img src=${PARENT_IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
</div>
<hr style="
display: flex;
border: 1px dashed #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 100%;
margin-top:30px
">
<p style="
font-size: 20px;
display:flex;
color:#3E3DA8
"><strong style="
margin: 0px auto;
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">当前位置</strong></p>
<p><strong style="
font-size: 20px;
color:#3E3DA8"
>${NICK}</strong><strong style="
color:#E25860;
"> 回复:</strong></p>
<div class="ax_post_box-comments-single Messages-user" style="
display:flex;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none
"><img src=${IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
display:flex;
margin-left:10px
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid;
border-right-color:#3E3DA8;
left:-7px;
right:auto;
margin-top:12px;
"></span>
<div class=ax_post_box-comment-text-inner style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${COMMENT}
</div>
</div>
</div>
</div>
</div>
</div>
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #7877F9;
border-radius: 32px;
display: flex;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
<span class="text_5" style="
color: #F3E6FF;
margin: auto;
">查看详情</span>
</a>
</div>
<div class="text-group_6 flex-col justify-between" style="
display: grid;
margin-top: 34px;
text-align: center;
">
<span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
width: 100%;
">此邮件由评论服务自动发出,直接回复无效。</span>
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEB3B1;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
width: 100%;
" href="${SITE_URL}">前往博客</a>
<a class="text_8" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
"></a>
</div>
</div>
</div>
MAIL_TEMPLATE模板压缩
<div class="flex-col page"style="background-image:linear-gradient(to bottom,#7877f9,#3e3da8)"><div class="flex-col box_3"style="display:flex;width:100%;height:206px;background:#3e3da8;background-size:auto 100%;background-image:linear-gradient(to bottom,rgba(62,61,168,0) 0,rgba(62,61,168,.1) 80%,rgba(62,61,168,1) 100%),url(https://blog.bornforthis.cn/img/email/%E8%AF%BB%E8%80%85%E8%83%8C%E6%99%AF.webp);background-position:center;top:0;left:0;border-radius:15px 15px 15px 15px"><div class="flex-col section_1"style="background-image:url(https://bornforthis.cn/aiyc.svg);width:152px;height:152px;display:flex;margin:130px auto;background-size:cover"></div></div><div class="flex-col box_4"style=margin-top:92px><div class="flex-col justify-between text-group_5"style="display:grid;margin:0 20px;text-align:center"><span class=text_1 style=font-size:26px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#f3e6ff;line-height:37px;text-align:center;width:100%>嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span> <span class=text_2 style=font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#feb3b1;line-height:22px;margin-top:21px;text-align:center;width:100%>你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</span></div><div class="box_2 flex-row"style="margin:0 auto;min-height:128px;background:#f3e6ff;border-radius:12px;margin-top:34px;display:grid;padding:3px 16px 32px 16px;width:85%"><div class="flex-col justify-between text-wrapper_4"style=display:flex;width:100%;margin:auto;margin-bottom:16px><div style="width:100%;padding:15px 12px 0 12px;margin-top:0"><div class=Messages_box><p style=font-size:20px;display:flex;color:#3e3da8><strong style="font-size:45px;color:#f3e6ff;max-width:506px;background-color:#7877f9;padding:3px 10% 4px 10%;border-radius:9px;margin:0 auto">留言板</strong><hr style="display:flex;border:9px double #3e3da8;box-sizing:content-box;height:0;overflow:visible;width:90%"><p style=font-size:20px;display:flex;color:#3e3da8><strong style="margin:0 auto;font-size:10px;color:#f3e6ff;max-width:506px;background-color:#7877F980;padding:3px 60px 4px 60px;border-radius:9px">原文记录</strong><div class="ax_post_box-comments-single Messages-author"style=display:flex;float:right;margin-bottom:5px;margin-top:7px;color:#feb3b1><div class=ax_post_box-comment-text style=margin-right:10px;display:flex><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#3e3da8;padding:10px;border-radius:9px;margin-bottom:3px>${PARENT_COMMENT}</div><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid;border-left-color:#3e3da8;border-right:0;border-right-color:transparent;right:-7px;left:auto;margin-top:12px"></span></div><div class=ax_post_box-comment-avatar style=width:auto;flex:none;order:2><img src=${PARENT_IMG} style=width:40px;height:40px;border-radius:5px></div></div><hr style="display:flex;border:1px dashed #3e3da8;box-sizing:content-box;height:0;overflow:visible;width:100%;margin-top:30px"><p style=font-size:20px;display:flex;color:#3e3da8><strong style="margin:0 auto;font-size:10px;color:#f3e6ff;max-width:506px;background-color:#7877F980;padding:3px 60px 4px 60px;border-radius:9px">当前位置</strong><p><strong style=font-size:20px;color:#3e3da8>${NICK}</strong><strong style=color:#e25860> 回复:</strong><div class="ax_post_box-comments-single Messages-user"style=display:flex;margin-bottom:5px;margin-top:7px;color:#feb3b1><div class=ax_post_box-comment-avatar style=width:auto;flex:none><img src=${IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=display:flex;margin-left:10px><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#3e3da8;left:-7px;right:auto;margin-top:12px"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#3e3da8;padding:10px;border-radius:9px;margin-bottom:3px>${COMMENT}</div></div></div></div></div></div><a class="flex-col text-wrapper_2"style=min-width:106px;height:38px;background:#7877f9;border-radius:32px;display:flex;text-decoration:none;margin:auto;margin-top:32px href=${POST_URL}><span class=text_5 style=color:#f3e6ff;margin:auto>查看详情</span></a></div><div class="flex-col justify-between text-group_6"style=display:grid;margin-top:34px;text-align:center><span class=text_6 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px;width:100%">此邮件由评论服务自动发出,直接回复无效。</span> <a class=text_7 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#feb3b1;line-height:17px;margin-top:6px;text-decoration:none;width:100%"href=${SITE_URL}>前往博客</a> <a class=text_8 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px;margin-top:6px;text-decoration:none"></a></div></div></div>
MAIL_TEMPLATE_ADMIN模板
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
<div class="box_3 flex-col" style="
display: flex;
width: 100%;
height: 206px;
background: #3E3DA8;
background-size: auto 100%;
background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url("https://blog.bornforthis.cn/img/email/duzhebeij.png");
background-position: center;
top: 0;
left: 0;
border-radius: 15px 15px 15px 15px;
">
<div class="section_1 flex-col" style="
background-image: url("https://blog.bornforthis.cn/img/email/touxiang.png");
width: 152px;
height: 152px;
display: flex;
margin: 130px auto;
background-size: cover;
"></div>
</div>
<div class="box_4 flex-col" style="
margin-top: 92px;
">
<div class="text-group_5 flex-col justify-between" style="
display: grid;
margin: 0 20px;
text-align: center;
">
<span class="text_1" style="
font-size: 26px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #F3E6FF;
line-height: 37px;
text-align: center;
width: 100%;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
<span class="text_2" style="
font-size: 16px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #FEB3B1;
line-height: 22px;
margin-top: 21px;
text-align: center;
width: 100%;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} (${MAIL}) 的回复</span>
</div>
<div class="box_2 flex-row" style="
margin: 0 auto;
min-height: 128px;
background: #F3E6FF;
border-radius: 12px;
margin-top: 34px;
display: grid;
padding: 3px 16px 32px 16px;
width: 85%;
">
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
width: 100%;
margin: auto;
margin-bottom: 16px;
">
<div style="
width: 100%;
padding:15px 12px 0 12px;
margin-top:0px
">
<div class=Messages_box>
<p style="
font-size: 20px;
display:flex;
color:#3E3DA8;
"><strong style="
font-size: 45px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F9;
padding:3px 10% 4px 10%;
border-radius:9px;
margin: 0 auto;
">📫博主收件箱</strong></p>
<hr style="
display: flex;
border: 2px dashed #3E3DA8;
box-sizing: content-box;
height: 0px;
overflow: visible;
width: 90%;
">
<p style="
font-size: 20px;
display:flex;
color:#3E3DA8
"><strong style="
margin: 0px auto;
font-size: 10px;
color:#F3E6FF;
max-width:506px;
background-color:#7877F980;
padding:3px 60px 4px 60px;
border-radius:9px
">新消息</strong></p>
<p><strong style="
font-size: 20px;
color:#3E3DA8"
>${NICK}</strong><strong style="
color:#E25860;
"> :</strong></p>
<div class="ax_post_box-comments-single Messages-user" style="
display:flex;
margin-bottom:5px;
margin-top:7px;
color:#FEB3B1
">
<div class=ax_post_box-comment-avatar style="
width:auto;
flex:none
"><img src=${IMG}
style="
width:40px;
height:40px;
border-radius:5px
"></div>
<div class=ax_post_box-comment-text style="
margin-left:10px;
display: flex;
"><span
class=ax_post_box-comment-text-before
style="
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid;
border-right-color:#3E3DA8;
left:-7px;
right:auto;
margin-top:12px;
"></span>
<div class=ax_post_box-comment-text-inner style="
max-width:506px;
background-color:#3E3DA8;
padding:10px;
border-radius:9px;
margin-bottom:3px
">${COMMENT}
</div>
</div>
</div>
</div>
</div>
</div>
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #7877F9;
border-radius: 32px;
display: flex;
text-decoration: none;
margin: auto;
margin-top: 32px;
" href="${POST_URL}">
<span class="text_5" style="
color: #F3E6FF;
margin: auto;
">查看详情</span>
</a>
</div>
<div class="text-group_6 flex-col justify-between" style="
display: grid;
text-align: center;
margin-top: 34px;
">
<span class="text_6" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
width: 100%;
">此邮件由评论服务自动发出,直接回复无效。</span>
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEB3B1;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
width: 100%;
" href="${SITE_URL}">前往博客</a>
<a class="text_8" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f3e6ff8e;
line-height: 17px;
margin-top: 6px;
text-decoration: none;
"></a>
</div>
</div>
</div>
MAIL_TEMPLATE_ADMIN模板
<div class="flex-col page"style="background-image:linear-gradient(to bottom,#7877f9,#3e3da8)"><div class="flex-col box_3"style="display:flex;width:100%;height:206px;background:#3e3da8;background-size:auto 100%;background-image:linear-gradient(to bottom,rgba(62,61,168,0) 0,rgba(62,61,168,.1) 80%,rgba(62,61,168,1) 100%),url(https://blog.bornforthis.cn/img/email/duzhebeij.png);background-position:center;top:0;left:0;border-radius:15px 15px 15px 15px"><div class="flex-col section_1"style="background-image:url(https://blog.bornforthis.cn/img/email/touxiang.png);width:152px;height:152px;display:flex;margin:130px auto;background-size:cover"></div></div><div class="flex-col box_4"style=margin-top:92px><div class="flex-col justify-between text-group_5"style="display:grid;margin:0 20px;text-align:center"><span class=text_1 style=font-size:26px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#f3e6ff;line-height:37px;text-align:center;width:100%>嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span> <span class=text_2 style=font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#feb3b1;line-height:22px;margin-top:21px;text-align:center;width:100%>你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} (${MAIL}) 的回复</span></div><div class="box_2 flex-row"style="margin:0 auto;min-height:128px;background:#f3e6ff;border-radius:12px;margin-top:34px;display:grid;padding:3px 16px 32px 16px;width:85%"><div class="flex-col justify-between text-wrapper_4"style=display:flex;width:100%;margin:auto;margin-bottom:16px><div style="width:100%;padding:15px 12px 0 12px;margin-top:0"><div class=Messages_box><p style=font-size:20px;display:flex;color:#3e3da8><strong style="font-size:45px;color:#f3e6ff;max-width:506px;background-color:#7877f9;padding:3px 10% 4px 10%;border-radius:9px;margin:0 auto">📫博主收件箱</strong><hr style="display:flex;border:2px dashed #3e3da8;box-sizing:content-box;height:0;overflow:visible;width:90%"><p style=font-size:20px;display:flex;color:#3e3da8><strong style="margin:0 auto;font-size:10px;color:#f3e6ff;max-width:506px;background-color:#7877F980;padding:3px 60px 4px 60px;border-radius:9px">新消息</strong><p><strong style=font-size:20px;color:#3e3da8>${NICK}</strong><strong style=color:#e25860> :</strong><div class="Messages-user ax_post_box-comments-single"style=display:flex;margin-bottom:5px;margin-top:7px;color:#feb3b1><div class=ax_post_box-comment-avatar style=width:auto;flex:none><img src=${IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=margin-left:10px;display:flex><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#3e3da8;left:-7px;right:auto;margin-top:12px"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#3e3da8;padding:10px;border-radius:9px;margin-bottom:3px>${COMMENT}</div></div></div></div></div></div><a class="flex-col text-wrapper_2"style=min-width:106px;height:38px;background:#7877f9;border-radius:32px;display:flex;text-decoration:none;margin:auto;margin-top:32px href=${POST_URL}><span class=text_5 style=color:#f3e6ff;margin:auto>查看详情</span></a></div><div class="flex-col justify-between text-group_6"style=display:grid;text-align:center;margin-top:34px><span class=text_6 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px;width:100%">此邮件由评论服务自动发出,直接回复无效。</span> <a class=text_7 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#feb3b1;line-height:17px;margin-top:6px;text-decoration:none;width:100%"href=${SITE_URL}>前往博客</a> <a class=text_8 style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#f3e6ff8e;line-height:17px;margin-top:6px;text-decoration:none"></a></div></div></div>
欢迎关注我公众号:AI悦创,有更多更好玩的等你发现!
公众号:AI悦创【二维码】
AI悦创·编程一对一
AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh
C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh
方法一:QQ
方法二:微信:Jiabcdefh
你认为这篇文章怎么样?
- 0
- 0
- 0
- 0
- 0
- 0