安裝Giscus作為Hugo網站的留言板，支援轉換Gitalk/Utterances的留言

如果說要給Hugo生成的靜態網站加入留言板(評論區)功能，以前有Gitalk和Utterances能使用，原理是利用Github儲存庫的Issue來存放文章留言，且使用者需要Github帳號才能留言。

有些Hugo主題還支援使用Disqus當留言板，Disqus好處是能匿名，還支援用Facebook/Google帳號登入留言。但你我都知道，Disqus在被收購後就爛掉了，廣告一堆，載入速度慢，還會收集許多用戶隱私資料。

在Github推出 Discussions功能後，便有人製作了基於該功能的"Giscus"，功能更豐富，可視為Gitalk的替代品。

那為什麼要從Gitalk切換為Giscus？根據胡涂说博客的說法，樓中樓回覆是Gitub Discussions的一大特色，此外還支援表情符號按讚的功能。

我認為還有一個好處：Discussions不會像Issue一樣每寫一篇就顯示在我Github首頁的動態，免得別人以為我整天都在寫code…其實是整天發廢文啦。

Giscus也支援將舊Gitalk留言遷移至新的系統，效果如下。你也可以試著在本文文末留言試試！

本文介紹如何將Giscus安裝至Hugo的網頁，並附上從Gitalk轉換過到Giscus的過程。

1. 建立Hugo留言儲存庫
#

＊如果已有存放留言的儲存庫可略過步驟1。

新建一個儲存庫，名字隨便取。並將儲存庫設定為Public。
儲存庫建立好之後，點選Settings → Features，啟用Discussions功能
重新整理頁面，該儲存庫應會多出一個Discussions的頁籤。

2. 安裝Giscus的Github APP
#

點此安裝Giscus的Github APP
點選Only selected repositories，僅開放留言儲存庫給Giscus存取。
這樣Giscus便能存取你的留言儲存庫了。

3. 撰寫Giscus程式碼
#

根據使用的主題不同，要修改的部份也不一樣。我使用的是 MemE主題，因此用partial方式嵌入Giscus程式碼。

切換到Hugo網站根目錄，在partials下建立新comments目錄

mkdir layouts/partials/comments

建立giscus.html

touch layouts/partials/comments/giscus.html

至 Giscus官網，按照指引取得安裝程式碼。例如未來我要將Gitalk的Issue轉換為Discussion，便設定<title>讓Giscus按照文章標題去Discussions找同標題的討論串。
再如下勾選：
在giscus.html填入Giscus官網給的程式碼，應該會長這樣：

<script src="https://giscus.app/client.js"
        data-repo="ivon852/netlify-ivon-blog-comments"
        data-repo-id="請自行按照實際情況填入"
        data-category="Announcements"
        data-category-id="請自行按照實際情況填入"
        data-mapping="title"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-TW"
        crossorigin="anonymous"
        async>
</script>

因為我的網站有做英文版，為此加入判斷式，偵測config.toml裡面網站語言languageCode的值，來決定Giscus的界面語言。並設定只在網頁正式上線才載入Giscus。

{{ if eq hugo.Environment "production" }}
{{ if eq .Site.Params.languageCode "zh-TW" }}
<script src="https://giscus.app/client.js"
        data-repo="ivon852/netlify-ivon-blog-comments"
        data-repo-id="請自行按照實際情況填入"
        data-category="Announcements"
        data-category-id="請自行按照實際情況填入"
        data-mapping="title"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang= "zh-TW"
        crossorigin="anonymous"
        async>
</script>
{{ else }}
<script src="https://giscus.app/client.js"
        data-repo="ivon852/netlify-ivon-blog-comments"
        data-repo-id="請自行按照實際情況填入"
        data-category="Announcements"
        data-category-id="請自行按照實際情況填入"
        data-mapping="title"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang= "en"
        crossorigin="anonymous"
        async>
</script>
{{ end }}
{{ end }}

4. 修改Hugo主題嵌入Giscus
#

我使用的MemE主題需要在config.toml，將enableComments設為true，並將其他留言系統全設為false。

接著修改themes/meme/layouts/partials/pages/post.html，調整文章裡面顯示的元素。

原始碼長這樣

{{ partial "components/comments.html" . }}

修改為載入Giscus

{{ partial "comments/giscus.html" . }}

部署網站。之後進入網頁會看到Giscus的留言板。跟Gitalk不一樣的是，文章要有人留言，才會出現在Github儲存庫的Discussions頁面，而非文章載入便建立一個Issue。

5. 轉換現有的Gitalk issue為Giscus discussion
#

Github支援將Issue轉換為Discussion，只不過要手動一個一個轉。我網站的文章有一百多篇怎轉得完？幸好有一半以上文章都沒人留言，所以可以這樣處理：只轉換有人留言的Issue，沒人留言的直接砍掉。

進入儲存庫的Issue頁面，點選Sort → Most commented，設定為留言多的優先。
點進Issue，按右下角Convert to discussion，類別選Announcements。
轉換後的Issue會出現在Discussion頁面。
進入對應的文章頁面，Giscus就會按照文章標題去找對應的Discussion。
但若改過文章標題怎麼辦？只能手動去Discussions，將Discussion title調整為目前文章的標題了。對文章網頁按右鍵檢視原始碼，找到<title>即可知道文章的完整標題為何。
Giscus的頁面變更可能要等幾分鐘才會出現。