Hexo Blog 04：NexT 主題加入留言與聊天室機制

發表於 更新於 分類於 ， 閱讀次數： Disqus： 文章字數： 1.2k 所需閱讀時間 ≈ 4 分鐘

前一篇系列文章：繼續探索 NexT 在 NexT 主題啟用了一些 Blog 常見功能，讓文章的簡單量化資訊一目了然。這回來加上讓讀者有機會與我們互動的留言與聊天室機制。

環境

Hexo: 6.3.0

hexo-cli: 4.3.0

NexT: 8.14.0

留言機制

NexT 提供了 數種留言方案，每種方案都有其使用上優缺點，可以思考一下自己 Blog 的客群來選擇。也可以全部都啟用，給讀者自行選擇要用什麼方案。

我是直接使用列在最前面的 Disqus，只需要簡單註冊一下，取得 shortname 後貼進主題設定檔中即可：

進入 Disqus 官網

點擊 GET STARTED

Signup 註冊

What would you like to do with Disqus?

點擊 I want to install Disqus on my site

Create a new site

給 Disqus Websete 命名與設定類別 (可以隨便設，因為可以刪除)，完成後點擊 Create Site

Select a plan

頁面往下滑，找到 Basic 方案，點擊 Subscribe Now (這是免費方案!)

What platform is your site on?

頁面往下滑，找到此按鈕並點擊

Universal Code install instructions

忽略此頁面內容，往下滑，找到 Configure 並點擊

Configure Disqus

Website URL 填入 Blog 網址

點擊 Next

Comment and Moderation Settings

選擇想要的留言規範後點擊 Complete Setup 即完成設定

Disqus 設定完成

取得 Shortname

點擊上方 Settings tab 即可找到 Shortname，將其複製 (本範例中的 Shortname 已刪除，僅供參考用途)

將 Shortname 貼進主題設定檔中：

_config.next.yml
1
2
3
4
5
6
# Disqus
# For more information: https://disqus.com
disqus:
  enable: true
  shortname: OOOOO
  count: true

重新部署 Blog

設定好之後重新部署 Blog，留言板就會自動出現在文章或特定頁面下方了，缺點大概是無法使用訪客匿名留言，必須使用 Disqus 帳號或社群平台帳號登入才能留言，如：Facdbook、Twitter 及 Google。

大功告成!

補充：後來找到一款可以免登入的留言板 Discuss，我自己是沒套用，但我有用 Lete乐特 這位大大的其他套件。

聊天室機制

NexT 目前提供了 三種聊天室方案，一次只能啟用一種，若是在設定中開啟了多個，NexT 只會啟用在設定檔中列在比較前面的。

NexT 官網 使用的是 Gitter，是多人聊天室，我覺得可以取代留言板，不過不管創建聊天室或是加入聊天都是使用 GitHub 帳號。

我目前是使用 Chatra，性質是偏向商家 (作者) 對顧客 (讀者) 的聊天室，讀者不需要登入即可與作者取得聯繫。

Chatra 的啟用方法也是註冊後取得 id 後貼進主題設定檔中即可：

進入 Chatra 官網

點擊 GET STARTED

填入 email 註冊

填入 email 後點擊 Let's go! 即完成註冊。

需要進入登記的 email 收驗證信來驗證身份。

左方側邊欄進入 Settings > Chat widget 找到 HTML 程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Chatra {literal} -->
<script>
    (function(d, w, c) {
        w.ChatraID = 'OOOOO';
        var s = d.createElement('script');
        w[c] = w[c] || function() {
            (w[c].q = w[c].q || []).push(arguments);
        };
        s.async = true;
        s.src = 'https://call.chatra.io/chatra.js';
        if (d.head) d.head.appendChild(s);
    })(document, window, 'Chatra');
</script>
<!-- /Chatra {/literal} -->

找到 w.ChatraID，複製引號間的 ID。

將複製的 ID 貼進主題設定檔中：

_config.next.yml
1
2
3
4
5
6
7
8
# Chatra Support
# For more information: https://chatra.com
# Dashboard: https://app.chatra.io/settings/general
chatra:
  enable: true
  async: true
  id: OOOOO # Visit Dashboard to get your ChatraID
  #embed: # Unfinished experimental feature for developers. See: https://chatra.com/help/api/#injectto

重新部署 Blog

聊天室按鈕就會自動出現在 Blog 頁面下方了，可以在它網站裡的 Settings > Chat widget 設定其顯示的位置。

聊天室按鈕 (我的在頁面右下方)

聊天室 (點擊聊天室按鈕開啟)

也因為它自己就有按鈕，我們不用開啟 NexT 提供的 Chat 按鈕：

_config.next.yml
1
2
3
4
5
6
# A button to open designated chat widget in sidebar.
# Firstly, you need to enable and configure the chat service.
chat:
  enable: false
  icon: fa fa-comment # Icon name in Font Awesome, set false to disable icon.
  text: Chat # Button text, change it as you wish.

接收訊息

如果有人透過 Blog 的 Chatra 聊天室傳訊息給你，你要怎麼知道?

  • App：在行動裝置或電腦安裝 Chatra App，登入帳號即可即時收到別人傳的訊息。

  • Web：在 Chatra 官網 登入帳號就可以看到全部訊息。

  • Email：如果你沒有使用 App 或登入網站的習慣，Chatra 會定期把你沒讀的訊息用 Email 寄給你。

結語

加入留言與聊天機制後 Blog 幾近完全體，各位可以好好撰寫文章了!

下一篇系列文章：NexT 主題 SEO 相關設置