Gitalk on Jenny blog

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

Fri, 06 Jan 2023 18:10:13 +0800

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

前言

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

實作

建立 Github OAuth App 並取得 client id & client secret (很重要，後續會用到)
- 作法可參考官方文件

將資訊填入 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

上述步驟完成後，需要 admin (通常就是作者) 先 initial comment。
initial 完成後，頁面會這樣呈現。
- finish-initial-comment
到 Github 可以看到，每一篇文章都會開一個 issue 紀錄，就像這樣。如果有留言，會在 issue 內多一個回應。
- github-issue-with-comment

關於 Github Oauth App

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

參考資料 👐

creating-an-oauth-app

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