第三篇 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地址