這個網站原本使用的留言系統是 Waline，但試用一陣子後覺得還是基於 GitHub issue 這類的留言系統比較好用，並且我的網站是使用 GitHub Pages 架起來的，用 GitHub 本身的系統也比較方便管理。

當我在找要用哪個系統時，發現了基於 GitHub Discussions 的 giscus，能直接對某個留言回覆，解決了 gitalk 與 utterances 回覆不方便的問題，且設定方法也很簡單。

設定 GitHub 儲存庫

在使用前有幾個前置作業要做：

  1. 選擇一個公開的儲存庫 (repository) 用於存放留言產生的 Discussions（若網站是使用 GitHub Pages 建議直接選擇存放網站的儲存庫）。
  2. 安裝 giscus 應用程式到剛剛選擇的儲存庫（建議只安裝到指定的儲存庫，而不是所有儲存庫）。
  3. 在選擇的儲存庫開啟 Discussions 功能。進入儲存庫的 Settings 選項，往下拉找到 Features 區塊，勾選 Discussions。

設定 giscus

首先到 giscus 的頁面，在設定區塊依照說明及自己的需求填寫完畢。

填完後會自動產生一段如下所示的 HTML code：

<script src="https://giscus.app/client.js"
        data-repo="[在此輸入儲存庫名稱]"
        data-repo-id="[在此輸入儲存庫 ID]"
        data-category="[在此輸入分類名稱]"
        data-category-id="[在此輸入分類 ID]"
        data-mapping="pathname"
        data-strict="1"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="zh-TW"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

再來只要根據不同架站工具及主題的設定方式，將這段 code 或裡面的資訊設定好就完成了。

Hexo 設定檔設置

若不是使用 Hexo 作為架站工具，或者不是使用 butterfly 主題，此章節僅供參考，不需要可直接略過。

在設定檔設定好後，不需要再使用腳本等方式將 code 嵌入文章內。

首先在 _config.butterfly.yml 找到 Comments System 的區塊，將使用的系統改為 giscus：

_config.butterfly.yml
comments:
  use: giscus

再往下找到 giscus 的設定，照著前面在 giscus 頁面產生出來的 code 修改即可。若有需要也可添加其他設定在 option：

_config.butterfly.yml
giscus:
  repo: [在此輸入儲存庫名稱]
  repo_id: [在此輸入儲存庫 ID]
  category_id: [在此輸入分類 ID]
  theme:
    light: light
    dark: dark
  option:
    data-mapping: "pathname"
    data-strict: "1"
    data-emit-metadata: "0"
    data-input-position: "top"
    data-lang: "zh-TW"

這樣就設定完成了。

參考連結