原文連結：基于 Hexo 鍵入線上聊天功能
前言
本站基于Hexo
搭建，用的 🦋 hexo-theme-butterfly 主題 v3.7.1，請注意最新的🦋 hexo-theme-butterfly 版本已經更新到 v4.2.2 。<br>
如果你是 v3.7.1 之外的版本，可能有些地方會有出入，請留意。
注意：我的部落格根目錄路徑為 【G:/hexo-blog/blog-demo】，下文所說的根目錄都是此路徑，将用代替。如果不清楚根目錄路徑，請回到教程 基于 Hexo 從零開始搭建個人部落格（二），檢視你執行[BlogRoot]
hexo init xxx
這條指令時所選擇的路徑，例如我選擇的路徑是【G:/hexo-blog】，我的部落格根目錄即為【G:/hexo-blog/xxx】。<br>
修改站點配置檔案
_config.yml
，路徑為【BlogRoot/_config.yml】。<br>
修改主題配置檔案
，路徑為【BlogRoot/_config.butterfly.yml】。_config.butterfly.yml
推薦閱讀
- 基于 Hexo 從零開始搭建個人部落格（一）
- 基于 Hexo 從零開始搭建個人部落格（二）
- 基于 Hexo 從零開始搭建個人部落格（三）
- 基于 Hexo 從零開始搭建個人部落格（四）
- 基于 Hexo 從零開始搭建個人部落格（五）
- 基于 Hexo 從零開始搭建個人部落格（六）
- 基于 Hexo 鍵入搜尋功能
- 基于 Hexo 鍵入分享功能
- Hexo + Butterfly 自定義右鍵菜單
- 關于 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
。
如果使用工具自帶的聊天按鈕，按鈕位置可能會遮擋右下角圖示，請配置 rightside-bottom
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】。
# daovoice
# http://daovoice.io/
daovoice:
enable: true
app_id: 4139c9af