Hexo 加入留言板 utterances 🔮

dev

utterances 是一個開源、輕量的留言板，決定用它而不是用常見的 Disqus 有幾個原因：

  • 不追蹤用戶、沒有廣告
  • 留言存在自己的 GitHub repo，而非服務端
  • 支援 Markdown 和 emoji 🤩

唯一的小缺點是，讀者需要登入 GitHub 帳號才能留言 (因為是使用 GitHub issue search API 記錄留言)，但既然 blog 本身就架在 GitHub 了，這一點似乎無損。

雖然不是 Hexo 預設支援的留言系統，安裝步驟設計的超級簡單，接下來就讓我帶你手把手安裝吧！

Step 1. 建立儲存留言的 repo

在你的 GitHub 帳號下建立一個「公開的」 repo。之後所有的留言都會放在這個 repo 的 Issues，因此 repo 必須是公開的，不然讀者無法看到留言。

Step 2. 安裝 utterances app

到 utterances app，把 utterances 安裝在剛剛建立的公開 repo。這個步驟全部在雲端完成，不需要在 local 安裝任何東西。

Step 3. 設定

到 utteranc.es 的 configuration，輸入：

  1. repo，格式為 [你的 GitHub 帳號]/[放留言的 repo 名稱]
  2. 選擇 blog posts 和 Github issues 怎麼對應，utterances 提供幾種方式：
  • 包含 頁面路徑名稱/頁面路徑/頁面標題/頁面og:標題/特定用語 的 issue 標題
  • 特定的 issue 號碼
  1. 選擇主題色

4. 最後一步！貼 script

設定好之後，把 Enable Utterances 自動產生的 script 複製到 blog 的 post template。template 的位置會因為使用的 Hexo 主題不同而有小小的差異，大致上會在 hexo 下的 themes/[主題名稱]/layout 裡面，找到、貼上、部署，完成 🎉！

1
2
3
4
5
6
7
<script src="https://utteranc.es/client.js"
  repo="[你的 GitHub 帳號]/[放留言的 repo 名稱]"
  issue-number="[ENTER ISSUE NUMBER HERE]"
  theme="github-light"
  crossorigin="anonymous"
  async>
</script>

測試

到 post 下留言看看吧！留言之前，需要先登入 GitHub 並同意授權喔。

utterances-test

嗯，就是熟悉的 GitHub issues 留言呢 (覺得溫暖 ♨️

留言之後，utterances 會自動在存放留言的 repo 開 issue，標題是剛剛設定的格式。utterances 載入前就是透過 GitHub issue search API 找到 post 對應的 issue title 來載入留言的。

👋🏼 & mur.

在寫這篇時獲得的另一項技能，用 GitHub issues 當圖床，好像又可以寫成一篇 哈哈哈哈哈，但標題好像就把內容講完了欸… 奉上參考文 Upload images to GitHub ，根本生活駭客 (墨鏡笑

最近終於 (睽違已久又) 開始寫 blog，比起認真文決定寫更多筆記向的內容，我簡單寫，你們輕鬆看 xDD 但品質還是要兼顧 ，所以快去下面留言吧(?)