本邮件模板适配 twikoo 需更改云函数 index.js 源码 twikoo 1.4.13 版本以上的用户无需更改源码啦 (感谢墨宝帮小弟改进了一下代码 #^.^#,部分邮箱可能显示不正常 (如: QQ 邮箱网页版得点击上方显示图片,谷歌邮箱网页版部分样式加载不了) ,本人亲测网易邮箱大师客户端和移动端都能正常显示,各位酌情使用。

效果预览




原文地址

咱博客评论邮箱通知也支持表情显示了

开始使用



>更改邮件模板

直接把代码分别粘贴到上图对应位置即可,未压缩的源码在文末下载提供参考

<head><style>*{margin:0;padding:0}img{-webkit-user-drag:none;border-radius:3px}ul,ol{margin-left:1rem!important}.tk-owo-emotion{width:35px;height:auto;max-width:300px;max-height:300px;vertical-align:middle}.ax_post_box-comment-text-inner p,.ax_post_box-comment-text-inner img{max-width:506px!important}</style><div style="border-radius:5px;font-size:13px;width:680px;margin:30px auto 0;max-width:100%"><div style="box-shadow:0 0 30px 0 rgb(219 216 214);border-radius:5px;width:630px;margin:auto;max-width:100%;margin-bottom:-30px"><div style="width:200px;height:40px;margin-top:-20px;margin-left:0;text-align:center;line-height:40px;text-decoration:none;color:#fff;background-color:#94a9b9;border-radius:5px 0">Dear: ${PARENT_NICK}</div><div style="line-height:180%;padding:0 15px 12px;margin:30px auto;color:#555;font-size:12px;margin-bottom:0"><h2 style="border-bottom:1px solid #ddd;font-size:14px;font-weight:400;padding:13px 0 10px 8px"><span style=color:#de6561;font-weight:700>&gt;</span> 您在 <a style=text-decoration:none;color:#12addb href=${SITE_URL} target=_blank>${SITE_NAME}</a> 上的评论有了新的回复呐~</h2><div style="padding:0 12px 0 12px;margin-top:18px"><div class=Messages_box><p style=display:flex;justify-content:flex-end>您曾评论:</p><div class="ax_post_box-comments-single Messages-author" style=display:flex;justify-content:flex-end;margin-bottom:5px;margin-top:7px><div class=ax_post_box-comment-avatar style=width:auto;flex:none;order:2><img src=${PARENT_IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=position:relative;margin-right:10px><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid;border-left-color:#f4f4f4;border-right:0;border-right-color:transparent;right:-7px;left:auto;top:12px;position:absolute"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#f1f3fa;padding:10px;border-radius:9px;margin-bottom:3px>${PARENT_COMMENT}</div></div></div><p><strong>${NICK}</strong> 回复您:</p><div class="ax_post_box-comments-single Messages-user" style=display:flex;margin-bottom:5px;margin-top:7px><div class=ax_post_box-comment-avatar style=width:auto;flex:none><img src=${IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=position:relative;margin-left:10px><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#f4f4f4;left:-7px;right:auto;top:12px;position:absolute"></span><div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#f1f3fa;padding:10px;border-radius:9px;margin-bottom:3px>${COMMENT}</div></div></div></div></div></div><div style=text-align:center;margin-right:66px><a style="text-decoration:none;color:#fff;background-color:#94a9b9;padding:5px 20px;border-radius:4px;position:absolute;margin-top:10px" href=${POST_URL} target=_blank>查看</a></div></div><div style="width:100%;height:345px;background-repeat:no-repeat;border-radius:5px 5px 0 0;background-image:url(https://fastly.jsdelivr.net/gh/Gahotx/cdn@master/photo/mailbg.png);background-size:cover;background-position:50% 50%"></div><div style=color:#8c8c8c;font-size:10px;width:100%;text-align:center;margin-top:20px><p>本邮件为系统自动发送,请勿直接回复~</p></div><div style=color:#8c8c8c;font-size:10px;width:100%;text-align:center;margin-top:5px><p>Copyright © 2021 Gahotx</p></div></div><body>
<head><style>*{margin:0;padding:0}img{-webkit-user-drag:none;border-radius:3px}ul,ol{margin-left:1rem!important}.tk-owo-emotion{width:35px;height:auto;max-width:300px;max-height:300px;vertical-align:middle}.ax_post_box-comment-text-inner p,.ax_post_box-comment-text-inner img{max-width:506px!important}</style><body><div style="border-radius:5px;font-size:13px;width:680px;margin:0 auto;max-width:100%"><div style="box-shadow:0 0 30px 0 rgb(219 216 214);border-radius:5px;width:630px;margin:auto;max-width:100%;margin-bottom:-30px"><div style="line-height:180%;padding:0 15px 12px;margin:10px auto;color:#555;font-size:12px;margin-bottom:0"><h2 style="border-bottom:1px solid #ddd;font-size:14px;font-weight:400;padding:13px 0 10px 8px"><span style=color:#de6561;font-weight:700>&gt; </span><a style=text-decoration:none;color:#12addb href=${SITE_URL} target=_blank>${SITE_NAME}</a> 有新的评论耶~</h2><div style="padding:0 12px 0 12px;margin-top:18px"><div class=Messages_box><p><strong>${NICK}</strong> 评论:</p><div class="ax_post_box-comments-single Messages-user" style=display:flex;margin-bottom:5px;margin-top:10px><div class=ax_post_box-comment-avatar style=width:auto;flex:none><img src=${IMG} style=width:40px;height:40px;border-radius:5px></div><div class=ax_post_box-comment-text style=position:relative;margin-left:10px><span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#f4f4f4;left:-7px;right:auto;top:12px;position:absolute"></span><div class=ax_post_box-comment-text-inner style=background-color:#f1f3fa;padding:10px;border-radius:9px;margin-bottom:3px;max-width:506px>${COMMENT}</div></div></div></div><p style="background-color:#f5f5f5;border:0 solid #ddd;padding:10px 15px;margin:18px 0">IP:${IP}<br>邮箱:<a href=mailto:${MAIL}>${MAIL}</a></p></div></div><div style=text-align:center;margin-right:66px><a style="text-decoration:none;color:#fff;background-color:#94a9b9;padding:5px 20px;border-radius:4px;position:absolute;margin-top:10px" href=${POST_URL} target=_blank>查看</a></div></div><div style="width:100%;height:345px;background-repeat:no-repeat;border-radius:5px 5px 0 0;background-image:url(https://fastly.jsdelivr.net/gh/Gahotx/cdn@master/photo/mailbg.png);background-size:cover;background-position:50% 50%"></div><div style=color:#8c8c8c;font-size:10px;width:100%;text-align:center;margin-top:20px><p>Copyright © 2021 Gahotx</p></div></div>

源码改动

twikoo 1.4.13 版本以上的童鞋可以忽略以下内容,新版云函数已经合并咱的 pr 啦~

回复通知模板中的${IMG}${PARENT_IMG}需要修改云函数添加

// 回复通知
async function noticeReply (currentComment) {
  if (!currentComment.pid) return
  if (!transporter) if (!await initMailer()) return
  let parentComment = await db
    .collection('comment')
    .where({ _id: currentComment.pid })
    .get()
  parentComment = parentComment.data[0]
  // 回复给博主,因为会发博主通知邮件,所以不再重复通知
  if (config.BLOGGER_EMAIL === parentComment.mail) return
  // 回复自己的评论,不邮件通知
  if (currentComment.mail === parentComment.mail) return
  const PARENT_NICK = parentComment.nick
+ const IMG = getAvatar(currentComment)
+ const PARENT_IMG = getAvatar(parentComment)
  const SITE_NAME = config.SITE_NAME
  const NICK = currentComment.nick
  const COMMENT = currentComment.comment
  const PARENT_COMMENT = parentComment.comment
  const POST_URL = appendHashToUrl(currentComment.href || config.SITE_URL + currentComment.url, currentComment.id)
  const SITE_URL = config.SITE_URL
  const emailSubject = config.MAIL_SUBJECT || `${PARENT_NICK},您在『${SITE_NAME}』上的评论收到了回复`
  let emailContent
  if (config.MAIL_TEMPLATE) {
    emailContent = config.MAIL_TEMPLATE
+     .replace(/\${IMG}/g, IMG)
+     .replace(/\${PARENT_IMG}/g, PARENT_IMG)
      .replace(/\${SITE_URL}/g, SITE_URL)
      .replace(/\${SITE_NAME}/g, SITE_NAME)
      .replace(/\${PARENT_NICK}/g, PARENT_NICK)
      .replace(/\${PARENT_COMMENT}/g, PARENT_COMMENT)
      .replace(/\${NICK}/g, NICK)
      .replace(/\${COMMENT}/g, COMMENT)
      .replace(/\${POST_URL}/g, POST_URL)
博主通知模板中的${IP}${MAIL}${IMG}需要修改云函数添加

// 博主通知
async function noticeMaster (comment) {
  if (!transporter) if (!await initMailer()) return
  if (config.BLOGGER_EMAIL === comment.mail) return
  const IM_PUSH_CONFIGS = [
    'SC_SENDKEY',
    'QM_SENDKEY',
    'PUSH_PLUS_TOKEN',
    'WECOM_API_URL'
  ]
  // 判断是否存在即时消息推送配置
  const hasIMPushConfig = IM_PUSH_CONFIGS.some(item => !!config[item])
  // 存在即时消息推送配置,则默认不发送邮件给博主
  if (hasIMPushConfig && config.SC_MAIL_NOTIFY !== 'true') return
  const SITE_NAME = config.SITE_NAME
  const NICK = comment.nick
+ const IMG = getAvatar(comment)
+ const IP = comment.ip
+ const MAIL = comment.mail
  const COMMENT = comment.comment
  const SITE_URL = config.SITE_URL
  const POST_URL = appendHashToUrl(comment.href || SITE_URL + comment.url, comment.id)
  const emailSubject = config.MAIL_SUBJECT_ADMIN || `${SITE_NAME}上有新评论了`
  let emailContent
  if (config.MAIL_TEMPLATE_ADMIN) {
    emailContent = config.MAIL_TEMPLATE_ADMIN
      .replace(/\${SITE_URL}/g, SITE_URL)
      .replace(/\${SITE_NAME}/g, SITE_NAME)
      .replace(/\${NICK}/g, NICK)
+     .replace(/\${IMG}/g, IMG)
+     .replace(/\${IP}/g, IP)
+     .replace(/\${MAIL}/g, MAIL)
      .replace(/\${COMMENT}/g, COMMENT)
      .replace(/\${POST_URL}/g, POST_URL)

>更改 index.js 文件

找到云函数 twikoo

20211204194858

然后更改好的 index.js 粘贴进去,点保存并安装依赖,稍等片刻即可

我更改时的云函数版本为 1.4.11,您也可以自行给云函数添加我上面源码改动说明的几行代码

20211204194941

>碎碎念

从一开始以为直接复制原模板代码就好 (bushi),到查 twikoo 和原模板对应的参数,再到 twikoo 没有相关的参数,得自己改源码加参数,然后头像那还卡了好一会(twikoo 你为什么只把 QQ 邮箱的头像传到数据库 T﹏T 原来是我学艺不精,其实只需用 getAvatar() 函数即可获取到所有头像,无需把非 QQ 头像传进数据库而导致另一个新的问题,再次感谢墨宝 #^.^#,我一个小白啥也不会,边学边问搞了一天,生命在于折腾~

文件源码

所有文件都做了备份,放心呐~