第三篇 Hexo 魔改实录 | Twikoo评论邮件回复

0 引言

  1. Twikoo 支持自定义邮件回复格式，其实邮件模板也就锦上添花，主要是为了不单调沉闷，恰到好处的样式能给人带来赏心悦目的效果，很多评论系统都支持自定义邮件模板样式的💖
  2. 放几个模板分享下，也可以复制粘贴修改，注意博客地址啥的要自己修改噢✨

1 紫罗兰永恒花园信笺模板

紫罗兰永恒花园薇尔莉特的模板真的蛮好看的！这部动画本身就极具魅力，它以细腻的笔触讲述了一个关于书信传达情感的动人故事。在动画中，薇尔莉特通过书写一封封信件，帮助人们传递那些难以言说的情感，这种用文字连接人心的方式，温暖而治愈。也正因如此，它所衍生出的模板，无论是博客留言板还是邮件通知模板等，都有着独特的韵味。这些模板仿佛带着动画中书信的温度，能让使用者在留言或发送通知时，传递出更为真挚的情感，赋予文字别样的力量，让交流变得更加富有诗意与温情 。​

  • 注意我们主要是要修改以下四个位置的环境变量：

    alt text

1.1 环境变量的修改

1.1.1 MAIL_SUBJECT

设置邮箱的主题，即任意评论被回复的时候，发送邮件的主题，不填写的话就会使用默认主题。

1.1.2 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
<div style="background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg2.png);padding:20px 0px 20px;margin:0px;background-color:#d6d6d6;width:100%;">
    <style type="text/css">
        @media screen and (max-width:600px){
            .afterimg,.beforeimg{display:none!important}
        }
    </style>
    <div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;">
        <img class="beforeimg" style="margin-top: -30px;margin-bottom: -120px;width:530px;height:317px;z-index:-100;pointer-events:none" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png">
        <img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;overflow:hidden;pointer-events:none">
        <div style="width:100%;background:#f8d1ce;color:#9d2850;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;">
            <p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;padding: 23px 32px;margin:0;">
                您在<a style="text-decoration:none;color: #9d2850;" href="${SITE_URL}">『${SITE_NAME}』</a>上的留言有新回复啦！
            </p>
        </div>
        <div class="formmain" style="background:#fff;width:96%;max-width:800px;margin:auto auto;border-radius:5px;border: 1px solid #564f4f59;overflow:hidden;pointer-events:none">
            <div style="margin:40px auto;width:90%;">
                <p>Hi，${PARENT_NICK}，您曾在文章上发表评论：</p>
                <div style="background: #eee;margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">
                    ${PARENT_COMMENT}
                </div>
                <p><strong>${NICK}</strong> 给您的回复如下：</p>
                <div style="background: #eee;margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">
                    ${COMMENT}
                </div>
                <p>您可以点击<a style="text-decoration:none; color:#cf5c83" href="${POST_URL}" target="_blank"> 查看回复的完整内容 </a>，欢迎再次光临<a style="text-decoration:none; color:#cf5c83" href="https://penry.asia" target="_blank"> ${SITE_NAME} </a>。</p>
                <hr />
                <p style="font-size:14px;color:#b7adad;text-align:center">
                    本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。<br />https://penry.asia
                    <!-- 这里需要更换为自己的博客域名 -->
                </p>
                <img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none">
                <p class="bottomhr" style="font-size:12px;text-align:center;color:#999">
                    自动书记人偶竭诚为您服务！
                </p>
            </div>
        </div>
        <img class="afterimg" style="width:530px;height:317px;margin-top: -155px;z-index:100;" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png">
    </div>
</div>

1.1.3 MAIL_SUBJECT_ADMIN

这里设置了管理员通知的邮件主题，即访客评论时，邮件通知管理员的主题。

1.1.4 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
<div style="background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg2.png);padding:20px 0px 20px;margin:0px;background-color:#d6d6d6;width:100%;">
    <style type="text/css">
        @media screen and (max-width:600px){
            .afterimg,.beforeimg{display:none!important}
        }
    </style>
    <div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;">
        <img class="beforeimg" style="margin-top: -30px;margin-bottom: -120px;width:530px;height:317px;z-index:-100;pointer-events:none" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png">
        <img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;overflow:hidden;pointer-events:none">
        <div style="width:100%;background:#f8d1ce;color:#9d2850;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;">
            <p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;padding: 23px 32px;margin:0;">
                您在<a style="text-decoration:none;color: #9d2850;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>上的文章有了新的评论
            </p>
        </div>
        <div class="formmain" style="background:#fff;width:96%;max-width:800px;margin:auto auto;border-radius:5px;border: 1px solid #564f4f59;overflow:hidden;pointer-events:none">
            <div style="margin:40px auto;width:90%;">
                <p><strong>${NICK}</strong> 回复说：</p>
                <div style="background: #eee;margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">
                    ${COMMENT}
                </div>
                <p style="text-align:center;">
                    您可以点击<a style="text-decoration:none;color:#cf5c83" href="${POST_URL}" target="_blank">查看回复的完整内容</a>
                </p>
                <img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none">
                <p class="bottomhr" style="font-size:12px;text-align:center;color:#999">
                    自动书记人偶竭诚为您服务！
                </p>
            </div>
        </div>
        <img class="afterimg" style="width:530px;height:317px;margin-top: -155px;z-index:100;" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png">
    </div>
</div>

1.2 渲染效果

访客评论模版 博主评论模版 其他访客回复
alt text alt text alt text

1.3 遇到问题及解决

1.3.1 点击“查看回复的完整内容”没有跳转

alt text

  • 解决方案：定位到MAIL_TEMPLATE，定位以下代码：
    1
    <div class="formmain" style="background:#fff;width:96%;max-width:800px;margin:auto auto;border-radius:5px;border: 1px solid #564f4f59;overflow:hidden;pointer-events:none">
  • 删除掉其中的pointer-events:none即可，因为这一句意味着整个回复区（包括按钮）都被禁用了鼠标事件，所以任何点击都无效，包括你写的 标签。

1.3.2 点击跳转后出现“已停止访问该网页”

alt text

1.3.2.1 问题原因

  1. 这是由于文档命名为中文，现在链接格式如下https://penry.asia/article/xxx/#hash值，由于尾部带有 哈希锚点（#…），并且 部分 URL 包含编码后的中文路径，这可能被某些 浏览器、运营商、或安全系统误判为恶意跳转链接。

  2. 可能的原因包括🧩：

原因 说明
✅ 中文路径编码 /%E6%B5%8B%E8%AF%95%E6%96%87%E6%A1%A3/ 可能触发某些防护系统误报
✅ 哈希片段太长 #6f0ccbc8f222410cb91e25a6dd4f1452 被误认为是追踪参数或注入代码
❌ 未备案 如果 penry.asia 未备案或 DNS 记录被污染，也可能触发安全提示
❌ 使用了“非标准”CDN 有的反代 CDN 会篡改 Referer、User-Agent 导致跳转失败

1.3.2.2 解决方法——官方申诉（推荐）

站长就是用该方法解决的，建议用。

  1. 登入该网址，腾讯安全——网址安全中心，输入自己的网址，查看检测结果：

    alt text

  2. 如上图所示，被误列为“危险——高度可疑网站”，我们需要进行“网站拦截申诉”：

    alt text

  3. 点击“进行申诉”，填写相关信息，等待1工作日即可：

    alt text

  4. 我的申诉受理时间较快，大概1个小时就结束了，会发送一个邮件：

    alt text

  5. 我们再次进入网站检测网址安全，发现“暂未发现异常”：

    alt text

  6. 之后网页便可正常跳转了：

    alt text

1.3.2.3 解决方法——申诉

  1. 在微信聊天框输入你的域名，如Penry.asia，点击后，会出现如下页面：

    alt text

  2. 点击“申请恢复”：

    alt text

  3. 选择“我是站长”：

    alt text

  4. 按照图示流程完成部署后，点击“立刻认证”：

    alt text

1.3.2.4 解决方法———使用 slug+短锚点作为链接

假设你文章的路径为 /article/测试文章/，你可以手动设置 slug，比如在创建的博客中添加slug：

1
2
title: 测试文章
slug: test-article

同时定位到_config.yml文件的permalink，修改为如下内容：

1
permalink: article/:slug/

则你跳转的链接会变成：

1
https://penry.asia/article/test-article/#comment-xxx

这会更安全也更不容易被拦截。

2 冰梦模版

这个模版源码主要是参考冰梦——进行一次 Twikoo 评论模板美化

2.1 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
<div
    style="background-image:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg.jpg);background-color:#ded8ca;width:100%">
    <div
        style="background:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/leisi-714x62.png) repeat-y scroll top">
        <div
            style="font-size:14px;color:#555;width:666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,SimSun,sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background:#cc80803d;box-shadow:0 1px 5px rgba(0,0,0,.15);margin:auto">
            <img class="headerimg no-lightbox entered loaded"
                src="https://npm.elemecdn.com/sarakale-assets@v1/bg/bg3.jpg"
                style="width:100%;overflow:hidden;pointer-events:none" data-ll-status="loaded">
            <div
                style="width:100%;background-image:-moz-linear-gradient(0deg,#43c6b8,#ffd1f4);height:66px;background:url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;color:#9d2850">
                <p
                    style="font-size:16px;font-weight:700;text-align:center;word-break:break-all;padding: 23px 32px;margin:0;border-radius: 10px 10px 0 0;">
                    您在<a style="text-decoration:none;color: #9d2850;" href="${SITE_URL}" target="_blank">『${SITE_NAME}』上的留言有新回复啦！</a>
                </p>
            </div>
            <div style="margin:40px auto;width:90%">
                <p>Hi，<strong>${NICK}</strong>，您曾在文章上发表的评论：</p>
                <div
                    style="background:#fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:15px;color:#555">
                    ${COMMENT}</div>
                <p><strong>${PARENT_NICK}&nbsp;</strong>给您的回复如下：</p>
                <div
                    style="background:#fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow:0 2px 5px rgba(0,0,0,.15);margin:20px 0;padding:15px;border-radius:5px;font-size:15px;color:#555">
                    ${PARENT_COMMENT}</div>
                <p>您可以<strong style="color:#cf5c83">点击查看详情</strong>，欢迎再次光临<a style="text-decoration:none;color:#cf5c83"
                        href="${SITE_URL}" target="_blank">${SITE_NAME}</a>。</p>
                <div style="text-align:center">
                    <p style="border-radius:50px;padding:10px;background:#fafafa;display:inline-block"><a
                            style="text-decoration:none;color:#cf5c83" href="${POST_URL}"
                            target="_blank">点击查看详情&gt;&gt;</a></p>
                </div>
                <hr>
                <p style="font-size:14px;color:#b7adad">本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。<br></p>
            </div>
        </div>
    </div>
</div>

2.2 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
<div
    style="background-image: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg.jpg);background-color:#ded8ca;width:100%;">
    <div
        style="background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/leisi-714x62.png) repeat-y scroll top;">
        <div
            style="font-size:14px;color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;border:1px solid #eee;max-width:100%;background: #cc80803d;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);margin:auto">
            <img class="headerimg no-lightbox entered loaded"
                src="https://npm.elemecdn.com/sarakale-assets@v1/bg/bg3.jpg"
                style="width:100%;overflow:hidden;pointer-events:none" data-ll-status="loaded">
            <div
                style="width:100%;color:#9d2850;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;">
                <p
                    style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;padding: 23px 32px;margin:0;border-radius: 10px 10px 0 0;">
                    您在<a style="text-decoration:none;color: #9d2850;" href="${SITE_URL}"
                        target="_blank">『${SITE_NAME}』</a>博客中收到新回复</p>
            </div>
            <div style="margin:40px auto;width:90%;">
                <p><strong>${NICK}&nbsp;</strong>评论了你：</p>
                <div
                    style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">
                    ${COMMENT}</div>
                <div style="text-align: center;">
                    <p style="border-radius: 50px;padding: 10px;background: #fafafa;display: inline-block;"><a
                            style="text-decoration:none; color:#cf5c83" href="${POST_URL}"
                            target="_blank">点击查看详情&gt;&gt;</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

2.3 渲染效果

访客评论模版 header 2
alt text alt text

3 Twikoo 邮件自定义字段

Twikoo文档不提供邮件模板的参数含义，这里附上，方便魔改。

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

4 模版1：紫罗兰永恒花园信笺模板

访客评论模版 博主评论模版 其他访客回复
alt text alt text alt text

4.1 通知邮件模版代码

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
<div style="
  background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg2.png) center/cover no-repeat;
  padding: 20px 0;
  margin: 0;
  background-color: #d6d6d6;
  width: 100%;
">
  <!-- 媒体查询：适配移动端隐藏装饰图 -->
  <style type="text/css">
    @media screen and (max-width: 600px) {
      .afterimg,
      .beforeimg {
        display: none !important;
      }
    }
  </style>

  <div style="
    border-radius: 10px;
    font-size: 14px;
    color: #555;
    width: 530px;
    max-width: 100%;
    margin: 50px auto;
    font-family: 'Century Gothic', 'Trebuchet MS', 'Hiragino Sans GB', 微软雅黑, 'Microsoft Yahei', Tahoma, Helvetica, Arial, 'SimSun', sans-serif;
    background: #ffffff;
  ">
    <!-- 顶部装饰图（移动端隐藏） -->
    <img 
      class="beforeimg" 
      style="
        margin-top: -30px;
        margin-bottom: -120px;
        width: 530px;
        height: 317px;
        z-index: -100;
        pointer-events: none;
      " 
      src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png"
    >

    <!-- 主图 -->
    <img 
      src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" 
      style="
        width: 100%;
        overflow: hidden;
        pointer-events: none;
      "
    >

    <!-- 标题栏 -->
    <div style="
      width: 100%;
      height: 66px;
      border-radius: 10px 10px 0 0;
      background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;
      background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));
    ">
      <p style="
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        word-break: break-all;
        padding: 23px 32px;
        margin: 0;
        color: #9d2850;
      ">
        您在<a style="text-decoration: none; color: #9d2850;" href="${SITE_URL}">『${SITE_NAME}』</a>上的留言有新回复啦！
      </p>
    </div>

    <!-- 内容主体 -->
    <div class="formmain" style="
      background: #fff;
      width: 96%;
      max-width: 800px;
      margin: auto;
      border-radius: 5px;
      border: 1px solid #564f4f59;
      overflow: hidden;
    ">
      <div style="margin: 40px auto; width: 90%;">
        <!-- 父评论内容 -->
        <p>Hi，${PARENT_NICK}，您曾在文章上发表评论：</p>
        <div style="
          background: #eee;
          margin: 20px 0;
          padding: 15px;
          border-radius: 5px;
          font-size: 15px;
          color: #555;
        ">
          ${PARENT_COMMENT}
        </div>

        <!-- 新回复内容 -->
        <p><strong>${NICK}</strong> 给您的回复如下：</p>
        <div style="
          background: #eee;
          margin: 20px 0;
          padding: 15px;
          border-radius: 5px;
          font-size: 15px;
          color: #555;
        ">
          ${COMMENT}
        </div>

        <!-- 查看详情按钮 -->
        <p style="text-align: center;">
          <a 
            href="${POST_URL}" 
            target="_blank" 
            style="
              display: inline-block;
              padding: 10px 25px;
              background: #fff0f4;
              border: 1px solid #ff8bb5;
              border-radius: 50px;
              text-decoration: none;
              color: #cf5c83;
              font-weight: bold;
              font-size: 15px;
            "
          >
            点击查看详情 &gt;&gt;
          </a>
        </p>

        <hr />

        <!-- 底部说明 -->
        <p style="
          font-size: 14px;
          color: #b7adad;
          text-align: center;
        ">
          本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。<br />
          https://penry.asia
        </p>

        <!-- 底部装饰线 -->
        <img 
          src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" 
          style="
            width: 100%;
            margin: 25px auto 5px auto;
            display: block;
            pointer-events: none;
          "
        >

        <!-- 结尾文案 -->
        <p class="bottomhr" style="
          font-size: 12px;
          text-align: center;
          color: #999;
        ">
          自动书记人偶竭诚为您服务！
        </p>
      </div>
    </div>

    <!-- 底部装饰图（移动端隐藏） -->
    <img 
      class="afterimg" 
      style="
        width: 530px;
        height: 317px;
        margin-top: -155px;
        z-index: 100;
      " 
      src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png"
    >
  </div>
</div>

4.2 博主通知邮件模版代码

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
<div style="
  background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg2.png);
  padding: 20px 0;
  margin: 0;
  background-color: #d6d6d6;
  width: 100%;
">
  <!-- 移动端适配：隐藏装饰图 -->
  <style type="text/css">
    @media screen and (max-width: 600px) {
      .afterimg,
      .beforeimg {
        display: none !important;
      }
    }
  </style>

  <!-- 邮件主体容器 -->
  <div style="
    border-radius: 10px;
    font-size: 14px;
    color: #555555;
    width: 530px;
    max-width: 100%;
    margin: 50px auto;
    font-family: 'Century Gothic', 'Trebuchet MS', 'Hiragino Sans GB', 微软雅黑, 'Microsoft Yahei', Tahoma, Helvetica, Arial, 'SimSun', sans-serif;
    background: #ffffff; /* 修正原代码多余的# */
  ">
    <!-- 顶部装饰图（移动端隐藏） -->
    <img 
      class="beforeimg" 
      style="
        margin-top: -30px;
        margin-bottom: -120px;
        width: 530px;
        height: 317px;
        z-index: -100;
        pointer-events: none;
      " 
      src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png"
    >

    <!-- 头部主图 -->
    <img 
      src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" 
      style="
        width: 100%;
        overflow: hidden;
        pointer-events: none;
      "
    >

    <!-- 标题栏 -->
    <div style="
      width: 100%;
      height: 66px;
      background: #f8d1ce;
      color: #9d2850;
      border-radius: 10px 10px 0 0;
      background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));
      background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;
    ">
      <p style="
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        word-break: break-all;
        padding: 23px 32px;
        margin: 0;
      ">
        您在<a 
          style="text-decoration: none; color: #9d2850;" 
          href="${SITE_URL}" 
          target="_blank"
        >${SITE_NAME}</a>上的文章有了新的评论
      </p>
    </div>

    <!-- 内容主体 -->
    <div class="formmain" style="
      background: #fff;
      width: 96%;
      max-width: 800px;
      margin: auto;
      border-radius: 5px;
      border: 1px solid #564f4f59;
      overflow: hidden;
      pointer-events: none;
    ">
      <div style="margin: 40px auto; width: 90%;">
        <!-- 评论者信息 -->
        <p><strong>${NICK}</strong> 回复说：</p>

        <!-- 评论内容 -->
        <div style="
          background: #eee;
          margin: 20px 0;
          padding: 15px;
          border-radius: 5px;
          font-size: 15px;
          color: #555555;
        ">
          ${COMMENT}
        </div>

        <!-- 查看链接 -->
        <p style="text-align: center;">
          您可以点击<a 
            style="text-decoration: none; color: #cf5c83;" 
            href="${POST_URL}" 
            target="_blank"
          >查看回复的完整内容</a>
        </p>

        <!-- 分隔线 -->
        <img 
          src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" 
          style="
            width: 100%;
            margin: 25px auto 5px auto;
            display: block;
            pointer-events: none;
          "
        >

        <!-- 底部说明 -->
        <p class="bottomhr" style="
          font-size: 12px;
          text-align: center;
          color: #999;
        ">
          自动书记人偶竭诚为您服务！
        </p>
      </div>
    </div>

    <!-- 底部装饰图（移动端隐藏） -->
    <img 
      class="afterimg" 
      style="
        width: 530px;
        height: 317px;
        margin-top: -155px;
        z-index: 100;
      " 
      src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png"
    >
  </div>
</div>

5 模版2：紫罗兰永恒花园大背景模板

访客评论模版 博主评论模版

5.1 通知邮件模版代码

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>评论回复通知</title>
</head>
<body style="margin:0; padding:0;">
  <!-- 整体背景 -->
  <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
    background="https://bu.dusays.com/2025/07/01/68639483be5c9.png"
    style="background-repeat:no-repeat; background-size:cover; background-position:center; padding:20px; font-family:'Segoe UI', 'PingFang SC', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif; background-color:#000000;">
    <tr>
      <td align="center" valign="top">

        <!-- 头像独立一行 -->
        <table width="640" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:20px;">
          <tr>
            <td align="center">
              <!-- 自定义头像，换url -->
              <div style="width:150px; height:150px; border-radius:50%; background-image:url('https://penry-1352739541.cos.ap-beijing.myqcloud.com/img/20250812194831578.jpg'); background-size:cover; background-position:center; border:4px solid #ffffff; box-shadow:0 10px 30px rgba(0,0,0,0.15);"></div>
            </td>
          </tr>
        </table>

        <!-- 主内容框 -->
        <table width="640" cellpadding="0" cellspacing="0" border="0"
          style="background-color:#000000CC; border-radius:16px; padding:30px; border:1px solid #FFFFFF33;">
          <tr>
            <td>
              <!-- 标题 -->
              <h1 style="text-align:center; font-size:26px; font-weight:700; color:#FF6991; margin:0 0 15px;">嘿！你在 ${SITE_NAME} 博客中收到一条新回复。</h1>
              <!-- 副标题 -->
              <p style="text-align:center; font-size:16px; color:#cccccc; margin:0 0 35px;">你之前的评论在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</p>
              <!-- 评论区 -->
              <table width="100%" cellpadding="0" cellspacing="0" border="0"
                style="background-color:#000000B3; border-radius:12px; border:1px solid #FFFFFF33; padding:25px 20px;">
                <tr>
                  <td style="padding:15px; background-color:#00000080; border-radius:8px;">
                    <div style="font-weight:bold; color:#FF6991; font-size:18px; margin-bottom:8px;">👤 ${PARENT_NICK}</div>
                    <div style="font-size:16px; color:#f0f0f0; line-height:1.5;">${PARENT_COMMENT}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div style="height:1px; background:linear-gradient(to right, transparent, #FF6991, transparent); margin:10px 0;"></div>
                  </td>
                </tr>
                <tr>
                  <td style="padding:15px; background-color:#00000080; border-radius:8px;">
                    <div style="font-weight:bold; color:#FF6991; font-size:18px; margin-bottom:8px;">💬 ${NICK}</div>
                    <div style="font-size:16px; color:#f0f0f0; line-height:1.5;">${COMMENT}</div>
                  </td>
                </tr>
              </table>
              <!-- 按钮 -->
              <div style="text-align:left; margin-top:35px;">
                <a href="${POST_URL}" style="display:inline-block; background:#FF699138; color:#FF6991; padding:12px 40px; border-radius:50px; text-decoration:none; font-weight:600; border:1px solid #FF6991;">🔗 查看详情</a>
              </div>
            </td>
          </tr>
        </table>

        <!-- 页脚独立一行 -->
        <table width="640" cellpadding="0" cellspacing="0" border="0" style="margin-top:20px;">
          <tr>
            <td style="text-align:center; font-size:14px; color:#888888;">
              此邮件由评论服务自动发出，直接回复无效。<br />
              <a href="https://leoblog.cc" style="color:#FF6991; text-decoration:none; font-weight:600;">前往博客</a>
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>
</body>
</html>

5.2 博主通知邮件模版代码

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Penry,你收到了 ${NICK} 的新回复</title>
  <style>
    /* 简单重置，避免外部影响 */
    body,html { margin:0; padding:0; }
  </style>
</head>
<body style="margin:0; padding:20px; font-family:'Segoe UI','PingFang SC',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif; background-color:#000000;">
  <table
    width="100%"
    cellpadding="0"
    cellspacing="0"
    bgcolor="#000000"
    background="https://bu.dusays.com/2025/07/01/68639483be5c9.png" /*背景图地址 这里修改邮件背景图 */
    style="background: url('https://bu.dusays.com/2025/07/01/68639483be5c9.png') no-repeat center center / cover; background-color: #000000; min-height: 100vh;"
  >
    <tr>
      <td align="center" valign="top" style="padding: 20px;">
        <div style="max-width:640px; margin:0 auto; background:rgba(0,0,0,0.6); border-radius:16px; padding:50px 30px 30px; border:1px solid #2b2b2b; color:#e0e0e0;">
          
          <!-- 头像部分，修改这里的 background-image url 即可更换头像 -->
          <div style="height:120px; position:relative; margin-bottom:80px; display:flex; justify-content:center; align-items:flex-end;">
            <div style="width:150px; height:150px; border-radius:50%; position:absolute; bottom:-75px; 
                        background-image:url('https://penry-1352739541.cos.ap-beijing.myqcloud.com/img/20250812194831578.jpg'); /* 【头像图片地址】 */
                        background-size:cover; background-position:center; border:4px solid #2b2b2b; box-shadow:0 10px 30px rgba(0,0,0,0.15);">
            </div>
          </div>
          
          <!-- 标题，Penry 是博主名字，可以修改这里的固定名称 -->
          <h2 style="text-align:center; font-size:24px; font-weight:700; color:#ff6b9c; margin-bottom:15px;">
            Penry,你收到了 ${NICK} 的新回复
          </h2>
          <p style="text-align:center; font-size:16px; color:#cccccc; margin-bottom:35px;">
            Penry，你在 ${SITE_NAME} 的文章下收到新回复
          </p>

          <!-- 评论内容区域 -->
          <div style="padding:15px; border-radius:8px; background:rgba(219,33,75,0.03); margin-bottom:15px;">
            <div style="font-weight:bold; color:#ff6b9c; font-size:18px; margin-bottom:8px; text-align:left;">💬 评论内容</div>
            <div style="font-size:16px; line-height:1.5; color:#e0e0e0; text-align:left;">
              ${COMMENT}
            </div>
          </div>

          <!-- 邮箱地址区域 -->
          <div style="padding:15px; border-radius:8px; background:rgba(219,33,75,0.03); margin-bottom:15px;">
            <div style="font-weight:bold; color:#ff6b9c; font-size:18px; margin-bottom:8px; text-align:left;">📧 邮箱地址</div>
            <div style="font-size:16px; line-height:1.5; color:#e0e0e0; text-align:left;">
              ${MAIL}
            </div>
          </div>

          <!-- 查看评论按钮 -->
          <a href="${POST_URL}" style="display:inline-block; background:rgba(255,107,156,0.2); color:#ff6b9c; padding:12px 40px; border-radius:50px; text-decoration:none; font-weight:600; border:1px solid #ff6b9c; margin-top:35px; text-align:center;">
            🔗 查看这条评论
          </a>
        </div>

        <!-- 页脚区域 -->
        <div style="text-align:center; font-size:14px; color:#aaaaaa; padding:20px;">
          这是一条来自你的博客的邮件提醒，点击进入：
          <a href="${SITE_URL}" style="color:#ff6b9c; text-decoration:none; font-weight:600;">
            ${SITE_NAME}
          </a>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>