前言

使用是没什么问题,但使用久了,我还是感觉有点差强人意,有点单调,本来是有一个背景色的,不过我感觉还是不好看,取消了后久成了下面的模板,我觉得还是有点不好看,所以我就进行了二次美化。

前期使用的模板

访客评论模板

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<div>
<div id="isForwardContent" style="margin:auto auto;width: 100%;display: block;">
<div>
<div id="content">
<header style="overflow: hidden"> <img
src="https://npm.elemecdn.com/falling42-cdn@1.0.0/cover/6833939bly1gicis3attqj20zk0m8k7l.jpg"
style="width: 100%; z-index: 666;border-radius:7px 7px 0 0;" /> </header>
<div
style="padding: 5px 20px;background: #eee9e3;-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);border-radius:0 0 7px 7px;border: #ffd6a4 solid 1px;">
<div class="dear"
style="position: relative;border-radius: 5px; color: white; float: left; z-index: 999; background: #ffd6a4; padding: 5px 30px; margin: -25px auto 0; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);">
<strong>冰刻无痕 ~ 记录之地</strong> </div> <br />
<center>
<h3>来自&nbsp;<strong>${NICK}</strong>&nbsp;的评论</h3>
</center>
<hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;" /> <br />
<p> <strong style="color: #27328e;">${NICK}</strong>&nbsp;评论了你的文章: </p>
<div class="tk-content"
style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #eee; margin: 15px 0px; padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid; padding-top: 20px;border-radius: 5px; ">
${COMMENT}</div> <br />
<div class="chakan" style="text-align: center;"> <a href="${POST_URL}"
style="color:#ffffff;text-decoration:none;display:inline-block;min-height:28px;line-height:28px;padding:0 13px;outline:0;background:#ffd6a4;font-size:13px;text-align: center;font-weight:400;border:0;border-radius:999em"
target="_blank">点击去原文查看&gt;&gt;</a>
<p> </p>
</div>
<div class="footer-p"
style="text-align: center; margin: 20px 0; display:flex;color:#b3b3b1;text-decoration:none;width: 100%;height: 100px;justify-content: flex-end;">
<div class="Your"
style="position: relative;border-radius: 5px; color: #000; float: right; z-index: 999; display: flex;justify-content: center;align-items: flex-end;flex-flow: column;flex-wrap: wrap;">
<div class="text" style="margin: 10px;"> <a href="http://hcer.top/"
style="text-align:center; color: #27328e;text-decoration: none;"
target="_blank">冰梦のBlog</a> </div>
<p style="margin: 10px;">©&nbsp;2022</p>
</div>
</div>
</div>
</div> <br />
</div>
<style type="text/css">
.qmbox ::-webkit-scrollbar {
display: none;
}
</style>
<style id="blockquoteStyle" type="text/css">
.qmbox blockquote {
display: none;
}
</style>
<style type="text/css">
.qmbox body {
font-size: 14px;
font-family: arial, verdana, sans-serif;
line-height: 1.666;
padding: 0;
margin: 0;
overflow: auto;
white-space: normal;
word-wrap: break-word;
min-height: 100px;
}

.qmbox td,
.qmbox input,
.qmbox button,
.qmbox select,
.qmbox body {
font-family: Helvetica, 'Microsoft Yahei', verdana;
}

.qmbox pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
width: 95%;
}

.qmbox th,
.qmbox td {
font-family: arial, verdana, sans-serif;
line-height: 1.666;
}

.qmbox img {
border: 0;
}

.qmbox header,
.qmbox footer,
.qmbox section,
.qmbox aside,
.qmbox article,
.qmbox nav,
.qmbox hgroup,
.qmbox figure,
.qmbox figcaption {
display: flex;
justify-content: center;
}

.qmbox blockquote {
margin-right: 0px;
}
</style>
<style type="text/css">
@media screen and (max-width: 1100px) {
#content p {
font-size: 10px;
}

#content h3 {
font-size: 14px;
}

.footer-p {
font-size: 9px;
}

.dear {
font-size: 12px;
}
}
</style>
<style id="ntes_link_color" type="text/css">
.qmbox a,
.qmbox td a {
color: #236da1;
}
</style>
</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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<div>
<div id="isForwardContent">
<div>
<div id="content">
<header style="overflow: hidden"> <img
src="https://npm.elemecdn.com/falling42-cdn@1.0.0/cover/6833939bly1giciryrr3rj20zk0m8nhk.jpg"
style="width: 100%; z-index: 666;border-radius:7px 7px 0 0;" /> </header>
<div
style="padding: 5px 20px;background: #eee9e3;-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);border-radius:0 0 7px 7px;border: #ffd6a4 solid 1px;">
<div class="dear"
style="position: relative;border-radius: 5px; color: white; float: left; z-index: 999; background: #ffd6a4; padding: 5px 30px; margin: -25px auto 0; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);">
<strong>您好『${PARENT_NICK}』</strong> </div> <br />
<center>
<h3>来自&nbsp;<strong>${NICK}</strong>&nbsp;的回复</h3>
</center>
<hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;" /> <br />&nbsp;
&nbsp; <p>您在 <a href="${POST_URL}" style="text-decoration: none; color: #ffb8b8"
target="_blank">&nbsp;<strong style="color: #27328e;">${SITE_NAME}</strong>&nbsp;</a>上发表的评论:
</p>
<div class="tk-content"
style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #eee; margin: 15px 0px; padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid; padding-top: 20px;border-radius: 5px;">
${PARENT_COMMENT}</div>
<p> <strong style="color: #27328e;">${NICK}</strong>&nbsp;给您回复啦: </p>
<div class="tk-content"
style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #eee; margin: 15px 0px; padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid; padding-top: 20px;border-radius: 5px; ">
${COMMENT}</div>
<p>欢迎再次光临 <a style="text-decoration:none; color:#27328e" href="${SITE_URL}" target="_blank"><strong
style="color: #27328e;">${SITE_NAME}</strong></a></p> <br />
<div class="chakan" style="text-align: center;"> <a href="${POST_URL}"
style="color:#ffffff;text-decoration:none;display:inline-block;min-height:28px;line-height:28px;padding:0 13px;outline:0;background:#ffd6a4;font-size:13px;text-align: center;font-weight:400;border:0;border-radius:999em"
target="_blank">点击去原文查看&gt;&gt;</a>
<p>此邮件由系统自动发出,请勿直接回复 </p>
</div>
<div class="footer-p"
style="text-align: center; margin: 20px 0; display:flex;color:#b3b3b1;text-decoration:none;width: 100%;height: 100px;justify-content: flex-end;">
<div class="Your"
style="position: relative;border-radius: 5px; color: #000; float: right; z-index: 999; display: flex;justify-content: center;align-items: flex-end;flex-flow: column;flex-wrap: wrap;">
<div class="text" style="margin: 10px;"> 来自 <a href="http://hcer.top/"
style="text-align:center; color: #27328e;text-decoration: none;"
target="_blank">冰刻无痕</a> </div>
<p style="margin: 10px;">©&nbsp;2022</p>
</div>
</div>
</div>
</div>
</div> <br />
</div>
<style type="text/css">
.qmbox ::-webkit-scrollbar {
display: none;
}
</style>
<style id="blockquoteStyle" type="text/css">
.qmbox blockquote {
display: none;
}
</style>
<style type="text/css">
.qmbox body {
font-size: 14px;
font-family: arial, verdana, sans-serif;
line-height: 1.666;
padding: 0;
margin: 0;
overflow: auto;
white-space: normal;
word-wrap: break-word;
min-height: 100px;
}

.qmbox td,
.qmbox input,
.qmbox button,
.qmbox select,
.qmbox body {
font-family: Helvetica, 'Microsoft Yahei', verdana;
}

.qmbox pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
width: 95%;
}

.qmbox th,
.qmbox td {
font-family: arial, verdana, sans-serif;
line-height: 1.666;
}

.qmbox img {
border: 0;
}

.qmbox header,
.qmbox footer,
.qmbox section,
.qmbox aside,
.qmbox article,
.qmbox nav,
.qmbox hgroup,
.qmbox figure,
.qmbox figcaption {
display: flex;
justify-content: center;
}

.qmbox blockquote {
margin-right: 0px;
}
</style>
<style type="text/css">
@media screen and (max-width: 1100px) {
#content p {
font-size: 10px;
}

#content h3 {
font-size: 14px;
}

.footer-p {
font-size: 9px;
}

.dear {
font-size: 12px;
}
}
</style>
<style id="ntes_link_color" type="text/css">
.qmbox a,
.qmbox td a {
color: #236da1;
}
</style>
</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
<div
style="background-image: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg.jpg);background-color:#ded8ca;width:100%;">
<div
style="background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/leisi-714x62.png) repeat-y scroll top;">
<div
style="font-size:14px;color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;border:1px solid #eee;max-width:100%;background: #cc80803d;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);margin:auto">
<img class="headerimg no-lightbox entered loaded"
src="https://npm.elemecdn.com/sarakale-assets@v1/bg/bg3.jpg"
style="width:100%;overflow:hidden;pointer-events:none" data-ll-status="loaded">
<div
style="width:100%;color:#9d2850;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;">
<p
style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;padding: 23px 32px;margin:0;border-radius: 10px 10px 0 0;">
您在<a style="text-decoration:none;color: #9d2850;" href="${SITE_URL}"
target="_blank">『${SITE_NAME}』</a>博客中收到新回复</p>
</div>
<div style="margin:40px auto;width:90%;">
<p><strong>${NICK}&nbsp;</strong>评论了你:</p>
<div
style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">
${COMMENT}</div>
<div style="text-align: center;">
<p style="border-radius: 50px;padding: 10px;background: #fafafa;display: inline-block;"><a
style="text-decoration:none; color:#cf5c83" href="${POST_URL}"
target="_blank">点击查看详情&gt;&gt;</a></p>
</div>
</div>
</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
<div
style="background-image:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg.jpg);background-color:#ded8ca;width:100%">
<div
style="background:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/leisi-714x62.png) repeat-y scroll top">
<div
style="font-size:14px;color:#555;width:666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,SimSun,sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background:#cc80803d;box-shadow:0 1px 5px rgba(0,0,0,.15);margin:auto">
<img class="headerimg no-lightbox entered loaded"
src="https://npm.elemecdn.com/sarakale-assets@v1/bg/bg3.jpg"
style="width:100%;overflow:hidden;pointer-events:none" data-ll-status="loaded">
<div
style="width:100%;background-image:-moz-linear-gradient(0deg,#43c6b8,#ffd1f4);height:66px;background:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;color:#9d2850">
<p
style="font-size:16px;font-weight:700;text-align:center;word-break:break-all;padding: 23px 32px;margin:0;border-radius: 10px 10px 0 0;">
您在<a style="text-decoration:none;color: #9d2850;" href="${SITE_URL}" target="_blank">『${SITE_NAME}』上的留言有新回复啦!</a>
</p>
</div>
<div style="margin:40px auto;width:90%">
<p>Hi,<strong>${NICK}</strong>,您曾在文章上发表的评论:</p>
<div
style="background:#fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:15px;color:#555">
${COMMENT}</div>
<p><strong>${PARENT_NICK}&nbsp;</strong>给您的回复如下:</p>
<div
style="background:#fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:15px;color:#555">
${PARENT_COMMENT}</div>
<p>您可以<strong style="color:#cf5c83">点击查看详情</strong>,欢迎再次光临<a style="text-decoration:none;color:#cf5c83"
href="${SITE_URL}" target="_blank">${SITE_NAME}</a></p>
<div style="text-align:center">
<p style="border-radius:50px;padding:10px;background:#fafafa;display:inline-block"><a
style="text-decoration:none;color:#cf5c83" href="${POST_URL}"
target="_blank">点击查看详情&gt;&gt;</a></p>
</div>
<hr>
<p style="font-size:14px;color:#b7adad">本邮件为系统自动发送,请勿直接回复邮件哦,可到博文内容回复。<br></p>
</div>
</div>
</div>
</div>

Twikoo邮件自定义字段

如需要进行邮件模板的调整,根据以下参数进行魔改。

参数含义
${SITE_URL}网站链接
${SITE_NAME}网站名字
${PARENT_NICK}被回复人昵称
${PARENT_COMMENT}被回复人的评论内容
${NICK}回复人昵称
${COMMENT}回复人评论内容
${POST_URL}文章链接
${IMG}回复人头像
${PARENT_IMG}被回复人头像
${MAIL}回复人邮件
${IP}回复人 IP 地址