Hugoにコメント機能を付ける（giscus編）

Posted / Update 2024-02-20

homepage coding #hugo #theme

utterancesからgiscusへ

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

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

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

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

giscusって？

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

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

giscus 設定手順

GitHub

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

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

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

補足

Discussionsを有効にする

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

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

giscusアプリ

インストール

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

設定（コード取得）

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

Hugo

コード挿入

  1. コメント機能を表示したい場所へ先程のコードを挿入

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

// single.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 }}

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

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

所感

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

今回設置したのは下記サイトになります。
k-kaz が好きなことを書く

Posted / Update 2024-02-20

homepage coding #hugo #theme