hexo推荐的程序员主题（HexoButterfly键入在线聊天功能）
hexo推荐的程序员主题（HexoButterfly键入在线聊天功能）修改主题配置文件`_config.butterfly.yml`，将`crisp`设置成`true`。并将你的网站ID填入`website_id`。打开[crisp官网](https://crisp.chat/zh/)并注册账号。找到 【设置】->【网站设置】->【设置说明】，找到你的网站ID。# 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`，
> 原文链接： 基于 Hexo 键入在线聊天功能 | 唐志远の博客
推荐阅读- 基于 Hexo 从零开始搭建个人博客（一） | 唐志远の博客
- 基于 Hexo 从零开始搭建个人博客（二） | 唐志远の博客
- 基于 Hexo 从零开始搭建个人博客（三） | 唐志远の博客
- 基于 Hexo 从零开始搭建个人博客（四） | 唐志远の博客
- 基于 Hexo 从零开始搭建个人博客（五） | 唐志远の博客
- 基于 Hexo 从零开始搭建个人博客（六） | 唐志远の博客
- 基于 Hexo 键入搜索功能 | 唐志远の博客
- 基于 Hexo 键入分享功能 | 唐志远の博客
- Hexo Butterfly 自定义右键菜单 | 唐志远の博客
- 关于 Hexo Butterfly 的常见问题 | 唐志远の博客
本站用的是crisp，效果仅做参考
通用设置关于这些在线聊天的工具，主题提供了一个按钮可以打开/关闭聊天窗口，这个聊天按钮将会出现在右下角里。你只需要把`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`。
如果使用工具自带的聊天按钮，按钮位置可能会遮挡右下角图标，请配置`rightside-bottom`调正右下角图标位置。
crisp(本站所用)打开[crisp官网](https://crisp.chat/zh/)并注册账号。找到 【设置】->【网站设置】->【设置说明】，找到你的网站ID。
修改主题配置文件`_config.butterfly.yml`，将`crisp`设置成`true`。并将你的网站ID填入`website_id`。
# crisp
# https://crisp.chat/en/
crisp:
enable: true
website_id: xxxxxxxx
这里我发了一条内容为【你好，收到了吗？】的信息，可在PC和手机上接收消息（这里放手机效果图，毕竟电脑随身携带的可能性比较小），效果如下：
打开 [chatra官网](https://chatra.com/) 并注册账号，这里填入邮箱就好，将会收到邮件让你去初始化密码。登进去之后，找到【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](https://www.tidio.com/panel/register) 并注册账号。
登入账号后，你可以在【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官网](https://gitter.im/) 并注册账号，可以直接用 Github 账号登录。然后创建一个`community`或者`room`。
我这里创建的是`community`。
复制名称，将名称填入主题配置文件中。
修改主题配置文件`_config.butterfly.yml`，将gitter设置成`true`。并在`room`处填入复制过来的名称。
# gitter
# https://gitter.im/
gitter:
enable: true
room: tzy1997-blog/community
在站点中呈现的效果如下：
打开 [daovoice](http://daovoice.io/) 并注册账号。你可以在【应用设置】->【安装到网站】中找到【app id】。
修改主题配置文件`_config.butterfly.yml`，将d`aovoice`设置成`true`。并将`app_id`填入对应的位置即可。
# daovoice
# http://daovoice.io/
daovoice:
enable: true
app_id: 4139c9af
这里我们发了一条内容为【你好~，我是Hello world!】的消息，在站点中呈现的效果如下：
我们顺便看下站点发来的消息以及发给站点的消息，效果如下：
