自定义Twikoo邮件通知模板

@guole  |   2021-07-06T16:56:53+08:00  |  8 分钟阅读   |  更新于 2021-07-06T16:56:53+08:00

借鉴某大佬的邮件通知样式,自定义一个twikoo的邮件通知模板。

一时兴起,发现小康的邮件通知模板挺好看的,于是借鉴之。白嫖就是快乐啊。

使用 Twikoo 管理面板配置(推荐)

在Twikoo管理面板中插入 登录自己的Twikoo管理面板,找到配置管理——邮件通知——MAIL_TEMPLATE,在此处粘贴压缩后的html邮件模板。

    ⊙ 在Twikoo管理面板中插入

压缩后的代码

直接复制覆盖,接着保存立即生效 注意其中我的博客地址、logo什么的,修改为你自己的。

1
<div><div id="isForwardContent"><div><div id="content"><div style="         background: white;         width: 95%;         max-width: 800px;         margin: auto auto;         border-radius: 5px;         border: #49b1f5 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://cdn.guole.fun/img/bg.min.jpg"style="width: 100%; z-index: 666"/></header><div style="padding: 5px 20px"><div class="dear"style="             position: relative;             color: white;             float: left;             z-index: 999;             background: #49b1f5;             padding: 5px 30px;             margin: -25px auto 0;             box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);           ">Dear ${PARENT_NICK}</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: #49b1f5"target="_blank">&nbsp;${SITE_NAME}&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;">${PARENT_COMMENT}</div><p><strong>${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; ">${COMMENT}</div><p>欢迎再次光临<a style="text-decoration:none; color:#12addb"href="${SITE_URL}"target="_blank">${SITE_NAME}</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:#3eae5f;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: 5rem; display:block;color:#b3b3b1;text-decoration:none;"><img src="https://cdn.guole.fun/logo/guole.fun.png"style="width:1.8rem; margin:0 auto"/>&nbsp;<hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;"/>©&nbsp;2021&nbsp;<a href="https://guole.fun/"style="text-align:center; color: #0da1e6a6"target="_blank">guole.fun</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>

效果演示

    ⊙ 自定义邮件模板效果

略有不足 可能受QQ客户端的邮箱样式影响,移动端字体有点大。自己加了移动端样式,但是没生效。

未压缩代码供参考

 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
<div>
  <div id="isForwardContent">
    <div>
      <div id="content">
        <div style="         background: white;         width: 95%;         max-width: 800px;         margin: auto auto;         border-radius: 5px;         border: #49b1f5 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://cdn.guole.fun/img/bg.min.jpg" style="width: 100%; z-index: 666" /></header>
          <div style="padding: 5px 20px">
            <div class="dear" style="             position: relative;             color: white;             float: left;             z-index: 999;             background: #49b1f5;             padding: 5px 30px;             margin: -25px auto 0;             box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);           ">Dear ${PARENT_NICK}</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: #49b1f5" target="_blank">&nbsp;${SITE_NAME}&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;">${PARENT_COMMENT}</div>
            <p>
              <strong>${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; ">${COMMENT}</div>
            <p>欢迎再次光临
              <a style="text-decoration:none; color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</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:#3eae5f;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: 5rem; display:block;color:#b3b3b1;text-decoration:none;">
              <img src="https://cdn.guole.fun/logo/guole.fun.png" style="width:1.8rem; margin:0 auto" />&nbsp;
              <hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;" />©&nbsp;2021&nbsp;
              <a href="https://guole.fun/" style="text-align:center; color: #0da1e6a6" target="_blank">guole.fun</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>

搞定!

修改云函数源代码(不推荐)

找到腾讯云开发云函数/twikoo/函数代码/node_modules/twikoo-func/index.js,Ctrl+F 搜索定位到“同学,您曾发表评论”,修改其中的html邮件模板内容。可直接拿我的:

修改源代码

直接复制覆盖,接着保存云函数即可生效 注意其中我的博客地址、logo什么的,修改为你自己的。

 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
<div>
  <div id="isForwardContent">
    <div>
      <div id="content">
        <div style="         background: white;         width: 95%;         max-width: 800px;         margin: auto auto;         border-radius: 5px;         border: #49b1f5 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://cdn.guole.fun/img/bg.jpg" style="width: 100%; z-index: 666" /></header>
          <div style="padding: 5px 20px">
            <div class="dear" style="             position: relative;             color: white;             float: left;             z-index: 999;             background: #49b1f5;             padding: 5px 30px;             margin: -25px auto 0;             box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);           ">Dear ${PARENT_NICK}</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: #49b1f5" target="_blank">&nbsp;${SITE_NAME}&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;">${PARENT_COMMENT}</div>
            <p>
              <strong>${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; ">${COMMENT}</div>
            <p>欢迎再次光临
              <a style="text-decoration:none; color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</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:#3eae5f;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: 5rem; display:block;color:#b3b3b1;text-decoration:none;">
              <img src="https://cdn.guole.fun/logo/guole.fun.png" style="width:1.8rem; margin:0 auto" />&nbsp;
              <hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;" />©&nbsp;2021&nbsp;
              <a href="https://guole.fun/" style="text-align:center; color: #0da1e6a6" target="_blank">guole.fun</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>

原通知模板备份

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
  <h2 style="border-bottom:1px solid #dddddd;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">您在
    <a style="text-decoration:none;color: #12ADDB;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>上的评论有了新的回复</h2>${PARENT_NICK} 同学,您曾发表评论:
  <div style="padding:0 12px 0 12px;margin-top:18px">
    <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">${PARENT_COMMENT}</div>
    <p>
      <strong>${NICK}</strong>回复说:</p>
    <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">${COMMENT}</div>
    <p>您可以点击
      <a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a>, 欢迎再次光临
      <a style="text-decoration:none; color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>。
      <br></p></div>
</div>

收工!

参考内容

小康博客

评论区

avatar
关于我

Guo Le 的博客 ❤️❤️

你来到了一片知识的荒芜区 🏜🌵🏜🌵

心血来潮有此页面

  • 感谢 g1eny0ung 前人栽树
  • 一个喜欢瞎折腾的互联网打工人
  • 当前行业:人工智能 🤖🤖

免责声明 📢📢

  • 本站页面的部分内容,包括但不限于图片、音频、视频,来源于网络。由于无法深究其原作者,因此未曾署名。若您是部分内容原作者,且不希望本站使用,可联系本人删除。
其他

持续分享一些好玩的东西,或是美好的短文,又或者一段优美的文案。

欢迎与我交流,右边邮箱可联系到我。

斗胆放上乞讨码。😂😂
最好附加一下信息或者留言,十分感谢 💖💖

捐赠列表 💖💖

再次感谢以下朋友:

WeChat

  1. 2021.05.13 收到来自 浅浅 的 ¥8.88
  2. 2021.05.13 收到来自 宁哥 的 ¥8.88
  3. 2021.06.21 收到来自 浅浅 的 ¥1.88
  4. 2021.07.12 收到来自 。旧念 的 ¥8.88

留言板