自定义Waline/Twikoo邮件通知样式

前言

为什么会写个邮件模板文章呢？其实是因为我看默认模板也看腻了，想起最近小伙伴回复我的邮件，发现他们的邮件模板都好好看！自己要不也搞一个吧～也能给访客带来好印象哈哈～

我用的是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(&quot;https://resource.night1918.top/avatar/avatar.png&quot;);  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;">
				嘿！你在&nbsp;${SITE_NAME}&nbsp;中收到一条新回复。
			</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;">
				你之前的评论&nbsp;在&nbsp;${SITE_NAME}&nbsp;中收到来自&nbsp;${NICK}&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;">
				<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(&quot;https://resource.night1918.top/avatar/avatar.png&quot;);  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;">
				嘿！你在&nbsp;{{site.name}}&nbsp;中收到一条新回复。
			</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;">
				你之前的评论&nbsp;在&nbsp;{{site.name}}&nbsp;中收到来自&nbsp;{{self.nick}}&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|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