嘘~ 正在从服务器偷取页面 . . .

Hexo搭建静态博客(七)——客服与推送


一、客服聊天窗口

这个是我在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,webpushrAuthTokentrackingCode的值在官网注册得到。

3、注册webpushr

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

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

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

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

提取码:bp7s

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

4、安装

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

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

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

点击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获取的则是—和<!-- more -->之间的文本内容。基本上适用于大部分主题。

二、其他常用插件

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命令)

相关文章

Hexo搭建静态博客(一)——基础搭建
Hexo搭建静态博客(二)——创建页面
Hexo搭建静态博客(三)——主题更换
Hexo搭建静态博客(四)——插件安装
Hexo搭建静态博客(五)——踩坑问题
Hexo搭建静态博客(六)——项目部署
Hexo搭建静态博客(七)——客服与推送
Hexo添加Live2D二次元老婆
Hexo博客Valine-Admin踩坑记录
Hexo博客Matery主题valine升级与优化
Hexo博客Matery主题新手常见问题



版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Small-Rose / 张小菜 !
评论
  目录