twikoo邮箱通知模板分享

修复记录

  • 【2024-8-22 19:21:53】修复了在谷歌邮箱中不正确显示的问题(删除了不兼容的position、justify-content、flex-wrap、align-items、top、flex-direction)
  • 【2024-8-22 23:17:46】修复了图片显示大小，但在markdown图片插入跟在markdown代码块后面会大小失控，以及手机端markdown代码块无法调整宽度超出画面(无能为力)，其余文本自动换行

先上效果

MAIL_TEMPLATE预览效果
MAIL_TEMPLATE_ADMIN模板预览效果

MAIL_TEMPLATE模板

代码已经分享到了CodePen

将代码压缩(例如minify)，然后进到twikoo后台-配置管理-邮件通知

在MAIL_TEMPLATE一项填入压缩后的代码

代码如下

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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<style>
  .ax_post_box-comment-text-inner img {
    max-width: 100%;
  }
</style>
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
  <div class="box_3 flex-col" style="
  display: flex;
  width: 100%;
  height: 206px;
  background: #3E3DA8;
  background-size: auto 100%;
  background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url(&quot;https://bu.dusays.com/2023/09/22/650d668578553.png&quot;);
  background-position: center;
  top: 0;
  left: 0;
  border-radius: 15px 15px 15px 15px;
"><div class="section_1 flex-col" style="
  background-image: url(&quot;https://bu.dusays.com/2023/09/22/650d5b6ec9ab7.png&quot;);
  width: 152px;
  height: 152px;
  display: flex;
  margin: 130px auto;
  background-size: cover;
"></div></div>
  <div class="box_4 flex-col" style="
  margin-top: 92px;
">
    <div class="text-group_5 flex-col justify-between" style="
  display: grid;
  margin: 0 20px;
  text-align: center;
">
      <span class="text_1" style="
  font-size: 26px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #F3E6FF;
  line-height: 37px;
  text-align: center;
  width: 100%;
">嘿！你在&nbsp;${SITE_NAME}&nbsp;博客中收到一条新回复。</span>
      <span class="text_2" style="
  font-size: 16px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #FEB3B1;
  line-height: 22px;
  margin-top: 21px;
  text-align: center;
  width: 100%;
">你之前的评论&nbsp;在&nbsp;${SITE_NAME} 博客中收到来自&nbsp;${NICK}&nbsp;的回复</span>
    </div>
    <div class="box_2 flex-row" style="
  margin: 0 auto;
  min-height: 128px;
  background: #F3E6FF;
  border-radius: 12px;
  margin-top: 34px;
  display: grid;
  padding: 3px 16px 32px 16px;
  width: 85%;
">    
      <div class="text-wrapper_4 flex-col justify-between" style="
  display: flex;
  width: 100%;
  margin: auto;
  margin-bottom: 16px;
">
      <div style="
  width: 100%;
  padding:15px 12px 0 12px;
  margin-top:0px
">
      <div class=Messages_box>
      <p style="
  font-size: 20px;
  display:flex;
  color:#3E3DA8
"><strong style="
  font-size: 45px;
  color:#F3E6FF;
  max-width:506px;
  background-color:#7877F9; 
  padding:3px 10% 4px 10%;
  border-radius:9px;
  margin:0 auto;
">留言板</strong></p>
      <hr style="
    display: flex;
    border: 9px double #3E3DA8;
    box-sizing: content-box;
    height: 0px;
    overflow: visible;
    width: 90%;
">
      <p style="
  font-size: 20px;
  display:flex;
  color:#3E3DA8
"><strong style="
  margin: 0px auto;
  font-size: 10px;
  color:#F3E6FF;
  max-width:506px;
  background-color:#7877F980; 
  padding:3px 60px 4px 60px;
  border-radius:9px
">原文记录</strong></p>
      <div class="ax_post_box-comments-single Messages-author"
        style="
  display:flex;
  float: right;
  margin-bottom:5px;
  margin-top:7px;
  color:#FEB3B1
">
      <div class=ax_post_box-comment-text style="
      margin-right:10px;
      display:flex;
"><div class=ax_post_box-comment-text-inner
        style="
  max-width:506px;
  background-color:#3E3DA8;
  padding:10px;
  border-radius:9px;
  margin-bottom:3px;
  width:auto;
">${PARENT_COMMENT}</div><span
        class=ax_post_box-comment-text-before
        style="
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:8px solid;
  border-left-color:#3E3DA8;
  border-right:0;
  border-right-color:transparent;
  right:-7px;
  left:auto;
  margin-top:12px;
"></span>
      </div><div class=ax_post_box-comment-avatar style="
  width:auto;
  flex:none;
  order:2
"><img src=${PARENT_IMG}
        style="
  width:40px;
  height:40px;
  border-radius:5px
"></div>
      </div>
      <hr style="
    display: flex;
    border: 1px dashed #3E3DA8;
    box-sizing: content-box;
    height: 0px;
    overflow: visible;
    width: 100%;
    margin-top:30px
">
      <p style="
  font-size: 20px;
  display:flex;
  color:#3E3DA8
"><strong style="
  margin: 0px auto;
  font-size: 10px;
  color:#F3E6FF;
  max-width:506px;
  background-color:#7877F980; 
  padding:3px 60px 4px 60px;
  border-radius:9px
">当前位置</strong></p>
      <p><strong style="
  font-size: 20px;
  color:#3E3DA8"
  >${NICK}</strong><strong style="
  color:#E25860;
"> 回复：</strong></p>
      <div class="ax_post_box-comments-single Messages-user" style="
  display:flex;
  margin-bottom:5px;
  margin-top:7px;
  color:#FEB3B1
">
      <div class=ax_post_box-comment-avatar style="
  width:auto;
  flex:none
"><img src=${IMG}
        style="
  width:40px;
  height:40px;
  border-radius:5px
"></div>
      <div class=ax_post_box-comment-text style="
  display:flex;
  margin-left:10px
"><span
        class=ax_post_box-comment-text-before
        style="
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-right:8px solid;
  border-right-color:#3E3DA8;
  left:-7px;
  right:auto;
  margin-top:12px;
"></span>
      <div class=ax_post_box-comment-text-inner style="
  max-width:506px;
  background-color:#3E3DA8;
  padding:10px;
  border-radius:9px;
  margin-bottom:3px;
  width:auto;
">${COMMENT}</div></div></div></div></div></div>

      <a class="text-wrapper_2 flex-col" style="
  min-width: 106px;
  height: 38px;
  background: #7877F9;
  border-radius: 32px;
  display: flex;
  text-decoration: none;
  margin: auto;
  margin-top: 32px;
" href="${POST_URL}">
        <span class="text_5" style="
  color: #F3E6FF;
  margin: auto;
">查看详情</span>
      </a>
    </div>
    <div class="text-group_6 flex-col justify-between" style="
  display: grid;
  margin-top: 34px;
  text-align: center;
">
      <span class="text_6" style="
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f3e6ff8e;
  line-height: 17px;
  width: 100%;
">此邮件由评论服务自动发出，直接回复无效。</span>
      <a class="text_7" style="
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FEB3B1;
  line-height: 17px;
  margin-top: 6px;
  text-decoration: none;
  width: 100%;
" href="${SITE_URL}">前往博客</a>
      <a class="text_8" style="
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f3e6ff8e;
  line-height: 17px;
  margin-top: 6px;
  text-decoration: none;
 "></a>
    </div>
  </div>
</div>

MAIL_TEMPLATE_ADMIN模板

如果还需要MAIL_TEMPLATE_ADMIN的模板代码
也分享到CodePen了

代码如下

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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<style>
  .ax_post_box-comment-text-inner img {
    max-width: 100%;
  }
</style>
<div class="page flex-col" style="background-image: linear-gradient(to bottom, #7877F9, #3E3DA8);">
  <div class="box_3 flex-col" style="
  display: flex;
  width: 100%;
  height: 206px;
  background: #3E3DA8;
  background-size: auto 100%;
  background-image: linear-gradient(to bottom, rgba(62,61,168,0) 0%,rgba(62,61,168, 0.1) 80%,rgba(62,61,168,1) 100%),url(&quot;https://bu.dusays.com/2023/09/22/650d668578553.png&quot;);
  background-position: center;
  top: 0;
  left: 0;
  border-radius: 15px 15px 15px 15px;
"><div class="section_1 flex-col" style="
  background-image: url(&quot;https://bu.dusays.com/2023/09/22/650d5b6ec9ab7.png&quot;);
  width: 152px;
  height: 152px;
  display: flex;
  margin: 130px auto;
  background-size: cover;
"></div></div>
  <div class="box_4 flex-col" style="
  margin-top: 92px;
">
    <div class="text-group_5 flex-col justify-between" style="
  display: grid;
  margin: 0 20px;
  text-align: center;
">
      <span class="text_1" style="
  font-size: 26px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #F3E6FF;
  line-height: 37px;
  text-align: center;
  width: 100%;
">嘿！你在&nbsp;${SITE_NAME}&nbsp;博客中收到一条新回复。</span>
      <span class="text_2" style="
  font-size: 16px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #FEB3B1;
  line-height: 22px;
  margin-top: 21px;
  text-align: center;
  width: 100%;
">你之前的评论&nbsp;在&nbsp;${SITE_NAME} 博客中收到来自&nbsp;${NICK}&nbsp;(${MAIL})&nbsp;的回复</span>
    </div>
    <div class="box_2 flex-row" style="
  margin: 0 auto;
  min-height: 128px;
  background: #F3E6FF;
  border-radius: 12px;
  margin-top: 34px;
  display: grid;
  padding: 3px 16px 32px 16px;
  width: 85%;
">
      
      <div class="text-wrapper_4 flex-col justify-between" style="
  display: flex;
  width: 100%;
  margin: auto;                                                   
  margin-bottom: 16px;
">
      <div style="
  width: 100%;
  padding:15px 12px 0 12px;
  margin-top:0px
">
      <div class=Messages_box>
      <p style="
  font-size: 20px;
  display:flex;
  color:#3E3DA8;
"><strong style="
  font-size: 45px;
  color:#F3E6FF;
  max-width:506px;
  background-color:#7877F9; 
  padding:3px 10% 4px 10%;
  border-radius:9px;
  margin: 0 auto;
">📫博主收件箱</strong></p>
      <hr style="
    display: flex;
    border: 2px dashed #3E3DA8;
    box-sizing: content-box;
    height: 0px;
    overflow: visible;
    width: 90%;
">
      <p style="
  font-size: 20px;
  display:flex;
  color:#3E3DA8
"><strong style="
  margin: 0px auto;
  font-size: 10px;
  color:#F3E6FF;
  max-width:506px;
  background-color:#7877F980; 
  padding:3px 60px 4px 60px;
  border-radius:9px
">新消息</strong></p>
      <p><strong style="
  font-size: 20px;
  color:#3E3DA8"
  >${NICK}</strong><strong style="
  color:#E25860;
"> ：</strong></p>
      <div class="ax_post_box-comments-single Messages-user" style="
  display:flex;
  margin-bottom:5px;
  margin-top:7px;
  color:#FEB3B1
">
      <div class=ax_post_box-comment-avatar style="
  width:auto;
  flex:none
"><img src=${IMG}
        style="
  width:40px;
  height:40px;
  border-radius:5px
"></div>
      <div class=ax_post_box-comment-text style="
  margin-left:10px;
  display: flex;
"><span
        class=ax_post_box-comment-text-before
        style="
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-right:8px solid;
  border-right-color:#3E3DA8;
  left:-7px;
  right:auto;
  margin-top:12px;
"></span>
      <div class=ax_post_box-comment-text-inner style="
  max-width:506px;
  background-color:#3E3DA8;
  padding:10px;
  border-radius:9px;
  margin-bottom:3px;
  width:auto;
">${COMMENT}</div></div></div></div></div></div>

      <a class="text-wrapper_2 flex-col" style="
  min-width: 106px;
  height: 38px;
  background: #7877F9;
  border-radius: 32px;
  display: flex;
  text-decoration: none;
  margin: auto;
  margin-top: 32px;
" href="${POST_URL}">
        <span class="text_5" style="
  color: #F3E6FF;
  margin: auto;
">查看详情</span>
      </a>
    </div>
    <div class="text-group_6 flex-col justify-between" style="
  display: grid;
  text-align: center;
  margin-top: 34px;
">
      <span class="text_6" style="
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f3e6ff8e;
  line-height: 17px;
  width: 100%;
">此邮件由评论服务自动发出，直接回复无效。</span>
      <a class="text_7" style="
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FEB3B1;
  line-height: 17px;
  margin-top: 6px;
  text-decoration: none;
  width: 100%;
" href="${SITE_URL}">前往博客</a>
      <a class="text_8" style="
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f3e6ff8e;
  line-height: 17px;
  margin-top: 6px;
  text-decoration: none;
 "></a>
    </div>
  </div>
</div>