hexo 环境变量_手把手教你在Hexo中添加即时通讯工具Chatwoot

news/2024/7/24 9:08:00 标签: hexo 环境变量

54b0f0e43c91b0d05705bb6030a28e79.png

题图:SkagitValley WA, UnitedStates

前言

最近在逛Github Trending时发现一个不错的开源即时聊天软件ChatWoot,通过ChatWoot可以实现网站访客与网站主人的即时通讯。于是自己动手在Hexo中添加Chatwoot。

部署Chatwoot

  1. Chatwoot可以通过多种方式在生产环境部署,这里我选择了最方便的Heroku云端部署。这里有部署教程,不过因为没有中文版,而且有些细节不是很明确,所以我建议跟着这篇博客进行部署。
  2. 点此一键部署

Heroku是一个支持多种编程语言的云平台即服务。在2010年被Salesforce.com收购。Heroku作为最元祖的云平台之一,从2007年6月起开发,当时它仅支持Ruby,但后来增加了对Java、Node.js、Scala、Clojure、Python以及(未记录在正式文件上)PHP和Perl的支持。

  1. 自定义App name和FRONTEND_URL(这两个最好一致,比如Appname叫abc,那么FRONTEND_URL为https://abc.herokuapp.com,图中我设置的不一致结果踩了一些坑,后来把FRONTEND_URL改成和Appname一致解决了。其他选项选择默认),确认,即可开始在云端部署APP。

584868a46ddc3ac4fbc936348a2705ca.png

  1. 当出现Build finished说明部署完成。2064f62ea9491b9e272fa368cd1279c5.png
  2. 此时回到Heroku仪表盘,点击刚部署好的APP,再点击Configure Dynos配置计算单元,把web和worker都打开。

1c31a53c9d3138abf285201f21b33c7f.png

27dbdd483f9f964617e5a97a74315ca1.png

3d736fab1ae36741cbbe93ff346d3f3a.png

  1. 配置好Dyno后,还需要配置一些基础的环境变量。点击Settings-->Reveal Config Vars即可配置。有关环境变量的配置不再赘述,如果只使用基本聊天功能使用默认即可,如果需要使用发送email等功能还需要配置一些环境变量,环境变量可以点击这里进行查阅,有兴趣的童鞋们可以试一试。
60b4db59e7cf0255237127287fef5dc7.png

ChatWoot后台配置

  1. 此时打开你刚刚配置的yourapp.herokuapp.com,你会惊奇的发现你的Chatwoot已经可以访问了,点击Create new account创建账号
dec103d5d45218e77df6bcd488d6dd89.png
  1. 账号创建完成,登录后是这样的。什么都没有,你需要点击inbox旁边的+进行channel创建
5e58d35196040bbe471b892a64de50a6.png
  1. chatwoot支持多种渠道的即时通讯。这里我需要在Hexo博客中引入chatwoot,所以选择第一个Website
aba5fcd79ef11e7fc5d134652c8fee85.png
  1. 根据提示设置网站名称,网站域名,聊天气泡颜色,欢迎语,欢迎标签,是否允许自动问候等。
945551a33d43f3432b922de77363039e.png
  1. Agents选择自己

83114de53aefc8f35b164db9f15d7def.png

  1. 完成!这段代码是用来引入Chatwoot的sdk的
b66b4b84c375c2fe7e09bb08c4185071.png

在Hexo的NexT主题中添加Chatwoot

  1. 打开hexo\themes\next\layout,找到_layout.swig,在body标签体中添加刚刚生成的js
  2. 重新部署你的hexo(hexo clean-->hexo g-->hexo d这个不用多说了吧)
  3. 打开你的博客,你会惊喜的发现右下角多了一个按钮!好了,现在任何博客访客都可以通过它与你进行即时通讯了~

00e4de8a79e533c38648d0bb5baf02c6.png

98d705f4f3386f2a844222ed66021d4a.png

458ab007f42993ffda2cbbd0533e82c0.png

  1. Chatwoot后台会接收到从网站前端发来的消息,这样,你就可以通过后台方便地处理并回复留言啦
175859a57066425c11461943591b7ab7.png

由于微信不支持外链,您可以点击文末左下角“阅读原文”以获得更佳阅读体验。


http://www.niftyadmin.cn/n/1208671.html

相关文章

WordPress编辑器支持Word文档导入

当前功能基于PHP,其它语言流程大抵相同。 大概流程: 1. 将docx文件上传到服务器中 2. 使用PHPoffice/PHPword实现将word转换为HTML 3. 将HTML代码返回并赋值到编辑器中 1 编辑器配置修改 1.1 新增上传word json配置 在ueditor\php\config.json中新…

FastAdmin下拉选择带搜索功能

在需要操作页面的js文件中添加如下代码 var table $("#table"); // 下边的代码中的 最长的那行就是定义下拉的数据源的,一定要写在之后table.on(post-common-search.bs.table, function (event, table) {let form $("form", table.$commons…

WordPress编辑器支持Word文档上传

当前功能基于PHP,其它语言流程大致相同 1.新增上传word json配置 在ueditor\php\config.json中新增如下配置: /* 上传word配置 */ "wordActionName": "wordupload", /* 执行上传视频的action名称 */ "wordFieldName": &q…

ArcGIS10.2.1精简版、ArcGIS_Desktop10_Tutorial、破解文件等下载地址

原版ArcGIS for Desktop的ISO文件一般都在4.5G以上,一般人用不上里面很多工具,下载回来又浪费时间,现推出ArcGIS10.2.1精简版(里面只包含主程序、Data Interoperability和License工具)。 下载地址: http://pan.baidu.com/s/1jGp23…

xcode引入sdk_ios-如何将第三方框架导入Xcode Playground?

ios-如何将第三方框架导入Xcode Playground?如何将第三部分框架导入Xcode Playground?Swift Playground显然具有框架导入机制,因为我们可以导入swift、SpriteKit,而在OSX Playground中则是XCPlayground(奇怪的是,iOS缺…

FastAdmin时间区间筛选设置默认值

1.首页在js页面定义today方法 //此方法返回日期 today: function (AddDayCount) {const dd new Date();dd.setDate(dd.getDate()AddDayCount);//获取AddDayCount天后的日期let y dd.getFullYear();let m dd.getMonth()1;//获取当前月份的日期let d dd.getDate();//判断月i…

WordPress编辑器支持Word文档粘贴

ueditor粘贴不能粘贴word中的图片是一个很头疼的问题,在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴,因为这个需求头疼了半个月,因为前端方面因为安全的原因是不允许访问本地文件的。 首先说一下,ueditor粘贴…

Ubuntu14.04安装分布式存储sheepdog+zookeeper

Ubuntu14.04安装分布式存储sheepdogzookeeper牧羊犬(Sheepdog) 是由NTT的3名日本研究员开发的开源项目,提供分布式存储管理功能。牧羊犬提供高可用性的KVM提供块级存储卷类似亚马逊电子交易系统(弹性块存储虚拟机)的客户机。目前国内阿里等一…