【Hexo】Twikoo评论回复邮件模板
【Hexo】Twikoo评论回复邮件模板
時光最近看到洪哥的邮件模板，感觉很不错，又在原来的基础上进行了一些改造
首先给头像添加了圆角样式，然后我不太喜欢粉色主题，改了下背景色为蓝色，另外发现博主模板无法显示${PARENT_NICK}和 ${PARENT_COMMENT}，所以直接去掉了。
效果预览
PC端效果
移动端效果
模板示例
自行调整头像图片路径：https://blog.shiguangdev.cn/img/avatar.png 这部分内容
游客模板
1 | <div class="page flex-col"><div class="box_3 flex-col" style="display:flex;position:relative;width:100%;height:206px;background:#007AFF2e;top:0;left:0;justify-content:center;"><div class="section_1 flex-col" style="background-image:url("https://blog.shiguangdev.cn/img/avatar.png");position:absolute;width:152px;height:152px;display:flex;top:130px;background-size:cover;border-radius:50%;"></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:#F7F7F7;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:#007AFF;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 #007AFF2e;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;"><hr><span class="text_3" style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:bold;color:#007AFF;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:#007AFF38;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:#007AFF;">查看详情</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:#007AFF;line-height:17px;margin-top:6px;text-decoration:none;" href="${SITE_URL}">前往博客</a></div></div></div> |
如果想要二次创作，可以在原始代码的基础上进行调整
1 | <div class="page flex-col"> |
博主模板
1 | <div class="page flex-col"><div class="box_3 flex-col" style="display:flex;position:relative;width:100%;height:206px;background:#007AFF2e;top:0;left:0;justify-content:center;"><div class="section_1 flex-col" style="background-image:url("https://blog.shiguangdev.cn/img/avatar.png");position:absolute;width:152px;height:152px;display:flex;top:130px;background-size:cover;border-radius:50%;"></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:#F7F7F7;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;"><hr><span class="text_3" style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:bold;color:#007AFF;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:#007AFF38;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:#007AFF;">查看详情</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:#007AFF;line-height:17px;margin-top:6px;text-decoration:none;" href="${SITE_URL}">前往博客</a></div></div></div> |
原始代码：
1 | <div class="page flex-col"> |
使用
使用也非常简单，只需到Twikoo后台设置 -> 配置管理 -> 邮件通知，修改如下配置即可
喜欢这篇文章的人也看了
评论
匿名评论隐私政策
✅ 你无需删除空行，直接评论以获取最佳展示效果
