Hexo + Butterfly 键入在线聊天功能

Posted 一只大傻雕

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Hexo + Butterfly 键入在线聊天功能相关的知识,希望对你有一定的参考价值。

前言

推荐阅读

本站效果

通用设置

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

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

# 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

crisp(本站所用)

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

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

# crisp
# https://crisp.chat/en/
crisp:
  enable: true
  website_id: xxxxxxxx

这里我发了一条内容为【你好,收到了吗?】的信息,可在PC和手机上接收消息(这里放手机效果图,毕竟电脑随身携带的可能性比较小),效果如下: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xpvVmniV-1662365376008)(https://bu.dusays.com/2022/06/01/6296d0089ff3e.jpg#pic_center)]

chatra

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

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

# chatra
# https://chatra.io/
chatra:
  enable: true
  id: your Public key

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

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

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

tidio

打开 tidio 并注册账号。

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

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

# tidio
# https://www.tidio.com/
tidio:
  enable: true
  public_key: your Public key

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

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

Gitter

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

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

# gitter
# https://gitter.im/
gitter:
  enable: true
  room: tzy1997-blog/community

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

daovice

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

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

# daovoice
# http://daovoice.io/
daovoice:
  enable: true
  app_id: 4139c9af

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

以上是关于Hexo + Butterfly 键入在线聊天功能的主要内容,如果未能解决你的问题,请参考以下文章

Hexo集成Algolia实现搜索功能

Hexo集成Algolia实现搜索功能

Hexo集成Algolia实现搜索功能

hexo中butterfly主题busuanzi计数手动初始化

Hexo+Butterfly主题美化

Hexo集成Valine实现评论留言