说明:距离该文章发布已经过很长时间,无法保证内容的时效性。

更新

  出于安全考虑,不建议把以下所有内容暴露在前端。

  2020.12.17:修改了javascript代码,现在推送成功率非常高。

前言

  在博客创建以来,我一直在探索hexo的各种新功能。启用了Valine评论插件以来,多次尝试实时推送评论的方案。

  ①Server酱:借助leancloud配置变量,成功推送评论到微信,但是卡片不会显示详情,需要多点击一次,觉得不方便,故弃用;

  ②Qmsg酱:参考了多个文档多次配置,但是评论测试时,日志显示:

QQ提醒失败: Request failed with status code 404

  我认为可能是Qmsg酱推送出了故障,于是弃用。事实上是接口地址改了,最新配置方法:点这里

  ③CoolPush:这是我无意中发现的一个推送服务,由大佬@xuthus开发,能够实时推送评论相关内容到QQ。

操作

  ①我是采用的hexo+volantis主题,volantis内置了许多第三方评论插件,我启用的是valine。其它主题可能略有不同。

  ②打开https://cp.xuthus.cc/ ,登陆,可以选择github、gitee和OSC登陆;

登陆

  ②绑定QQ号,选择机器人并添加机器人为好友;

绑定QQ和选择机器人

  ③点击上方说明,下拉到“配合valine进行推送”,复制框内代码粘贴到script.ejs底部,将skey替换成你自己的,路径:

你的博客\themes\volantis\layout\_third-party\comments\valine\

  ④需要注意的是,目前(2020.11.30 13:00),大佬提供的js脚本需要稍稍修改,否则会提示:

Uncaught TypeError: Cannot set property 'onclick' of undefined

  通过搜索,学习csdn上的一篇文章,发现需要用window.οnlοad=function(){ }将代码包裹。

更新

  2020.12.17更新:

  请教了valine群里的大佬,大佬说:“原因就是 Valine 的评论框是动态加载的,你的事件定义的时候 Button 还没有出来呢,所以找不到这个元素,所以需要使用事件委托。”

  故新版完整代码如下:

<script>
var pushLink ="https://push.xuthus.cc/send/替换你的key";
var siteName = "W4J1e's blog";
var valineButton=document.getElementsByClassName("vsubmit vbtn")[0];
var title = siteName + "上又有新评论啦~!\n";

function send_valine() {
//获取元素信息
var pagename = document.title;
var pageurl = document.URL;
var pushtime = new Date();
var vnick = document.getElementsByClassName("vnick vinput")[0].value;
var vmail = document.getElementsByClassName("vmail vinput")[0].value;
var vlink = document.getElementsByClassName("vlink vinput")[0].value;
var veditor = document.getElementsByClassName("veditor vinput")[0].value;
content =
title +
"昵称:" + vnick +
"\n邮箱:" + vmail +
"\n网站地址:" + vlink +
"\n文章标题:" + pagename +
"\n评论内容:" + veditor +
"\n文章链接:" + pageurl +
"\n评论时间" + pushtime.toLocaleString() + "\n";
var httpRequest = new XMLHttpRequest(); //第一步:创建需要的对象
httpRequest.open("POST", pushLink, true); //第二步:打开连接
httpRequest.setRequestHeader(
"Content-type",
"application/json"
); //设置请求头 注:post方式必须设置请求头(在建立连接后设置请求头)
httpRequest.send(content); //发送请求
}

document.body.addEventListener('click', function(e) {
if(e.target.className.indexOf('vsubmit') === -1) {
return;
}
send_valine();
})
</script>

⑤hexo clean & hexo d ,enjoy it!

cpush

后记

  很多事情其实都需要自己不断去试错,从错误中找到问题的根源,然后解决问题。各个领域的前辈们都开发了许多东西,我们都是站在巨人的肩膀上去造轮子,这是一件很幸福的事。当然这件事也让我有一种想要好好学学javascript的念头,毕竟学无止境嘛。

  2020.11.30 By W4J1e