快轉到主要內容

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

資訊科技 Hugo網站架設 Giscus Github
✍ 切換正體/簡體字
目錄

如果說要給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。

  1. 新建一個儲存庫,名字隨便取。並將儲存庫設定為Public。

  2. 儲存庫建立好之後,點選Settings → Features,啟用Discussions功能

  3. 重新整理頁面,該儲存庫應會多出一個Discussions的頁籤。

2. 安裝Giscus的Github APP
#

  1. 點此安裝Giscus的Github APP

  2. 點選Only selected repositories,僅開放留言儲存庫給Giscus存取。

  3. 這樣Giscus便能存取你的留言儲存庫了。

3. 撰寫Giscus程式碼
#

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

  1. 切換到Hugo網站根目錄,在partials下建立新comments目錄
mkdir layouts/partials/comments
  1. 建立giscus.html
touch layouts/partials/comments/giscus.html
  1. Giscus官網,按照指引取得安裝程式碼。例如未來我要將Gitalk的Issue轉換為Discussion,便設定<title>讓Giscus按照文章標題去Discussions找同標題的討論串。

  2. 再如下勾選:

  3. 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>
  1. 因為我的網站有做英文版,為此加入判斷式,偵測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,調整文章裡面顯示的元素。

  1. 原始碼長這樣
{{ partial "components/comments.html" . }}
  1. 修改為載入Giscus
{{ partial "comments/giscus.html" . }}
  1. 部署網站。之後進入網頁會看到Giscus的留言板。跟Gitalk不一樣的是,文章要有人留言,才會出現在Github儲存庫的Discussions頁面,而非文章載入便建立一個Issue。

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

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

  1. 進入儲存庫的Issue頁面,點選Sort → Most commented,設定為留言多的優先。

  2. 點進Issue,按右下角Convert to discussion,類別選Announcements

  3. 轉換後的Issue會出現在Discussion頁面。

  4. 進入對應的文章頁面,Giscus就會按照文章標題去找對應的Discussion。

  5. 但若改過文章標題怎麼辦?只能手動去Discussions,將Discussion title調整為目前文章的標題了。對文章網頁按右鍵檢視原始碼,找到<title>即可知道文章的完整標題為何。

  6. Giscus的頁面變更可能要等幾分鐘才會出現。

參考資料
#

相關文章

如何給Hugo + Netlify的網站加上Gitalk留言板
資訊科技 Hugo網站架設 Github Netlify
用Splide.js給Hugo網頁加上圖片輪播 (Image Carousel)
資訊科技 Hugo網站架設 JavaScript Library
將suckless.org極簡網頁設計哲學付諸實現,Hugo新增自訂單一HTML頁面
資訊科技 Hugo網站架設 Hugo

留言板

此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。要討論程式碼請用Giscus,匿名討論請用Disqus。

這是Giscus留言板,需要Github帳號才能留言。支援markdown語法,若要上傳圖片請貼Imgur連結。您的留言會在Github Discussions向所有人公開。

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。