不用改主題！在 hexo 嵌入 Facebook 留言外掛教學

最近在嘗試幫家裡的 hexo 網站加上時，發現網路上現有的中文教學，都是要修改主題的模板檔案，而且還是舊版的 FB API。能不能用我不知道，唯一可以知道的是這些絕對無法適用 Heox 5 用 npm 安裝主題的人。

為此，我決定自己寫一個 plugin，來支援用 Hexo 5 安裝主題的人們。以下這篇文就是關於這個套件的使用教學。

在 npm 上查看：https://www.npmjs.com/package/hexo-tag-fb-comments

需求

• Hexo 5 或以上

教學

安裝

如果你使用 npm：

npm i hexo-tag-fb-comments

如果你使用 yarn：

yarn add hexo-tag-fb-comments

其他的請自行依照所使用的套件管理器指令安裝。

設定

設定檔

請在專案根目錄的 _config.yml 中加入下列設定：

fb_comments:
  enabled: true

至少要這樣，FB 留言外掛才會啟用。但個人推薦再加入 app_id 才可以統一管理留言，詳細請見後面的章節說明。

完整可設定的範例如下：

fb_comments:
  enabled: true  # 是否開啟 FB 留言外掛
  to: post  # 有 post、page 或 default（全部）等，詳細選項請參考 hexo injector
  app_id:   # FB 應用程式編號
  lang: zh_TW  # 語言
  num_posts: 5  # 顯示幾則留言
  order_by: reverse-time  # 留言排序依據，有 time 和 reverse-time
  colorscheme: light  # 介面風格，有 light 和 dark 可選
  width: 100%  # 寬度

上面各項目的值為你沒填寫時套件預設會填入的值，部分和 FB 預設不同（例如 FB 預設是顯示 10 則留言，但套件預設只顯示 5 則）。所以建議依照自己需求改一下。

各參數對應的臉書設定細節請參考：https://developers.facebook.com/docs/plugins/comments/

md檔

請在想顯示 FB 留言外掛的地方，放上下面這個標籤：

{% fb_comments %}

如果嫌每次都要加麻煩的話，可以在鷹架（scaffolds）中直接修改產生文章的模板，以後產生指定 layout 的 md 時就會自動附在裏頭。

FB APP

原本想自己寫，但網路上很多教學了（介面可能會改版，但邏輯不變），取得 app_id 的方式請參考下面這篇教學：
https://sofree.cc/apply-facebook-app-id/

加入好 app_id 後，別忘記 commit 重新 build 上去，這樣新的設定才會生效，連結到你的 FB 應用程式底下。

之後留言都能到 FB 的留言管理工具中查看+管理。

裡面有一些進階設定，像是可以新增版主協助管理留言、允許留言照片、封鎖使用者等等就自己去摸索設定吧！

官方文件參考：https://developers.facebook.com/docs/plugins/comments?locale=zh_TW#moderation

套件資訊

• npm
• GitHub
• 依 MIT License 開源

特色

1. 不需要修改主題檔案，所以用 npm 安裝主題的人也能用
2. 承上，也不用擔心主題模板和主流不同或是不會修改
3. 可以自訂留言外掛位置（看你 tag 放哪裡就出現在哪裡）；如果是改主題檔案的話，位置永遠固定

版號

此套件依照語意化版本規範推升版本號。

本文撰寫時雖然仍是 0.x 版，但功能面已經完備，想使用的人可以放心使用。日後待 CI 或一些程式碼 lint 之類的都弄好了或是哪天覺得算了就這樣，就會發布 1.0。

這是我第一次撰寫 Hexo plugin，也是第一次發布 npm 套件，歡迎各位發 PR 幫忙改善或發 issue 提供建議。

更新目前剩下測試了，可是一直沒啥進展。還是就這樣推出 1.0 好像也是可以，現在也沒什麼實質行為要改變的了。

---