Twikoo邮件通知模板分享
发表于更新于
字数总计:1.8k阅读时长:9分钟 郑州市
前因
昨天摸鱼的时候想改邮件模板,结果怎么改都不满意,最后向六神索取了一份他的模板进行了一些修改。
后果
模板整体风格为拟态化风格,删除了原模板的图片封面,评论的图片资源不会显示在邮件中(介意的自行更改一下),对评论的引用和代码块进行了一些美化处理,另外将所有内联的样式改写成类,具体请看图
模板效果
模板代码
底部的头像是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">点击去原文查看>></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">点击去原文查看>></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 地址 |
其它模板
如果你对这个模板不太满意可以看一下其它博主分享的模板