Twikoo邮件通知模板分享

前因

昨天摸鱼的时候想改邮件模板，结果怎么改都不满意，最后向六神索取了一份他的模板进行了一些修改。

后果

模板整体风格为拟态化风格，删除了原模板的图片封面，评论的图片资源不会显示在邮件中（介意的自行更改一下），对评论的引用和代码块进行了一些美化处理，另外将所有内联的样式改写成类，具体请看图

模板效果

博主模版

访客模版

模板代码

底部的头像是QQ的接口可以直接替换为你的QQ也可以换成你自己的链接

博主模版 MAIL_TEMPLATE_ADMIN

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=153336174&spec=100" class="twikoo-footer-img">
        <hr class="twikoo-footer-hr">
        © 2021-2024 <a href="https:/www.bsgun.cn" class="twikoo-footer-link" target="_blank">梦爱吃鱼·Bsgun.CN</a>
    </div>
</div>

访客模版 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
<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=153336174&spec=100" class="twikoo-footer-img">
        <hr class="twikoo-footer-hr">
        © 2021-2024 <a href="https:/www.bsgun.cn" class="twikoo-footer-link" target="_blank">梦爱吃鱼·Bsgun.CN</a>
    </div>
</div>

使用方法

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

参数释义

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

其它模板

如果你对这个模板不太满意可以看一下其它博主分享的模板