邮箱模版推荐

前言

本文是一篇关于邮箱回复通知美化模版的展示推荐教程,主要介绍如何使用模版美化邮箱回复通知,以及如何选择合适的模版。

使用方法

  • 将修改好的邮件模版的html用美化压缩工具进行压缩,如:HTML格式化在线工具
  • 将压缩后的html代码复制到后台 - 邮件通知 的 MAIL_TEMPLATEMAIL_TEMPLATE_ADMIN 对应处

参数释义

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

模版及效果展示

模版样式 1

完整代码

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
<div>
<div id="isForwardContent">
<div>
<div id="content">
<div style="background: white;width: 95%;max-width: 800px;margin: auto auto; border-radius: 15px; border: #39c5bb 1px solid; overflow: hidden; -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); ">
<header style="overflow: hidden">
<img src="https://tuchuang.voooe.cn/images/2023/01/02/violet.webp" style="width: 100%; z-index: 666" />
</header>
<div style="padding: 5px 20px;background-color: #46e1c60d">
<div class="dear" style=" border-radius: 30px; position: relative; color: white; float: left; z-index: 999; background: #39c5bb; padding: 10px 30px; margin: -25px auto 0; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); ">亲爱的 ${PARENT_NICK} 同学:</div>
<br />
<center>
<h3>来自 <strong>${NICK}</strong> 的回复</h3>
</center>
<hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;" />
<br /><p>您好!您在 <a href="${POST_URL}" style="text-decoration: none; color: #39c5bb" target="_blank">&nbsp;${SITE_NAME}&nbsp;</a>上发表的评论:</p>
<div class="tk-content" style="border-radius: 8px;border: 1px solid #ddd; padding-bottom: 20px; background-color: #f5f5f5; margin: 15px 0px; padding-left: 20px; padding-right: 20px; padding-top: 20px;">${PARENT_COMMENT}</div>
<p>
<strong>${NICK}</strong> 给您回复啦:
</p>
<div class="tk-content" style="border-radius: 8px;border: 1px solid #ddd; padding-bottom: 20px; background-color: #f5f5f5; margin: 15px 0px; padding-left: 20px; padding-right: 20px; padding-top: 20px; ">${COMMENT}</div>
<p>欢迎再次光临小站: <a style="text-decoration:none; color:#39c5bb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>
</p>
<p>(此邮件由评论服务自动发出,支持直接回复)</p>
<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:#39c5bb;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-top: 3rem; display:block;color:#b3b3b1;text-decoration:none;">
<img src="https://q.qlogo.cn/g?b=qq&k=2cuOQJ3AtuE2zKx19ia2UuA&kti=ZCsL7gAAAAA&s=640" style="width:5rem; margin:0 auto;border-radius: 5px;" />&nbsp;
<hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;" />©&nbsp;2024-2025&nbsp;By <a href="https://blog.xcodey.com/" style="text-align:center; color: #39c5bb;text-decoration: none;font-weight: bold" target="_blank">橘子🍊</a>
<p> </p>
</div>
</div>
</div>
</div>
</div>
<br />
</div>
<style type="text/css">
.qmbox ::-webkit-scrollbar { display: none; }
</style>
<style id="cloudAttachStyle" type="text/css">
.qmbox #divNeteaseBigAttach, .qmbox #divNeteaseBigAttach_bak { 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: block; } .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

完整代码

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
<div>
<div id="isForwardContent">
<div>
<div id="content">
<div style="background: white;width: 95%;max-width: 800px;margin: auto auto; border-radius: 15px; border: #39c5bb 1px solid; overflow: hidden; -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); ">
<header style="overflow: hidden">
<img src="https://tuchuang.voooe.cn/images/2023/01/02/violet.webp" style="width: 100%; z-index: 666" />
</header>
<div style="padding: 5px 20px;background-color: #46e1c60d">
<div class="dear" style=" border-radius: 30px; position: relative; color: white; float: left; z-index: 999; background: #39c5bb; padding: 10px 30px; margin: -25px auto 0; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); ">亲爱的橘子站长:</div>
<br />
<center>
<h3>来自 <strong>${NICK}</strong> 的评论</h3>
</center>
<hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;" />
<br>
<p>
您好!系统得知 <strong>${NICK}</strong> 刚刚在您的网站发表评论:
</p>
<div class="tk-content" style="border-radius: 8px;border: 1px solid #ddd; padding-bottom: 20px; background-color: #f5f5f5; margin: 15px 0px; padding-left: 20px; padding-right: 20px; padding-top: 20px; ">${COMMENT}</div>
<p>特地通知您,快去看看吧!</p>
<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:#39c5bb;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-top: 3rem; display:block;color:#b3b3b1;text-decoration:none;">
<img src="https://q.qlogo.cn/g?b=qq&k=2cuOQJ3AtuE2zKx19ia2UuA&kti=ZCsL7gAAAAA&s=640" style="width:5rem; margin:0 auto;border-radius: 5px;" />&nbsp;
<hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;" />©&nbsp;2024-2025&nbsp;By <a href="https://blog.xcodey.com/" style="text-align:center; color: #39c5bb;text-decoration: none;font-weight: bold" target="_blank">橘子🍊</a>
<p> </p>
</div>
</div>
</div>
</div>
</div>
<br />
</div>
<style type="text/css">
.qmbox ::-webkit-scrollbar { display: none; }
</style>
<style id="cloudAttachStyle" type="text/css">
.qmbox #divNeteaseBigAttach, .qmbox #divNeteaseBigAttach_bak { 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: block; } .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

完整代码

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<style>
img {
display: none;
}

blockquote {
box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
margin: 10px 0;
padding: 10px;
border-left: 5px solid #b0b0b0;
border-radius: 10px;
}
pre,
blockquote,
blockquote p,
.twikoo-content p {
margin: 0
}

pre {
position: relative;
border-radius: 10px;
border: 1px solid #ddd;
overflow: auto;
padding: 30px 1em 1em;
scrollbar-width: none;
-ms-overflow-style: none;
box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
white-space: pre-wrap;
word-wrap: break-word
}

code {
white-space: pre !important;
}

pre::-webkit-scrollbar {
display: none
}

pre::before {
content: '';
position: absolute;
top: 10px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ff5f56;
box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
}

ul,
.qmbox ol, .qmbox ul {
margin: 0;
padding: 0 0 0 15px;
}

.twikoo-main {
width:100%;
max-width:800px;
margin: 20px auto 0;
padding: 20px;
border-radius:12px;
border:#e0e0e0 1px solid;
overflow:hidden;
box-shadow:inset 5px 5px 10px #c1c6cd,inset -5px -5px 10px #fff;
box-sizing: border-box;
}

.twikoo-content {
display: flex;
border-radius: 10px;
border: 1px solid #ddd;
padding: 15px;
gap: 10px;
overflow: hidden;
box-sizing: border-box;
box-shadow: inset 3px 3px 6px #c1c6cd, inset -3px -3px 6px #fff;
flex-direction: column;
}

.twikoo-center {
text-align: center;
}

.twikoo-hr {
width: 320px;
border: 0;
border-bottom: 1px solid #ccc;
}

.twikoo-link {
text-decoration: none;
color: #9c515b;
}
.twikoo-bold {
font-weight: 600;
color: #777;
}
.twikoo-footer-p {
text-align: center;
margin-top: 2rem;
display: block;
color: #b3b3b1;
}

.twikoo-footer-img {
display: block;
width: 2.8rem;
margin: 0 auto;
border-radius: 50%;
}

.twikoo-footer-hr {
width: 200px;
border: 0;
border-bottom: 1px solid #ccc;
margin: 10px auto;
}

.twikoo-footer-link {
text-align: center;
color: #9c515b;
margin-left: 5px;
text-decoration: none;
}

.twikoo-chakan {
text-align: center;
}

.twikoo-chakan a:hover {
box-shadow: inset 3px 3px 6px #c1c6cd, inset -3px -3px 6px #fff !important
}

.twikoo-chakan a {
color: #9c515b;
text-decoration: none;
padding: 10px 15px;
font-size: 13px;
border-radius: 10px;
box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
transition: all .3s ease-in-out;
}
</style>
<div class="twikoo-main">
<center>
<h3>你收到了来自 <a class="twikoo-link" href="${NICK}">${NICK}</a> 的回复</h3>
</center>
<hr class="twikoo-hr">
<p class="twikoo-bold">您在 <a class="twikoo-link" href="${POST_URL}" target="_blank">${SITE_NAME}</a> 上发表的评论:</p>
<div class="twikoo-content">${PARENT_COMMENT}</div>
<p class="twikoo-bold"><a class="twikoo-link" href="${NICK}">${NICK}</a> 给您回复啦:</p>
<div class="twikoo-content">${COMMENT}</div>
<p class="twikoo-bold">此邮件由评论服务自动发出,直接回复无效</p><br>
<div class="twikoo-chakan">
<a href="${POST_URL}" target="_blank">点击去原文查看&gt;&gt;</a>
</div>
<div class="twikoo-footer-p">
<img src="https://q.qlogo.cn/headimg_dl?dst_uin=277160461&spec=100" class="twikoo-footer-img">
<hr class="twikoo-footer-hr">
© 2025-2025 <a href="https://blog.xcodey.com" class="twikoo-footer-link" target="_blank">橘子的个人星球</a>
</div>
</div>

效果展示
回复通知模版2

完整代码

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<style>
img {
display: none;
}

blockquote {
box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
margin: 10px 0;
padding: 10px;
border-left: 5px solid #b0b0b0;
border-radius: 10px;
}
pre,
blockquote,
blockquote p,
.twikoo-content p {
margin: 0
}

pre {
position: relative;
border-radius: 10px;
border: 1px solid #ddd;
overflow: auto;
padding: 30px 1em 1em;
scrollbar-width: none;
-ms-overflow-style: none;
box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
white-space: pre-wrap;
word-wrap: break-word
}

code {
white-space: pre !important;
}

pre::-webkit-scrollbar {
display: none
}

pre::before {
content: '';
position: absolute;
top: 10px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ff5f56;
box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
}

ul,
.qmbox ol, .qmbox ul {
margin: 0;
padding: 0 0 0 15px;
}

.twikoo-main {
width:100%;
max-width:800px;
margin: 20px auto 0;
padding: 20px;
border-radius:12px;
border:#e0e0e0 1px solid;
overflow:hidden;
box-shadow:inset 5px 5px 10px #c1c6cd,inset -5px -5px 10px #fff;
box-sizing: border-box;
}

.twikoo-content {
display: flex;
border-radius: 10px;
border: 1px solid #ddd;
padding: 15px;
gap: 10px;
overflow: hidden;
box-sizing: border-box;
box-shadow: inset 3px 3px 6px #c1c6cd, inset -3px -3px 6px #fff;
flex-direction: column;
}

.twikoo-ip {
padding: 30px 1em 1em;
position: relative;
white-space: nowrap;
overflow: auto;
scrollbar-width: none;
}

.twikoo-ip::before {
content: '';
position: absolute;
top: 10px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ff5f56;
box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
}

.twikoo-center {
text-align: center;
}

.twikoo-hr {
width: 320px;
border: 0;
border-bottom: 1px solid #ccc;
}

.twikoo-link {
text-decoration: none;
color: #9c515b;
}
.twikoo-bold {
font-weight: 600;
color: #777;
}
.twikoo-footer-p {
text-align: center;
margin-top: 2rem;
display: block;
color: #b3b3b1;
}

.twikoo-footer-img {
display: block;
width: 2.8rem;
margin: 0 auto;
border-radius: 50%;
}

.twikoo-footer-hr {
width: 200px;
border: 0;
border-bottom: 1px solid #ccc;
margin: 10px auto;
}

.twikoo-footer-link {
text-align: center;
color: #9c515b;
margin-left: 5px;
text-decoration: none;
}

.twikoo-chakan {
text-align: center;
}

.twikoo-chakan a:hover {
box-shadow: inset 3px 3px 6px #c1c6cd, inset -3px -3px 6px #fff !important
}

.twikoo-chakan a {
color: #9c515b;
text-decoration: none;
padding: 10px 15px;
font-size: 13px;
border-radius: 10px;
box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
transition: all .3s ease-in-out;
}
</style>
<div class="twikoo-main">
<center>
<h3>你收到了来自 <a class="twikoo-link">${NICK}</a> 的评论</h3>
</center>
<hr class="twikoo-hr">
<p class="twikoo-bold">评论者信息:</p>
<div class="twikoo-content twikoo-ip">昵称:${NICK}<br>IP地址:${IP}<br>邮箱:${MAIL}<br>具体网址:${POST_URL}</div>
<p class="twikoo-bold"><a class="twikoo-link">${NICK}</a> 的评论内容:</p>
<div class="twikoo-content">${COMMENT}</div>
<p class="twikoo-bold">此邮件由评论服务自动发出,直接回复无效</p><br>
<div class="twikoo-chakan">
<a href="${POST_URL}" target="_blank">点击去原文查看&gt;&gt;</a>
</div>
<div class="twikoo-footer-p">
<img src="https://q.qlogo.cn/headimg_dl?dst_uin=277160461&spec=100" class="twikoo-footer-img">
<hr class="twikoo-footer-hr">
© 2021-2024 <a href="https://blog.xcodey.com" class="twikoo-footer-link" target="_blank">橘子的个人星球</a>
</div>
</div>

效果展示
管理员通知模版2


模版样式 3

完整代码

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
<div style="
border-radius: 10px 10px 10px 10px;
font-size: 13px;
color: #555555;
width: 666px;
margin: 50px auto;
border: 1px solid #eee;
max-width: 100%;
background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);
box-shadow: 0 1px 5px rgb(0 0 0 / 15%);">
<div style="
background:#49BDAD;
color:#ffffff;
border-radius: 10px 10px 0 0;
background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));
background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));
height: 66px;">
<!-- <p style="font-size:15px;
word-break:break-all;
padding: 23px 32px;
margin:0;
background-color: hsla(0,0%,100%,.4);
border-radius: 10px 10px 0 0;">
您在<a style="text-decoration:none;
color:#12addb;" href="http://xcodey.com/" target="_blank">橘子🍊个人博客</a>上的留言有新回复啦!
</p>-->
<p style="font-size:15px;
word-break:break-all;
padding: 23px 32px;
margin:0;
background-color: hsla(0,0%,100%,.4);
border-radius: 10px 10px 0 0;">
您在<a style="text-decoration:none;
color:#12addb;" href="{{site.url}}" target="_blank">CatOi的个人星球🪐</a>上的留言有新回复啦!
</p>
</div>
<div style="margin:20px auto;width:90%">
<p><strong >😊Hi,{{parent.nick}},</strong> 同学,您曾在<a href="{{site.postUrl}}" style="text-decoration: none;
color:#12addb"></a>上发表评论:</p>
<div style="background: #f5f5f5;
margin:20px 0;
padding:15px;
border-radius:5px;
font-size:14px;">
<p>{{parent.comment | safe}}</p>
</div>
<p><strong >{{self.nick}}</strong> 给您的回复如下:</p>
<div style="background: #f5f5f5;
margin:20px 0;
padding:15px;
border-radius:5px;
font-size:14px;">
<p>{{self.comment | safe}}</p>
</div>
<p>
您可以点击<a style="text-decoration:none;
color:#12addb" target="_blank" href="{{site.postUrl}}">查看回复的完整內容</a>
,欢迎再次光临<a style="text-decoration:none;
color:#12addb" href="https://catoi.cn/" target="_blank">CatOi的个人星球🪐</a>
</p>
<div style="color: #8c8c8c; font-size: 10px;width: 100%;text-align: center;word-wrap: break-word;">
<p style="padding: 20px">书上说,天下没有不散的宴席.书上还说,人生何处不相逢.</p>
</div>
</div>
</div>

效果展示
回复通知模版3

完整代码

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
<div style="
border-radius: 10px 10px 10px 10px;
font-size: 13px;
color: #555555;
width: 666px;
margin: 50px auto;
border: 1px solid #eee;
max-width: 100%;
background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);
box-shadow: 0 1px 5px rgb(0 0 0 / 15%);">
<div style="
background:#49BDAD;
color:#ffffff;
border-radius: 10px 10px 0 0;
background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));
background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));
height: 66px;">
<p style="font-size:15px;
word-break:break-all;
padding: 23px 32px;
margin:0;
background-color: hsla(0,0%,100%,.4);
border-radius: 10px 10px 0 0;">
您的<a style="text-decoration:none;
color: #ffffff;" href="{{site.url}}" target="_blank">CatOi的个人星球🪐</a>有了新评论啦!
</p>
</div>
<div style="margin:20px auto;width:90%">
<p><strong >{{self.nick}}</strong> 同学 给您的评论如下:</p>
<div style="background: #f5f5f5;
margin:20px 0;
padding:15px;
border-radius:5px;
font-size:14px;">
<p >{{self.comment | safe}}</p>
</div>
<p>
您可以点击<a style="text-decoration:none;
color:#12addb" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a>
</p>
<div style="color: #8c8c8c; font-size: 10px;width: 100%;text-align: center;word-wrap: break-word;">
<p style="padding: 20px">喧闹任其喧闹,自由我自为之。我自风情万种,与世无争。——陈果</p>
</div>
</div>
</div>

效果展示
管理员通知模版3


模版样式 4

完整代码

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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
</head>
<style>
.container {
margin: 5% 10%;
}
.box {
padding: 10px 20px;
margin: 15px 0;
border-radius: 10px;
border-left: 4px solid #539dfd;
background-color: #ecf7fe;
}
.title {
font-size: 15px;
font-weight: 400;
margin: 5px 0;
}
.time {
color: #539dfd;
border-bottom: 1px dashed #539dfd;
}
.jump {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 40px;
border-radius: 20px;
font-size: 14px;
color: #fff;
text-align: center;
background: #539dfd;
text-decoration: none;
}
</style>
<body>
<div class="container">
<div style="text-align: center;">
<h1 style="font-size: 20px; text-align: center;">您的留言被回复啦~</h1>
<div style="display: flex; justify-content: center; font-size: 12px;">
<h3 class="title" style="font-size: 12px;">发送方:<span>${NICK}</span></h3>
<h3 class="title" style="margin-left: 20px; font-size: 12px;">IP地址:<span>${IP}</span>
</h3>
</div>
</div>
<div class="box">
<h3 class="title" style="line-height: 25px;">你的留言:<span>${PARENT_COMMENT}</span></h3>
</div>
<div class="box">
<h3 class="title" style="line-height: 25px;">回复内容:<span>${COMMENT}</span></h3>
</div>
<a href="${POST_URL}" target="_blank" class="jump">查看完整回复内容</a>
</div>
</body>
</html>

效果展示
回复通知模版4

完整代码

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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
</head>
<style>
.container {
margin: 5% 10%;
}
.box {
padding: 10px 20px;
margin: 15px 0;
border-radius: 10px;
border-left: 4px solid #539dfd;
background-color: #ecf7fe;
}
.title {
font-size: 15px;
font-weight: 400;
margin: 5px 0;
}
.time {
color: #539dfd;
border-bottom: 1px dashed #539dfd;
}
.jump {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 40px;
border-radius: 20px;
font-size: 14px;
color: #fff;
text-align: center;
background: #539dfd;
text-decoration: none;
}
</style>
<body>
<div class="container">
<div style="text-align: center;">
<h1 style="font-size: 20px; text-align: center;"><span>{parent.comment | safe}</span/>》</h1>
<div style="display: flex; justify-content: center; font-size: 12px;">
<h3 class="title" style="font-size: 12px;">发送方:<span>${NICK}</span></h3>
<h3 class="title" style="margin-left: 20px; font-size: 12px;">IP地址:<span class="time">${IP}</span>
</h3>
</div>
</div>
<div class="box">
<h3 class="title" style="line-height: 25px;"><span>${COMMENT}</span></h3>
</div>
<a href="${POST_URL}" target="_blank" class="jump">查看完整回复内容</a>
</div>
</body>
</html>

效果展示
管理员通知模版4