# 评论推送功能
Valine
的评论功能很强大,但是当有人进行评论时,并不会自动推送消息。如果想要在收到新的评论时获得推送,需要基于 Leancloud
来进行配置。 Shoka
主题的作者推荐使用 Valine-Admin
来实现评论管理及消息推送功能,项目地址可以点击此链接。
Valine-Admin
作者提供的配置教程有些地方存在一些不清楚的地方,下面记录一下我在配置过程中遇到的问题及解决方案,可以配合 Valine-Admin
的配置教程阅读。
# Leancloud 配置
关于 Leancloud
,这里推荐使用国际版,因为国内版目前无法免费创建二级域名,如果需要自己创建域名的话还需要进行备案,比较麻烦。
一些基本配置可以参考 Valine-Admin
教程,这里说一些比较容易出问题的地方。
# fork 代码
首先需要 fork Valine-Admin
作者的 GitHub
仓库,即上文链接中的仓库,只有完成这一步之后才能部署成功。在此步完成之后,参考教程内容配置环境变量。
# SITE_URL
关于 SITE_URL
, Valine-Admin
作者说的是不需要最后的 /
符号,但是 Shoka
主题的作者却说需要。这里我在网址的最后添加了 /
符号,目前没有问题。如果碰到报错的话,可以两种方式都进行尝试。
# 二级域名配置
在配置环境变量的下方,有名为 共享域名
的配置,这里可以自己定义,使用一个容易记忆的名称即可。在填写 ADMIN_URL
时,需要注意在域名前添加 stg
前缀。例如,我自己定义的域名名称为 linn-blog
,此时完整的域名包含了固定的后缀 .avosapps.us
,即完整的域名是 https://linn-blog.avosapps.us
。而 ADMIN_URL
中需要填写 https://stg-linn-blog.avosapps.us
。
# 邮箱配置
邮箱我原本预期使用 Outlook
邮箱,但是在认证上出现了一些问题,后来改用了 QQ
邮箱。需要注意的是 SMTP_PASS
这一栏不是直接填写 QQ
邮箱的密码,而是需要填写在 QQ
邮箱的设置中获取的 TOKEN
。
进入 QQ
邮箱后,点击 设置-账户
,找到 POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务
一栏,选择开启 IMAP/SMTP服务
,经过验证后,会获得一个 TOKEN
,将其内容复制到 SMTP_PASS
中填写即可。
# 登录后台
后台网址和配置的二级域名有关。例如,我需要登录 https://linn-blog.avosapps.us/sign-up
,这里不需要添加 stg-
的前缀。登录时输入的账号密码是对应邮箱的账号和密码。对于 QQ
邮箱而言,是登录 QQ
邮箱时输入的主密码,不是设置的独立密码。
# 定时唤醒失败问题
下列代码会遇到跨域问题,现在采用别的方法解决。参见上文方法。
由于 Leancloud
免费版部署的服务会自动休眠,因此需要定时唤醒。在之前这个功能还能正常使用,但是目前在定时启动时会碰到下面的报错:
因流控原因,通过定时任务唤醒体验版实例失败,建议升级至标准版云引擎实例避免休眠
关于这个问题,我搜索到了几篇博文 [1] [2]。这里我采用的是第二个链接中提供的方法 —— 当有人访问博客时,访问后台以唤醒部署的服务,详情可以参考第二个链接的内容。
对于 Shoka
主题而言,作者使用了自己修改过的 MiniValine
,其初始化代码在主题下的 pjax.js
文件中,我在其初始化之后的位置添加了代码,代码参考了 [2:1] 的内容:
new MiniValine(options); // 该行是原来的初始化代码 | |
// Wakeup Leancloud | |
console.log("Try to wakeup Leancloud"); | |
var engine = document.cookie.replace(/(?:(?:^|.*;\s*)engine\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0'; | |
if(engine != '1') { | |
fetch('https://quan.suning.com/getSysTime.do') | |
.then(function(response) { | |
return response.json(); | |
}) | |
.then(function(date) { | |
// var hours = new Date(date.sysTime2).getHours(); | |
// if(hours>7 && hours<23){ | |
const url = 'https://linn-blog.avosapps.us'; // 注意不要添加 stg 前缀 | |
fetch(url) | |
.then(function(response) { | |
const html = response.status; | |
var result = url + " Status:" + html; | |
console.log(result); | |
}); | |
var exp = new Date(date.sysTime2); | |
exp.setTime(exp.getTime() + 10*60*1000); // 10 分钟内刷新不再重新请求 | |
document.cookie = "engine=1;path=/;expires="+ exp.toGMTString(); | |
// } | |
}) | |
} else { | |
console.log("Cookie not expired. No need to wakeup."); | |
} |
原作者的代码是在某个时间段中有人访问时才进行唤醒,我这里修改成了任意时间段都可以唤醒。另外 cookie
的失效间隔被我修改成了 10 分钟。
# 更新
本文的方法后来在访问 https://quan.suning.com/getSysTime.do
出现了新的跨域问题,我重新修改了代码。
const wakeUpLeanCloud = function () { | |
console.log("Try to wakeup Leancloud"); | |
const url = 'https://linn-blog.avosapps.us'; // 注意不要添加 stg 前缀 | |
fetch(url) | |
.then(function(response) { | |
const html = response.status; | |
var result = url + " Status:" + html; | |
console.log(result); | |
}); | |
} | |
window.addEventListener('DOMContentLoaded', wakeUpLeanCloud); | |
window.addEventListener('hashchange', wakeUpLeanCloud); |
这次也就懒得检查 cookie
了,每当有人访问时直接唤醒。
这篇博客 提供了一种新的方法,使用 UptimeRobot 定时访问 LeanCloud
的后台。我设置了一小时的访问,这下应该能够覆盖绝大多数评论的情况了。
# 跨域问题解决
唤醒的脚本代码在运行时会遇到跨域访问的问题,这里我参考了 [2:2] 这篇博文的做法,修改了 Valine-Admin
中的代码,使其能够支持跨域功能。具体可以作者提供的 GitHub
仓库链接,查看 设置允许跨域
的这一个 commit
。在设置之后,注意使用 npm install cors --save
命令,更新 package.json
和 package-lock.json
,否则 Leancloud
部署时可能会报错。
# 结语
通过上述的配置及后续的测试,目前已经基本能够满足我当前的需求。不得不吐槽前端和前后端交互的代码及调试是真的非常非常麻烦,这个功能也是花费了好几天琢磨才做出了最终的效果。后续应该没有其他需要再折腾的功能了,可以把精力投入到其他内容上去。关于 Shoka
主题的配置基本到此告一段落。