如何在 Hugo 中加入評論系統 Gitalk

前言

為了在部落格增加互動系統，選擇以 gitalk 作為 comment 系統

實作

1. 建立 Github OAuth App 並取得 client id & client secret (很重要，後續會用到)

   • 作法可參考官方文件

2. 將資訊填入 themes\hugo-theme-stack\config.yaml

   • clientID: 步驟一取得的 client id
   • clientSecret: 步驟一取得的 client secret

       gitalk:
           owner: yue-jenny -> 你的 account name
           admin: yue-jenny -> 你的 account name
           repo: yue-jenny.github.io -> 你的 repo name
           clientID: 123 -> 步驟一取得的 client id
           clientSecret: 456 -> 步驟一取得的 client secret
   

3. 上述步驟完成後，需要 admin (通常就是作者) 先 initial comment。

4. initial 完成後，頁面會這樣呈現。

   • finish-initial-comment

5. 到 Github 可以看到，每一篇文章都會開一個 issue 紀錄，就像這樣。如果有留言，會在 issue 內多一個回應。

   • github-issue-with-comment

關於 Github Oauth App

• 想知道更多，可參考 👉 這篇文章Github 的 Oauth App 介紹 (一)

參考資料 👐

• creating-an-oauth-app

🍀 最後，若喜歡我的分享，可以免費幫我按讚，是對我最大的鼓勵! ✨ ✨ ✨