コメント欄を付けてみた（giscus編）

何気無く見てたら

PagermodのDiscussionsを見ていたら、「giscusってサポートしないの？」という議題がありました。

覗いてみると、コメント機能のことらしいです。

Hugoは静的サイトジェネレーターです。
コメント機能はデータベースが必要になるので、静的サイトの機能だけでは実現できません。
そのため、外部ツールを利用することとなります。

今使っているのが utterances です。

使っているとは書きましたが、誰からもコメントが付かないのですが・・・。

話題に出ていたのが、こちらの giscus です。
utterances から着想を得ましたと書かれている通り、よく似ています。

ともにGitHubの機能を使いますので、コメントするにはGitHubアカウントが必須です。
技術系のサイトならいざ知らず、うちのようなサイトだとアカウント持っている人が皆無だから、ほとんど機能しませんね・・・。

utterances は、GitHubのIssuesという機能を使い、giscus は、Discussionsという機能を利用します。

そもそもIssuesとDiscussionsの機能的な違いがあまり分かっていませんが、Discussionsは議論用の機能なので、コメント欄としてはこちらが向いているということは分かりました。

このサイトで議論するほどのコメントは付きませんけど。

機能のひとつとして、記事読み込み時にコメント欄を読み込まず、コメント欄付近にスクロールしたら読み込むという遅延読み込みに対応しています。
ページの表示は1秒でも速くしたいですから、こういう気遣いは良いですね。

具体的なところは、また k-kaz が Hugo で遊ぶサイトのほうに改めて書きたいと思いますので、ここでは概要だけ。

GitHub
1. コメントを保管するリポジトリを作る今回はutterancesで使ったものを流用
2. そのリポジトリでDiscussionsの機能を有効にする
giscus アプリ
1. GitHub Apps - giscus へ移動する
2. インストールするインストール先は今回のリポジトリを選択
giscus 設定
1. giscus へ移動する
2. 自分好みに設定をしていく
3. コードができあがるのでコピーする
Hugo テーマ
1. コメントを表示したいところへ先程のコードを貼り付ける

こんな感じで、すぐに終わりました。

現在、記事の下に表示されているのが、giscusのコメント機能です。
記事へのリアクションもありますね。

リアクション及びコメントは、githubにサインインしてご利用いただく形です。
興味がある方はぜひ。