Hexo搭建静态博客（七）——客服与推送

Hexo

发布日期: 2020-06-27

作者: Small-Rose / 张小菜

更新日期: 2020-06-27

文章字数: 1.5k

阅读时长: 6 分

阅读次数:

一、客服聊天窗口

这个是我在Sky03的博客发现的，最初感觉问问题方面，我实际使用之后，主要感觉还是可以监控是否有人访问网站。还有就是如果有问题也可以提问，只是消息略有延迟。

1、在官网注册账号

官网地址：点我去crisp官网注册

2、注册完成后设置

登录刚才注册的账户——设置——网站设置——添加网站。

添加完成之后就多了一行网站信息。点网站整合，就有不同的站的整合方式。

比如：html方式

就是复制JS代码片段到你的到head标签里。

<script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="xxxxxxx-097e-402f-bb6b-xxxxxxx";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>

3、其他的设置也
登录刚才注册的账户——设置——网站设置。
网站信息行——设置，自己根据需要设置即可，比如显示位置，颜色，自己的头像等。

整个使用非常简单的。

二、网页推送插件

这个是我在过客励む的博客发现的，感觉还是很不错的。 Web Push Notification ,浏览器通知推送

1、安装插件

插件的GitHub仓库: hexo-web-push-notification

执行命令安装：

npm i hexo-web-push-notification --save

2、修改根目录的_config.yml配置文件

webPushNotification:
  webpushrKey: "your webpushr rest api key"
  webpushrAuthToken: "your webpushr authorize token"
  trackingCode: "AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88"

其中webpushrKey,webpushrAuthToken和trackingCode的值在官网注册得到。

3、注册webpushr

注册官网：点我去webpushr注册也

特别说明：
注册账号和登录需要进行人机身份验证，这个需要使用过客励む的插件，永久破解版的。

插件地址： [大佬的插件]（https://72k.us/file/19365016-441665146）

如果上面链接失效就来百度云链接

提取码：bp7s

然后放在浏览器的扩展中，在强制刷新网站(Ctrl + F5),应该就可以看到了。如果看不懂就先点注册或登录，就可以自己出来了。

4、安装

就是按顺序，填写信息，上传图片，三步走。

安装成功后，进入主界面。

点击Integration下的 REST API密钥就可以看到webpushrKey和webpushrAuthToken的值了。

点击Setting下的 Tracking code

有个 Step 2: Add Tracking Code地下也是JS代码片段

<!-- start webpushr tracking code --> 
<script>(function(w,d, s, id) {if(typeof(w.webpushr)!=='undefined') return;w.webpushr=w.webpushr||function(){(w.webpushr.q=w.webpushr.q||[]).push(arguments)};var js, fjs = d.getElementsByTagName(s)[0];js = d.createElement(s); js.id = id;js.src = "https://cdn.webpushr.com/app.min.js";
fjs.parentNode.appendChild(js);}(window,document, 'script', 'webpushr-jssdk'));
webpushr('setup',{'key':'xxxx_BJKMKcoDBNWov5xxxhl3p0eFxxxxgogE5bQRheUA7eytp5rcZXYHdodyiVfbOxxxxPfv4' });</script>

最后key的值就是 trackingCode。

5、设置推送相关

主要设置在Setting下的前面三个，分别是：
（A）Opt-In Prompts —-选择加入提示
（B）Subscription Bell —-订阅铃
（C）Welcome Push ——欢迎推送

因为我已经操作完成就不截图了，只做了一个记录。使用谷歌有谷歌翻译，应该没有看不懂的。
如果不想自己摸索，可以参考过客励む写的细节操作的截图文《Hexo博客订阅文章通知功能》。

最后感谢大佬让我见识了新技术。

6、遇到的问题

使用matery主题：

如果以上配置都好了，那么可以重新部署了，一定要部署两次，是否推送新文章，是比较public/newPost.json文件的变化。如果走到这一步，你推送OK了，那么恭喜你没有问题。

如果你部署之后发现不推送？

首先检查浏览器通知是否禁用，如果禁用了，是无法通知的。

其次检查你的public/newPost.json文件，看看键值是否齐全。如果你的summary是空字符串，那么你遇到了跟我一样的问题。

解决：修改 node_modules/hexo-web-push-notification/index.js文件中第22行'summary': util.stripHTML(newPost.excerpt),这里取值取的是excerpt，改成summary即可。

var JSONFeed = {
        'title': newPost.title,
        'id': newPost.path,
        'date_published': newPost.date.format('L'),
        'summary': util.stripHTML(newPost.excerpt),
        'url': newPost.permalink,
        'tags': newPost.tags.data.map(function (v) { return v.name }),
        'categories': newPost.categories.data.map(function (v) { return v.name })
    }

如果你担心改错了，也可以在你的文章头部添加属性excerpt，值和summary一样即可：

title: Hexo搭建静态博客（七）——客服与推送
tags: Hexo
categories: Hexo
summary: hexo博客的客服插件和推送插件相关。
excerpt: hexo博客的客服插件和推送插件相关。
keywords: 'hexo,hexo主题'
author: Small-Rose / 张小菜苔
date: 2020-06-27 00:00:00

使用其他主题：

使用其他主题，newPost.json文件里的summary获取的则是—和之间的文本内容。基本上适用于大部分主题。

二、其他常用插件

npm install   hexo-generator-feed  --save   #订阅

npm install   hexo-generator-search --save  #搜索

npm install hexo-abbrlink --save  #文章永久链接

npm install   hexo-reading-time --save # 阅读时间

npm install hexo-generator-index-pin-top –save  #文章置顶插件 

npm uninstall hexo-generator-index –save  #文章置顶插件 

npm i –save hexo-wordcount     #文章字数+阅读时长统计   

npm install hexo-baidu-url-submit –save   #百度链接主动推送   

npm install hexo-deployer-ftpsync –save   #hexo上传至FTP服务器  

npm install hexo-deployer-cos –save   #hexo上传至腾讯云COS  

npm install hexo-deployer-aliyun –save  #hexo上传至阿里云   

npm install –save hexo-admin  #hexo管理插件   

hexo-blog-encrypt(请看文档)   #hexo文章加密码 

npm install leancloud-storage –save   #Valine评论   

Valine评论邮件通知  Valine评论提醒 

npm install hexo-deployer-git –save hexo安装git（允许使用git命令）