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、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>    回复说:</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> |
效果如图: