快轉到主要內容

如何給Hugo + Netlify的網站加上Gitalk留言板

分類   資訊科技 Hugo網站架設
標籤   Github Netlify
🗓️ 民國111年 壬寅年
✍ 切換正體/簡體字
目錄

用Hugo和Netlify建立部落格之後,希望有個能互動的評論區,Disqus雖然功能多但是有廣告,還是那種煽情的內容,破壞我網站的品質(?)

作為Github的多年用戶,善用Github的"Issues"功能來當留言板是最好的了,也就是"Gitalk"。

步驟:於Netlify建立網站之後,首先要建立空的儲存庫,用來存留言。接著申請一個Github OAuth Application,就是架設留言板系統啦。接著再於Netlify後台將Github的Application安裝至網站上。隨後再編輯Hugo的設定檔,啟用留言板。

效果如圖:

使用者留言時建議登入Github帳號。

之後用來存留言的儲存庫,每一篇文章都會開一個Issue,裡面就能保存留言。

1. 建立空的儲存庫
#

  1. Github建立空的儲存庫,名字隨便取,確認有開啟Issues功能,勾選Add a README file。此外為了讓搜尋引擎檢索到這裡的留言,將此儲存庫設為公開。

  2. 於此儲存庫新建第一個Issue。

2. 申請Github OAuth Application
#

  1. Github OAuth Apps申請一個新的應用程式。名字隨便取,Homepage URLAuthorization callback URL都填自己網站的網址,按下Register Application

  2. 隨後你會得到一組Client ID,再手動點選生成Client secrets。記住這二組數字。日後要編輯此應用程式設定,請從Github右上角大頭貼→Settings→Devloper Settings進入。

3. 安裝Github Applicatio至Netlify
#

登入Netlify的後台,點選網站的Site settings,於Access controlOAuth處,點選Install provider,輸入上面2.所新增的Github應用程式的Client ID和Client secrets。

4. Hugo啟用Gitalk
#

不同主題會有不同設定,多半是編輯網站目錄底下的config.toml來啟用Gitalk。

  1. 例如我的主題是 MemE,要將enableComments的值設定為true,再如下設定:
    ## Gitalk
    enableGitalk = true
    gitalkClientID = "剛剛取得的Client ID"
    gitalkClientSecret = "剛剛取得的Client secret"
    gitalkRepo = "放留言的儲存庫名稱,不需要網址"
    gitalkOwner = "自己的Github ID"
    gitalkAdmin = ["自己的Github ID"]
    gitalkLable = ["Gitalk"]
    gitalkDistractionFreeMode = false
    gitalkPerPage = 10
    gitalkLanguage = "zh-TW"
    gitalkPagerDirection = "last"
    gitalkCreateIssueManually = false
    gitalkProxy = "https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token"
    gitalkEnableHotKey = true
    # Note: https://github.com/gitalk/gitalk
  1. Github的Issue不能超過50個字,不然的話Gitalk出現Validation Failed錯誤,Gitalk會無法載入。

  2. 改以MD5限制生成的Issue長度。例如我的是MemE主題,在網站使用的themes目錄底下找到定義Gitalk樣式的Gitalk.html,,修改如下:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
//插入能生成MD5的JS
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/gangdong/gangdong.github.io@dev/assets/js/md5.min.js"></script>
<script>
    function loadComments() {
        if (!document.getElementById('gitalk-container')) {
            return;
        }
        if (typeof Gitalk === 'undefined') {
            var getScript = (options) => {
                var script = document.createElement('script');
                script.defer = true;
                script.crossOrigin = 'anonymous';
                Object.keys(options).forEach((key) => {
                    script[key] = options[key];
                });
                document.body.appendChild(script);
            };
            getScript({
                src: 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js',
                onload: () => {
                    newGitalk();
                }
            });
        } else {
            newGitalk();
        }
    }
    function newGitalk() {
        const gitalk = new Gitalk({
            clientID: {{ .Site.Params.gitalkClientID }},
            clientSecret: {{ .Site.Params.gitalkClientSecret }},
            repo: {{ .Site.Params.gitalkRepo }},
            owner: {{ .Site.Params.gitalkOwner }},
            admin: {{ .Site.Params.gitalkAdmin }},
            labels: {{ .Site.Params.gitalkLable }},
            distractionFreeMode: {{ .Site.Params.gitalkDistractionFreeMode }},
            perPage: {{ .Site.Params.gitalkPerPage }},
            language: {{ .Site.Params.gitalkLanguage }},
            pagerDirection: {{ .Site.Params.gitalkPagerDirection }},
            createIssueManually: {{ .Site.Params.gitalkDistractionFreeMode }},
            proxy: {{ .Site.Params.gitalkProxy }},
            enableHotKey: {{ .Site.Params.gitalkEnableHotKey }},
            //將生成的Issue ID改成MD5
            id: md5(location.pathname)
        })

        gitalk.render('gitalk-container')
    }
</script>
  1. 隨後部署網站。

  2. 每次發文後(舊文也一樣),要到該網頁下方登入自己的Github帳號,並且走訪之前發的文章,看留言板有沒有跑出來?或者至存放留言的儲存庫看該文章有無出現獨立Issue。

  3. 否則別人就會看到這個畫面:Related Issues not found. Please contact xxx to initialize the comment.,解決方法就是自行走訪網頁建立Issue。

如果你覺得這文章不錯,請試著留言看看吧:)

參考資料
#

相關文章

如何使用UUP DUMP下載Windows的ISO [Linux / Windows / macOS]
分類   資訊科技 電腦軟體分享
標籤   Windows Windows on ARM
動漫畫作品可以「開源」嗎?談《創用CC授權》套用在藝術創作的實例
分類   人文藝術 自由軟體議題
標籤   Creative Commons Free Software
Animated Java:將Minecraft基岩版模型動畫轉成Java版的資料包+資源包
分類   遊戲攻略 Minecraft
標籤   BlockBench Minecraft Resource Pack Minecraft Data Pack

留言板

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

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

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