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

コード挿入

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 が好きなことを書く