说明

  2020.12.28:新增Qmsg酱推送,参考文档:基于Leancloud或javascript推送Valine评论到QQ

  2020.12.17:修改了javascript代码,现在稳得一P。

  提示:这个方法也许会遇到别有用心的无聊之人刷爆你的QQ

前言

  在博客创建以来,我一直在探索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

评论