utterancesからgiscusへ
以前、コメント欄を付けるぞとこんな記事を書きました。
その際、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の機能を有効にします。
- Settingsへ移動
- General内のFeaturesにあるDiscussionsを有効
giscusアプリ
リポジトリ毎にインストールする必要がありますので、複数設置する場合はご注意を。
インストール
- GitHub Apps - giscus へ移動
- インストール
- インストール先は今回のリポジトリを選択
設定(コード取得)
- giscus へ移動
- 自分好みに設定
- でき上がったコードを控える
Hugo(テーマ)
PaperMod の場合
- コメント機能を表示したい場所へさきほどのコードを挿入
私の場合は、記事の下に入れるため の最後に入れました。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
所感
難しいことは何もなく、簡単にコメント機能の設置ができました。
今回設置したのは下記サイトになります。
- PagerMod
- Stack