天天看點

Hexo + Butterfly 鍵入線上聊天功能

原文連結:基于 Hexo 鍵入線上聊天功能

前言

本站基于

Hexo

搭建,用的 🦋 hexo-theme-butterfly 主題 v3.7.1,請注意最新的🦋 hexo-theme-butterfly 版本已經更新到 v4.2.2 。<br>

如果你是 v3.7.1 之外的版本,可能有些地方會有出入,請留意。

注意:我的部落格根目錄路徑為 【G:/hexo-blog/blog-demo】,下文所說的根目錄都是此路徑,将用

[BlogRoot]

代替。如果不清楚根目錄路徑,請回到教程 基于 Hexo 從零開始搭建個人部落格(二),檢視你執行

hexo init xxx

這條指令時所選擇的路徑,例如我選擇的路徑是【G:/hexo-blog】,我的部落格根目錄即為【G:/hexo-blog/xxx】。<br>

修改站點配置檔案

_config.yml

,路徑為【BlogRoot/_config.yml】。<br>

修改主題配置檔案

_config.butterfly.yml

,路徑為【BlogRoot/_config.butterfly.yml】。

推薦閱讀

  • 基于 Hexo 從零開始搭建個人部落格(一)
  • 基于 Hexo 從零開始搭建個人部落格(二)
  • 基于 Hexo 從零開始搭建個人部落格(三)
  • 基于 Hexo 從零開始搭建個人部落格(四)
  • 基于 Hexo 從零開始搭建個人部落格(五)
  • 基于 Hexo 從零開始搭建個人部落格(六)
  • 基于 Hexo 鍵入搜尋功能
  • 基于 Hexo 鍵入分享功能
  • Hexo + Butterfly 自定義右鍵菜單
  • 關于 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
           
Hexo + Butterfly 鍵入線上聊天功能

為了不影響訪客的體驗,主題提供一個

chat_hide_show

配置,設為

true

後,使用工具提供的按鈕時,隻有向上滾動才會顯示聊天按鈕,向下滾動時會隐藏按鈕。

修改主題配置檔案

_config.butterfly.yml

,将

chat_hide_show

設定成

true

如果使用工具自帶的聊天按鈕,按鈕位置可能會遮擋右下角圖示,請配置

rightside-bottom

調正右下角圖示位置。

crisp(本站所用)

打開crisp官網并新增賬號。找到 【設定】->【網站設定】->【設定說明】,找到你的網站ID。

Hexo + Butterfly 鍵入線上聊天功能

修改主題配置檔案

_config.butterfly.yml

,将

crisp

設定成

true

。并将你的網站ID填入

website_id

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

這裡我發了一條内容為【你好,收到了嗎?】的資訊,可在PC和手機上接收消息(這裡放手機效果圖,畢竟電腦随身攜帶的可能性比較小),效果如下:

Hexo + Butterfly 鍵入線上聊天功能
Hexo + Butterfly 鍵入線上聊天功能

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-xpvVmniV-1662365376008)(https://bu.dusays.com/2022/06/01/6296d0089ff3e.jpg#pic_center)]

chatra

打開 chatra官網 并新增賬號,這裡填入郵箱就好,将會收到郵件讓你去初始化密碼。登進去之後,找到【Settings】->【Preferences】-> 【Public key】。

Hexo + Butterfly 鍵入線上聊天功能

修改主題配置檔案

_config.butterfly.yml

,将

chatra

設定成

true

。并在

id

位置填入你的

Public key

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

chatra

的樣式你可以

Chat Widget

自行配置。

Hexo + Butterfly 鍵入線上聊天功能

在站點中呈現的效果如下:

Hexo + Butterfly 鍵入線上聊天功能

在網頁和APP中都能收到資訊,效果如下:

Hexo + Butterfly 鍵入線上聊天功能
Hexo + Butterfly 鍵入線上聊天功能

tidio

打開 tidio 并新增賬號。

Hexo + Butterfly 鍵入線上聊天功能

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

Hexo + Butterfly 鍵入線上聊天功能

修改主題配置檔案

_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】裡面自行配置。

Hexo + Butterfly 鍵入線上聊天功能

在站點中呈現的效果如下:

Hexo + Butterfly 鍵入線上聊天功能

Gitter

打開 Gitter官網 并新增賬號,可以直接用 Github 賬号登入。然後建立一個

community

或者

room

Hexo + Butterfly 鍵入線上聊天功能

我這裡建立的是

community

Hexo + Butterfly 鍵入線上聊天功能

複制名稱,将名稱填入主題配置檔案中。

Hexo + Butterfly 鍵入線上聊天功能

修改主題配置檔案

_config.butterfly.yml

,将gitter設定成

true

。并在

room

處填入複制過來的名稱。

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

在站點中呈現的效果如下:

Hexo + Butterfly 鍵入線上聊天功能

daovice

打開 daovoice 并新增賬號。你可以在【應用設定】->【安裝到網站】中找到【app id】。

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

繼續閱讀