HUGO So Easy (8) - 導入 Giscus 留言系統

• 2 • 229

Table of contents

開啟 GitHub Discussions 功能
在 GitHub 上安裝 Giscus App
產生 Giscus 配置文件
在 HUGO 加入 Giscus

開啟 GitHub Discussions 功能

開啟存放 HUGO 的 GitHub，點擊上方列表的 ⚙ Settings，並往下找到 Discussions 然後把它勾選起來

開啟 Discussions 後，在上方列表會看到出現了 Discussions

在 GitHub 上安裝 Giscus App

進到安裝頁面 https://github.com/apps/giscus 點擊右邊的 Install

選 Only select repositories，然後點選 Select repositories，最後選擇 HUGO 所在的 repository

確定 HUGO 所在的 repository 有被選擇後就按下 Install

產生 Giscus 配置文件

先去 https://giscus.app/ 生成配置參數，裡面有蠻多東西可以設定的，但是為了示範我只標示出必要更動的參數

儲存庫 (Repository Name)
將自己 GitHub 的 Username 加上剛剛打開 Discussions 功能的 Repository Name 甜到儲存庫欄位中，格式如下
```
my-username/my-repository-name
```

Discussion 分類
這邊分類不一定要跟我一樣選 Annoumcements，不過如果不知道要選什麼就先跟我一樣吧

填完之後拉到下面，會看到自動產生 script 文件

在 HUGO 加入 Giscus

每個主題要加入 Giscus 的方式都不盡相同，這邊我以 PaperMod 主題來示範
開啟 config.yml，找到 comments 設定

如果預設是 `false`，請先改成 `true`

接著把下方參數複製到 comments 下面，記得要把 repo、repoId、category、categoryId 從剛剛的 script 複製過來

  commentsParams:
    repo: [ENTER REPO HERE]
    repoId: [ENTER REPO ID HERE]
    category: [ENTER CATEGORY NAME HERE]
    categoryId: [ENTER CATEGORY ID HERE]
    mapping: title
    reactionsEnabled: 1
    emitMetadata: 1
    inputPosition: top
    lang: zh-TW

貼上後如下：

在 HUGO repository 根目錄開啟 Terminal

在 layout 建立一個 partials 資料夾

mkdir layouts/partials

將 themes/PaperMod/layouts/partials/comments.html 和 themes/PaperMod/layouts/partials/footer.html 複製到剛剛建立的 layouts/partials 資料夾內

cp themes/PaperMod/layouts/partials/comments.html layouts/partials/comments.html
cp themes/PaperMod/layouts/partials/footer.html layouts/partials/footer.html

將下方 javascript 程式碼複製到 comments.html 內

<div class="comments">
    <script>
    function loadComment() {
        let theme = localStorage.getItem('pref-theme') === 'dark' ? 'transparent_dark' : 'light';
        let s = document.createElement('script');
        s.src = '<https://giscus.app/client.js>';
        s.setAttribute('data-repo', '{{- site.Params.commentsParams.repo -}}');
        s.setAttribute('data-repo-id', '{{- site.Params.commentsParams.repoId -}}');
        s.setAttribute('data-category', '{{- site.Params.commentsParams.category -}}');
        s.setAttribute('data-category-id', '{{- site.Params.commentsParams.categoryId -}}');
        s.setAttribute('data-mapping', '{{- site.Params.commentsParams.mapping -}}');
        s.setAttribute('data-reactions-enabled', '{{- site.Params.commentsParams.reactionsEnabled -}}');
        s.setAttribute('data-emit-metadata', '{{- site.Params.commentsParams.emitMetadata -}}');
        s.setAttribute('data-input-position', '{{- site.Params.commentsParams.inputPosition -}}');
        s.setAttribute('data-lang', '{{- site.Params.commentsParams.lang -}}');
        s.setAttribute('data-theme', theme);
        s.setAttribute('crossorigin', 'anonymous');
        s.setAttribute('async', '');
        document.querySelector('div.comments').innerHTML = '';
        document.querySelector('div.comments').appendChild(s);
    }
    loadComment();
    </script>
</div>

到這邊我們就在 HUGO 成功導入 Giscus 留言系統嚕