twikoo邮件通知模板

方案一

  1. 作者：张洪Heo
  2. 魔改：满心Heo

效果预览

方案一
方案一

代码

MAIL_TEMPLATE

查看代码
1
2
#压缩后
<style>@keyframes huxi{0%{opacity:.2;transform:scale(.8);transform:translateY(10px);box-shadow:0 1px 2px rgba(255,255,255,.1)}100%{opacity:1;transform:scale(1);transform:translateY(-10px);box-shadow:0 1px 30px rgba(197,52,62,1)}}</style><div class="page flex-col"><div class="box_3 flex-col" style="display:flex;position:relative;width:100%;height:206px;background:#ef859d2e;top:0;left:0;justify-content:center"><div class="section_1 flex-col" style="background-image:url(&quot;https://blog.cuixinyu.com/img/others/avatar.png&quot;);position:absolute;width:152px;height:152px;display:flex;top:130px;background-size:cover;border-radius:50%;animation:huxi 1200ms ease-out infinite alternate;background-color:#fff"></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:700;color:#000;line-height:37px;text-align:center">嘿！您在&nbsp;${SITE_NAME}&nbsp;博客中收到一条新回复。</span></div><div class="box_2 flex-row" style="margin:0 20px;min-height:128px;background:#F7F7F7;border-radius:12px;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;padding:32px 16px;width:calc(100% - 40px)"><div class="text-wrapper_4 flex-col justify-between" style="display:flex;flex-direction:column;margin-left:30px;margin-bottom:16px"><span class="text_3" style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#C5343E;line-height:22px">${PARENT_NICK}</span> <span class="text_4" style="margin-top:6px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:22px">${PARENT_COMMENT}</span></div><hr style="display:flex;position:relative;border:1px dashed #ef859d2e;box-sizing:content-box;height:0;overflow:visible;width:100%"><div class="text-wrapper_4 flex-col justify-between" style="display:flex;flex-direction:column;margin-left:30px"><span class="text_3" style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#C5343E;line-height:22px">${NICK}</span> <span class="text_4" style="margin-top:6px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:22px">${COMMENT}</span></div><a class="text-wrapper_2 flex-col" style="min-width:106px;height:38px;background:#ef859d38;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:#DB214B">查看详情</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:#00045;line-height:17px">此邮件由评论服务自动发出，直接回复无效。</span> <a class="text_7" style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#DB214B;line-height:17px;margin-top:6px;text-decoration:none" href="${SITE_URL}">前往博客</a></div></div></div>
查看代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#未压缩方便魔改
<style>
@keyframes huxi {
    0% {
        opacity: .2;
        transform: scale(.8);
        transform: translateY(10px);
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        transform: translateY(-10px);
        box-shadow: 0 1px 30px rgba(197, 52, 62, 1);
    }
}
</style>
<div class="page flex-col">
    <div class="box_3 flex-col" style="display: flex;position: relative;width: 100%;height: 206px;background: #ef859d2e;top: 0;left: 0;justify-content: center;">
        <div class="section_1 flex-col" style="background-image: url(&quot;https://blog.cuixinyu.com/img/others/avatar.png&quot;);position: absolute;width: 152px;height: 152px;display: flex;top: 130px;background-size: cover;border-radius: 50%;animation: huxi 1200ms ease-out infinite alternate;background-color:#ffffff"></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: #000000;line-height: 37px;text-align: center;">嘿！您在&nbsp;${SITE_NAME}&nbsp;博客中收到一条新回复。</span>
        </div>
        <div class="box_2 flex-row" style="margin: 0 20px;min-height: 128px;background: #F7F7F7;border-radius: 12px;margin-top: 34px;display: flex;flex-direction: column;align-items: flex-start;padding: 32px 16px;width: calc(100% - 40px);">
            <div class="text-wrapper_4 flex-col justify-between" style="display: flex;flex-direction: column;margin-left: 30px;margin-bottom: 16px;">
                <span class="text_3" style="height: 22px;font-size: 16px;font-family: PingFang-SC-Bold, PingFang-SC;font-weight: bold;color: #C5343E;line-height: 22px;">${PARENT_NICK}</span>
                <span class="text_4" style="margin-top: 6px;margin-right: 22px;font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #000000;line-height: 22px;">${PARENT_COMMENT}</span>
            </div>
            <hr style="display: flex;position: relative;border: 1px dashed #ef859d2e;box-sizing: content-box;height: 0px;overflow: visible;width: 100%;">
            <div class="text-wrapper_4 flex-col justify-between" style="display: flex;flex-direction: column;margin-left: 30px;">
                <span class="text_3" style="height: 22px;font-size: 16px;font-family: PingFang-SC-Bold, PingFang-SC;font-weight: bold;color: #C5343E;line-height: 22px;">${NICK}</span>
                <span class="text_4" style="margin-top: 6px;margin-right: 22px;font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #000000;line-height: 22px;">${COMMENT}</span>
            </div>
            <a class="text-wrapper_2 flex-col" style="min-width: 106px;height: 38px;background: #ef859d38;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: #DB214B;">查看详情</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: #00000045;line-height: 17px;">此邮件由评论服务自动发出，直接回复无效。</span>
            <a class="text_7" style="height: 17px;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #DB214B;line-height: 17px;margin-top: 6px;text-decoration: none;" href="${SITE_URL}">前往博客</a>
        </div>
    </div>
</div>

MAIL_TEMPLATE_ADMIN

查看代码
1
2
#压缩后
<style>@keyframes huxi{0%{opacity:.2;transform:scale(.8);transform:translateY(10px);box-shadow:0 1px 2px rgba(255,255,255,.1)}100%{opacity:1;transform:scale(1);transform:translateY(-10px);box-shadow:0 1px 30px rgba(197,52,62,1)}}</style><div class="page flex-col"><div class="box_3 flex-col" style="display:flex;position:relative;width:100%;height:206px;background:#ef859d2e;top:0;left:0;justify-content:center"><div class="section_1 flex-col" style="background-image:url(&quot;https://blog.cuixinyu.com/img/others/avatar.png&quot;);position:absolute;width:152px;height:152px;display:flex;top:130px;background-size:cover;border-radius:50%;animation:huxi 1200ms ease-out infinite alternate;background-color:#fff"></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:700;color:#000;line-height:37px;text-align:center">嘿！您在&nbsp;${SITE_NAME}&nbsp;博客中收到一条消息。</span></div><div class="box_2 flex-row" style="margin:0 20px;min-height:128px;background:#F7F7F7;border-radius:12px;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;padding:32px 16px;width:calc(100% - 40px)"><div class="text-wrapper_4 flex-col justify-between" style="display:flex;flex-direction:column;margin-left:30px"><span class="text_3" style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#C5343E;line-height:22px">${NICK}</span> <span class="text_4" style="margin-top:6px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:22px">${COMMENT}</span></div><a class="text-wrapper_2 flex-col" style="min-width:106px;height:38px;background:#ef859d38;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:#DB214B">查看详情</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:#00045;line-height:17px">此邮件由评论服务自动发出，直接回复无效。</span> <a class="text_7" style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#DB214B;line-height:17px;margin-top:6px;text-decoration:none" href="${SITE_URL}">前往博客</a></div></div></div>
查看代码测试
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#未压缩方便魔改
<style>
@keyframes huxi {
    0% {
        opacity: .2;
        transform: scale(.8);
        transform: translateY(10px);
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        transform: translateY(-10px);
        box-shadow: 0 1px 30px rgba(197, 52, 62, 1);
    }
}
</style>
<div class="page flex-col">
    <div class="box_3 flex-col" style="display: flex;position: relative;width: 100%;height: 206px;background: #ef859d2e;top: 0;left: 0;justify-content: center;">
        <div class="section_1 flex-col" style="background-image: url(&quot;https://blog.cuixinyu.com/img/others/avatar.png&quot;);position: absolute;width: 152px;height: 152px;display: flex;top: 130px;background-size: cover;border-radius: 50%;animation: huxi 1200ms ease-out infinite alternate;background-color:#ffffff"></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: #000000;line-height: 37px;text-align: center;">嘿！您在&nbsp;${SITE_NAME}&nbsp;博客中收到一条消息。</span>
        </div>
        <div class="box_2 flex-row" style="margin: 0 20px;min-height: 128px;background: #F7F7F7;border-radius: 12px;margin-top: 34px;display: flex;flex-direction: column;align-items: flex-start;padding: 32px 16px;width: calc(100% - 40px);">
            <div class="text-wrapper_4 flex-col justify-between" style="display: flex;flex-direction: column;margin-left: 30px;">
                <span class="text_3" style="height: 22px;font-size: 16px;font-family: PingFang-SC-Bold, PingFang-SC;font-weight: bold;color: #C5343E;line-height: 22px;">${NICK}</span>
                <span class="text_4" style="margin-top: 6px;margin-right: 22px;font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #000000;line-height: 22px;">${COMMENT}</span>
            </div>
            <a class="text-wrapper_2 flex-col" style="min-width: 106px;height: 38px;background: #ef859d38;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: #DB214B;">查看详情</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: #00000045;line-height: 17px;">此邮件由评论服务自动发出，直接回复无效。</span>
            <a class="text_7" style="height: 17px;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #DB214B;line-height: 17px;margin-top: 6px;text-decoration: none;" href="${SITE_URL}">前往博客</a>
        </div>
    </div>
</div>

More info: Twikoo评论回复邮件模板：Acrylic Mail 粉