前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于 Hexo 键入在线聊天功能

基于 Hexo 键入在线聊天功能

作者头像
唐志远
发布2022-10-27 18:36:10
1.1K0
发布2022-10-27 18:36:10
举报
文章被收录于专栏:FE32 CodeFE32 Code

前言

本站基于Hexo搭建,用的 🦋 hexo-theme-butterfly 主题 v3.7.1,请注意最新的🦋 hexo-theme-butterfly 版本已经更新到 v4.3.0 。 如果你是 v3.7.1 之外的版本,可能有些地方会有出入,请留意。

注意:我的博客根目录路径为 【G:/hexo-blog/blog-demo】,下文所说的根目录都是此路径,将用[BlogRoot]代替。如果不清楚根目录路径,请回到教程 基于 Hexo 从零开始搭建个人博客(二),查看你执行hexo init xxx这条命令时所选择的路径,例如我选择的路径是【G:/hexo-blog】,我的博客根目录即为【G:/hexo-blog/xxx】。 修改站点配置文件_config.yml,路径为【BlogRoot/_config.yml】。 修改主题配置文件_config.butterfly.yml,路径为【BlogRoot/_config.butterfly.yml】。

本站效果

本站用的是crisp,效果仅做参考
本站用的是crisp,效果仅做参考

本站用的是crisp,效果仅做参考

从3.0开始,Butterfly主题内置了多种在线聊天工具。你可以选择开启一种,方便你与访客的交流。

  • 通用设置
  • crisp(本站所用)
  • chatra
  • tidio
  • Gitter
  • daovoice

关于这些在线聊天的工具,主题提供了一个按钮可以打开/关闭聊天窗口,这个聊天按钮将会出现在右下角里。你只需要把chat_btn打开就行。

修改主题配置文件_config.butterfly.yml,将chat_btn设置成true

代码语言:javascript
复制
# Chat Button [recommend]
# It will create a button in the bottom right corner of website, and hide the origin button
chat_btn: true

为了不影响访客的体验,主题提供一个chat_hide_show配置,设为true后,使用工具提供的按钮时,只有向上滚动才会显示聊天按钮,向下滚动时会隐藏按钮。

修改主题配置文件_config.butterfly.yml,将chat_hide_show设置成true

代码语言:javascript
复制
# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
chat_hide_show: true

如果使用工具自带的聊天按钮,按钮位置可能会遮挡右下角图标,请配置rightside-bottom调正右下角图标位置。

打开crisp官网并注册账号。找到 【设置】->【网站设置】->【设置说明】,找到你的网站ID。

修改主题配置文件_config.butterfly.yml,将crisp设置成true。并将你的网站ID填入website_id

代码语言:javascript
复制
# crisp
# https://crisp.chat/en/
crisp:
  enable: true
  website_id: xxxxxxxx

这里我发了一条内容为【你好,收到了吗?】的信息,可在PC和手机上接收消息(这里放手机效果图,毕竟电脑随身携带的可能性比较小),效果如下:

打开 chatra官网 并注册账号,这里填入邮箱就好,将会收到邮件让你去初始化密码。登进去之后,找到【Settings】->【Preferences】-> 【Public key】。

修改主题配置文件_config.butterfly.yml,将chatra设置成true。并在id位置填入你的Public key

代码语言:javascript
复制
# chatra
# https://chatra.io/
chatra:
  enable: true
  id: your Public key

chatra的样式你可以Chat Widget自行配置。

在站点中呈现的效果如下:

在网页和APP中都能收到信息,效果如下:

打开 tidio 并注册账号。

登入账号后,你可以在【Settings】->【Developer】中找到【Public key】。

修改主题配置文件_config.butterfly.yml,将tidio设置成true。并在public_key位置填入你从tidio中获得的Public key

代码语言:javascript
复制
# tidio
# https://www.tidio.com/
tidio:
  enable: true
  public_key: your Public key

tidio的样式你可以找到【Settings】->【Appearance】里面自行配置。

在站点中呈现的效果如下:

打开 Gitter官网 并注册账号,可以直接用 Github 账号登录。然后创建一个community或者room

我这里创建的是community

复制名称,将名称填入主题配置文件中。

修改主题配置文件_config.butterfly.yml,将gitter设置成true。并在room处填入复制过来的名称。

代码语言:javascript
复制
# gitter
# https://gitter.im/
gitter:
  enable: true
  room: tzy1997-blog/community

在站点中呈现的效果如下:

打开 daovoice 并注册账号。你可以在【应用设置】->【安装到网站】中找到【app id】。

修改主题配置文件_config.butterfly.yml,将daovoice设置成true。并将app_id填入对应的位置即可。

代码语言:javascript
复制
# daovoice
# http://daovoice.io/
daovoice:
  enable: true
  app_id: 4139c9af

这里我们发了一条内容为【你好~,我是Hello world!】的消息,在站点中呈现的效果如下:

我们顺便看下站点发来的消息以及发给站点的消息,效果如下:

控制台收到站点发来的消息
控制台收到站点发来的消息

控制台收到站点发来的消息

站点收到控制台发来的消息
站点收到控制台发来的消息

站点收到控制台发来的消息

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-07-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 本站效果
相关产品与服务
访问管理
访问管理(Cloud Access Management,CAM)可以帮助您安全、便捷地管理对腾讯云服务和资源的访问。您可以使用CAM创建子用户、用户组和角色,并通过策略控制其访问范围。CAM支持用户和角色SSO能力,您可以根据具体管理场景针对性设置企业内用户和腾讯云的互通能力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档