Featured image of post Hugoにコメント機能を付ける(giscus編)

Hugoにコメント機能を付ける(giscus編)

giscusにしてみました。

utterancesからgiscusへ

以前、コメント欄を付けるぞとこんな記事を書きました。

Hugoにコメント機能を付ける

その際、GitHubのIssuesにコメントを保管する utterances という機能を利用しました。

今回、その utterances から着想を得たという giscus を利用してみることにしました。
1年間で1件もコメントが来ていないのに変更するという・・・。

giscusって?

utterances とよく似ています。
giscusは、GitHubのDiscussions機能を使います。

ということは、こちらもコメント投稿時にGitHubアカウントが必要となります。

giscus 設定手順

GitHub

アカウント取得とリポジトリ作成

  • GitHubアカウントの取得
  • コメント格納用リポジトリを作成

これらは前回とまったく同じなので、下記参照ください。

GitHubアカウントの取得|Hugoにコメント機能を付ける
コメント格納用リポジトリを作成|Hugoにコメント機能を付ける

補足

  • リポジトリの方は、公開設定(Public)にしておくことをお忘れなく。
  • utterances 等ですでにリポジトリを作ってあれば流用可能です。
  • Issuesに入っているコメントをDiscussionsへ移行する方法もあります。
    Moderating discussions - GitHub Docs
  • 設置するサイトが複数ある場合は、リポジトリも同じ数だけ用意します。

Discussionsを有効にする

コメント格納用リポジトリで、Discussionsの機能を有効にします。

  1. Settingsへ移動
  2. General内のFeaturesにあるDiscussionsを有効

giscusアプリ

リポジトリ毎にインストールする必要がありますので、複数設置する場合はご注意を。

インストール

  1. GitHub Apps - giscus へ移動
  2. インストール
    • インストール先は今回のリポジトリを選択

設定(コード取得)

  1. giscus へ移動
  2. 自分好みに設定
  3. でき上がったコードを控える

Hugo(テーマ)

PaperMod の場合

  1. コメント機能を表示したい場所へさきほどのコードを挿入

私の場合は、記事の下に入れるため single.html の最後に入れました。

2024/11/13 追記
PagerMod v8.0から、コメント用のパーツ/layout/partials/comments.htmlができたので、そちらに入れるほうがスマートですね。

// domments.html
{{- if (.Param "comments") }}
  <script src="https://giscus.app/client.js"
    data-repo="hoge/hoge-repo" //ユーザー名と保管用リポジトリ名
    data-repo-id="hoge-ID" //自動発行されるID
    data-category="Announcements" //Discussions内でどのカテゴリに保管するか
    data-category-id="hoge-ID" //カテゴリのID
    data-mapping="title" //保管時、表題となるもの(タイトル、URL等)
    data-strict="0"
    data-reactions-enabled="1"
    data-emit-metadata="0"
    data-input-position="bottom"
    data-theme="preferred_color_scheme" //テーマカラー
    data-lang="ja" //日本語
    data-loading="lazy" //遅延読み込み機能有効
    crossorigin="anonymous"
    async>
  </script>
{{- end }}

コメントで説明を入れてみましたが、違っていたらすいません。

先ほど取得したコードをそのまま使っています。
修正など不要で利用できています。ありがたや。

Stack の場合

コメント機能は標準で付いているので、configを触るだけで大丈夫でした。

// config.yml
params:
    comments:
        enabled: true     // コメント機能を有効に
        provider: giscus  // どのコメント機能を使うか選択
        giscus:           // providerで選択する機能名
            repo: hoge/hoge-repo                // ユーザー名と保管用リポジトリ名
            repoID: hoge-repo-ID                // 自動発行されるリポジトリのID
            category: General                   // Discussions内でどのカテゴリに保管するか
            categoryID: hoge-cat-ID             // カテゴリのID
            mapping: title                      // 保管時の表題となるもの(タイトル、URL等)
            lightTheme: preferred_color_scheme  // ライトモードのときのテーマカラー(ここではモードで自動調整?)
            darkTheme: preferred_color_scheme   // ダークモードのときのテーマカラー(ここではモードで自動調整?)
            lang: ja                            // 項目がなかったので自分で追加し、メッセージ等を日本語に
            reactionsEnabled: 1
            emitMetadata: 0

所感

難しいことは何もなく、簡単にコメント機能の設置ができました。

今回設置したのは下記サイトになります。

Hugo で構築されています。
テーマ StackJimmy によって設計されています。