Hexo博客之valine评论实现邮箱提醒的方法

valine是我用过最好的博客评论系统了,非常喜欢这种不用注册帐号就可以直接使用的方式并且还支持Markdown语法,简直是完美。现在我要说的就是如何让评论后,博主可以第一时间用邮箱收到游客评论,而游客评论时,只要写上自己的邮箱地址,也会在第一时间收到博主的回复邮件。让valine更加井上添花。
作者项目地址:https://github.com/DesertsP/Valine-Admin


具体实现步骤:

1.在Leancloud云引擎设置界面,填写代码库并保存:https://github.com/DesertsP/Valine-Admin.git

2.接着在设置里添加环境变量。

变量 示例 说明
SITE_NAME 思想就是武器 [必填]博客名称
SITE_URL https://zealot.top [必填]首页地址
SMTP_SERVICE QQ [新版支持]邮件服务提供商,支持 QQ、163、126、Gmail 以及 更多
SMTP_USER xxxxxx@qq.com [必填]SMTP登录用户
SMTP_PASS ccxxxxxxxxch [必填]SMTP登录密码(QQ邮箱需要获取独立密码
SENDER_NAME 思想就是武器 [必填]发件人
SENDER_EMAIL xxxxxx@qq.com [必填]发件邮箱
ADMIN_URL https://xxx.leanapp.cn/ [建议]Web主机二级域名,用于自动唤醒
BLOGGER_EMAIL xxxxx@gmail.com [可选]博主通知收件地址,默认使用SENDER_EMAIL
AKISMET_KEY xxxxxxxxxxxx [可选]Akismet Key 用于垃圾评论检测,设为MANUAL_REVIEW开启人工审核,留空不使用反垃圾

3.切换到部署标签页,分支使用master,点击部署。

第一次部署时间比较长,耐心等待他完成。

4.等待部署完成后,如果有人在你的博客上留言,你的邮箱将会收到一封邮件。

定时任务设置

因为免费版的 LeanCloud 容器,是有强制性休眠策略的,不能 24 小时运行:

  • 每天必须休眠 6 个小时
  • 30 分钟内没有外部请求,则休眠。
  • 休眠后如果有新的外部请求实例则马上启动(但激活时发送邮件会失败)

所以我们需要设置一个定时任务让容器一直保持在运行状态。

实现方法:
进入云引擎-定时任务中,创建定时器,创建两个定时任务。
1、新建定时器,选择self-wake云函数,Cron表达式为0 0/30 7-23 * * ?,表示每天早6点到晚23点每隔30分钟访问云引擎。

2、新建定时器,选择self-wake云函数,Cron表达式为0 0 8 * * ?,表示每天早8点检查过去24小时内漏发的通知邮件并补发:

设置完后运行定时器,这样就完美的解决了休眠策略的问题!

邮箱回执格式的设置。

邮件通知模板在云引擎环境变量中设定,可自定义通知邮件标题及内容模板。
还是在设置里的环境变量里添加下表的4个变量。

环境变量 示例 说明
MAIL_SUBJECT 叮咚,${PARENT_NICK},您在 『${SITE_NAME}』 上的评论收到了回复: [可选]@通知邮件主题(标题)模板
MAIL_TEMPLATE 见下文 [可选]@通知邮件内容模板
MAIL_SUBJECT_ADMIN 叮咚,『${SITE_NAME}』上有新评论了 [可选]博主邮件通知主题模板
MAIL_TEMPLATE_ADMIN 见下文 [可选]博主邮件通知内容模板

邮件通知包含两种,分别是被@通知和博主通知,这两种模板都可以完全自定义。默认使用经典的蓝色风格模板(样式来源未知)。

默认被@通知邮件内容模板如下:

1
<div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;"><h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">您在<a style="text-decoration:none;color: #12ADDB;" href="${SITE_URL}" target="_blank">            ${SITE_NAME}</a>上的评论有了新的回复</h2> ${PARENT_NICK} 同学,您曾发表评论:<div style="padding:0 12px 0 12px;margin-top:18px"><div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">            ${PARENT_COMMENT}</div><p><strong>${NICK}</strong>回复说:</p><div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;"> ${COMMENT}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a>,欢迎再次光临<a style="text-decoration:none; color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a><br></p></div></div>

我根据自己的喜好修改成下面这句。

1
<div style="width:600px; border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;"><h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">您在<a style="text-decoration:none;color: #12ADDB;" href="${SITE_URL}" target="_blank">            ${SITE_NAME}</a>  上的评论有了新的回复</h2> ${PARENT_NICK} 同学,您曾发表评论:<div style="padding:0 12px 0 12px;margin-top:18px"><div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">            ${PARENT_COMMENT}</div><p><strong>${NICK}</strong>回复说:</p><div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;"> ${COMMENT}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a>,欢迎再次光临<a style="text-decoration:none; color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a><br></p></div></div>

效果如图:

默认博主通知邮件内容模板如下:

1
<div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;"><h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">您在<a style="text-decoration:none;color: #12ADDB;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>上的文章有了新的评论</h2><p><strong>${NICK}</strong>回复说:</p><div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;"> ${COMMENT}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a><br></p></div></div>

我根据自己的喜好修改成下面这句。

1
<div style="width:600px; border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;"><h2 style="border-bottom:1px solid #DDD;font-size:14px;color: #12ADDB;font-weight:normal;padding:13px 0 10px 8px;"><a style="text-decoration:none;color: #12ADDB;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>』 上有一条新评论,内容如下:</h2><p><strong>“${NICK}</strong>&#32;&#32;&#32;&#32;回复说:</p><div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;"> ${COMMENT}</div><p><a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a><br></p></div></div>

效果如图:


-------------本文结束 感谢您的阅读-------------
-------------如果觉得这篇文章不错,可以请作者喝杯咖啡!-------------