前言
为什么会写个邮件模板文章呢？其实是因为我看默认模板也看腻了，想起最近小伙伴回复我的邮件，发现他们的邮件模板都好好看！自己要不也搞一个吧～也能给访客带来好印象哈哈～
我用的是Twikoo+Waline评论系统，均可以按照官方文档填写变量，这两个评论系统我采用了相同的css样式，只有其中的变量名不同。
样式预览
源码
Twikoo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <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("https://resource.night1918.top/avatar/avatar.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: #000000; 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: #00000030; 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: #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;">
<hr>
<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>
|
将上面这段代码粘贴至Twikoo管理面板-邮件通知的MAIL_TEMPLATE中即可。
其中，https://resource.night1918.top/avatar/avatar.png可替换为你的网站图标图片的url地址。
Waline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <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("https://resource.night1918.top/avatar/avatar.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: #000000; 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: #00000030; line-height: 22px; margin-top: 21px; text-align: center;">
你之前的评论 在 {{site.name}} 中收到来自 {{self.nick}} 的回复
</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|safe}}
</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;">
<hr>
<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;">
{{self.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;">
{{self.comment|safe}}
</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="{{site.url}}/{{self.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>
|
将上面这段代码粘贴至Waline环境变量中的MAIL_TEMPLATE中，然后Redeploy即可。
其中，https://resource.night1918.top/avatar/avatar.png可替换为你的网站图标图片的url地址。
参考文章
Waline官方文档-评论通知
Twikoo评论回复邮件模板：Acrylic Mail 粉 | 张洪Heo
微信
支付宝
