Twikoo评论回复邮件模板修改 📮

邮件回复样式定制说明

今天我突发奇想改一下邮件回复样式。之前 Twikoo 默认样式比较简洁，在网上找到了张洪大佬的修改样式，支持移动端和电脑端显示。有需要的小伙伴可以直接使用、修改和二次创作。

邮件样式展示

移动端预览

其实也是比较偏简洁的那种吧。

兼容移动端和电脑端。

移动端样式

移动端预览

电脑端样式

电脑端预览

邮件模板代码

将以下 HTML 模板代码复制到 Twikoo 后台的 MAIL_TEMPLATE 中使用。
（请将 background-image: url('这里更改为你的网站图标') 部分替换为你实际的网站图标 URL。）

1
<div class="page flex-col">   <div class="box_3 flex-col" style="   display: flex;   position: relative;   width: 100%;   height: 206px;   background: #d8b8ff4d;   top: 0;   left: 0;   justify-content: center; ">     <div class="section_1 flex-col" style="   background-image: url('&quot;这里更改为你的网站图标&quot;');   position: absolute;   border-radius: 50%;   width: 152px;   height: 152px;   display: flex;   top: 130px;   background-size: cover; "></div>   </div>   <div class="box_4 flex-col" style="   margin-top: 92px;   display: flex;   flex-direction: column;   align-items: center; ">     <div class="text-group_5 flex-col justify-between" style="   display: flex;   flex-direction: column;   align-items: center;   margin: 0 20px; ">       <span class="text_1" style="   font-size: 26px;   font-family: PingFang-SC-Bold, PingFang-SC;   font-weight: bold;   color: #000000;   line-height: 37px;   text-align: center; ">嘿！你在 ${SITE_NAME} 博客中收到一条新回复。</span>       <span class="text_2" style="   font-size: 16px;   font-family: PingFang-SC-Bold, PingFang-SC;   font-weight: bold;   color: #00000030;   line-height: 22px;   margin-top: 21px;   text-align: center; ">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</span>     </div>     <div class="box_2 flex-row" style="   margin: 0 20px;   min-height: 128px;   background: #f7f2ff;    border-radius: 12px;   margin-top: 34px;   display: flex;   flex-direction: column;   align-items: flex-start;   padding: 32px 16px;   width: calc(100% - 40px); ">        <div class="text-wrapper_4 flex-col justify-between" style="   display: flex;   flex-direction: column;   margin-left: 30px;   margin-bottom: 16px; ">         <span class="text_3" style="   height: 22px;   font-size: 16px;   font-family: PingFang-SC-Bold, PingFang-SC;   font-weight: bold;   color: #7b2acb;    line-height: 22px; ">${PARENT_NICK}</span>         <span class="text_4" style="   margin-top: 6px;   margin-right: 22px;   font-size: 16px;   font-family: PingFangSC-Regular, PingFang SC;   font-weight: 400;   color: #000000;   line-height: 22px; ">${PARENT_COMMENT}</span>       </div>       <hr style="     display: flex;     position: relative;     border: 1px dashed #d8b8ff4d;  box-sizing: content-box;     height: 0px;     overflow: visible;     width: 100%; ">       <div class="text-wrapper_4 flex-col justify-between" style="   display: flex;   flex-direction: column;   margin-left: 30px; ">         <span class="text_3" style="   height: 22px;   font-size: 16px;   font-family: PingFang-SC-Bold, PingFang-SC;   font-weight: bold;   color: #7b2acb;    line-height: 22px; ">${NICK}</span>         <span class="text_4" style="   margin-top: 6px;   margin-right: 22px;   font-size: 16px;   font-family: PingFangSC-Regular, PingFang SC;   font-weight: 400;   color: #000000;   line-height: 22px; ">${COMMENT}</span>       </div>        <a class="text-wrapper_2 flex-col" style="   min-width: 106px;   height: 38px;   background: #d8b8ff66;   border-radius: 32px;   display: flex;   align-items: center;   justify-content: center;   text-decoration: none;   margin: auto;   margin-top: 32px; " href="${POST_URL}">         <span class="text_5" style="   color: #7b2acb;  ">查看详情</span>       </a>     </div>     <div class="text-group_6 flex-col justify-between" style="   display: flex;   flex-direction: column;   align-items: center;   margin-top: 34px; ">       <span class="text_6" style="   height: 17px;   font-size: 12px;   font-family: PingFangSC-Regular, PingFang SC;   font-weight: 400;   color: #00000045;   line-height: 17px; ">此邮件由评论服务自动发出，直接回复无效。</span>       <a class="text_7" style="   height: 17px;   font-size: 12px;   font-family: PingFangSC-Regular, PingFang SC;   font-weight: 400;   color: #7b2acb;   line-height: 17px;   margin-top: 6px;   text-decoration: none; " href="${SITE_URL}">前往博客</a>     </div>   </div> </div>

安装方式

在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
<div class="page flex-col">
  <div
    class="box_3 flex-col"
    style="display: flex; position: relative; width: 100%; height: 206px; background: #d8b8ff4d; /* Light purple background */ top: 0; left: 0; justify-content: center;">
    <div
      class="section_1 flex-col"
      style="background-image: url('&quot;这里更改为你的网站图标&quot;'); position: absolute; border-radius: 50%; width: 152px; height: 152px; display: flex; top: 130px; background-size: cover;">
    </div>
  </div>
  <div
    class="box_4 flex-col"
    style="margin-top: 92px; display: flex; flex-direction: column; align-items: center;">
    <div
      class="text-group_5 flex-col justify-between"
      style="display: flex; flex-direction: column; align-items: center; margin: 0 20px;">
      <span
        class="text_1"
        style="font-size: 26px; font-family: PingFang-SC-Bold, PingFang-SC; font-weight: bold; color: #000000; line-height: 37px; text-align: center;">
        嘿！你在 ${SITE_NAME} 博客中收到一条新回复。
      </span>
      <span
        class="text_2"
        style="font-size: 16px; font-family: PingFang-SC-Bold, PingFang-SC; font-weight: bold; color: #00000030; line-height: 22px; margin-top: 21px; text-align: center;">
        你之前的评论在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复
      </span>
    </div>
    <div
      class="box_2 flex-row"
      style="margin: 0 20px; min-height: 128px; background: #f7f2ff; border-radius: 12px; margin-top: 34px; display: flex; flex-direction: column; align-items: flex-start; padding: 32px 16px; width: calc(100% - 40px);">
      <div
        class="text-wrapper_4 flex-col justify-between"
        style="display: flex; flex-direction: column; margin-left: 30px; margin-bottom: 16px;">
        <span
          class="text_3"
          style="height: 22px; font-size: 16px; font-family: PingFang-SC-Bold, PingFang-SC; font-weight: bold; color: #7b2acb; line-height: 22px;">
          ${PARENT_NICK}
        </span>
        <span
          class="text_4"
          style="margin-top: 6px; margin-right: 22px; font-size: 16px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #000000; line-height: 22px;">
          ${PARENT_COMMENT}
        </span>
      </div>
      <hr
        style="display: flex; position: relative; border: 1px dashed #d8b8ff4d; box-sizing: content-box; height: 0px; overflow: visible; width: 100%;">
      <div
        class="text-wrapper_4 flex-col justify-between"
        style="display: flex; flex-direction: column; margin-left: 30px;">
        <span
          class="text_3"
          style="height: 22px; font-size: 16px; font-family: PingFang-SC-Bold, PingFang-SC; font-weight: bold; color: #7b2acb; line-height: 22px;">
          ${NICK}
        </span>
        <span
          class="text_4"
          style="margin-top: 6px; margin-right: 22px; font-size: 16px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #000000; line-height: 22px;">
          ${COMMENT}
        </span>
      </div>
      <a
        class="text-wrapper_2 flex-col"
        style="min-width: 106px; height: 38px; background: #d8b8ff66; border-radius: 32px; display: flex; align-items: center; justify-content: center; text-decoration: none; margin: auto; margin-top: 32px;"
        href="${POST_URL}">
        <span
          class="text_5"
          style="color: #7b2acb;">
          查看详情
        </span>
      </a>
    </div>
    <div
      class="text-group_6 flex-col justify-between"
      style="display: flex; flex-direction: column; align-items: center; margin-top: 34px;">
      <span
        class="text_6"
        style="height: 17px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #00000045; line-height: 17px;">
        此邮件由评论服务自动发出，直接回复无效。
      </span>
      <a
        class="text_7"
        style="height: 17px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #7b2acb; /* Dark purple link */ line-height: 17px; margin-top: 6px; text-decoration: none;"
        href="${SITE_URL}">
        前往博客
      </a>
    </div>
  </div>
</div>

Twikoo 邮件自定义字段

Twikoo 文档中没有提供邮件模板参数的详细说明，这里附上各参数的含义，方便魔改

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