概要
前回の記事画像最適化 — カスタムrehypeプラグインで画像最適化を扱いました。今回の記事ではブログに欠かせないコメントシステムをAstroで実装する方法を説明します。
Utterancesとは
UtterancesはGitHub Issuesをコメントストレージとして使用する軽量コメントシステムです。別途のサーバーやデータベースが不要で、GitHubアカウントでログインしてコメントを書きます。
以前はDisqusを使用していましたが、重いスクリプトと広告表示の問題でUtterancesに切り替えました。Utterancesの主な利点は以下の通りです。
- 軽量：外部スクリプト1つだけロードすればよく、不要な広告がありません
- GitHub統合：コメントがGitHub Issuesに保存されるため、別途データベース管理が不要です
- マークダウン対応：コメントでマークダウン文法が使えるのでコードブロックなどを簡単に書けます
- 無料：オープンソースプロジェクトで完全無料です
詳細はUtterancesでコメントシステム変更ポストを参考にしてください。
Comments.astroコンポーネント
Comments.astroはUtterancesコメントウィジェットをレンダリングするコンポーネントです。enabled propsがtrueの時だけコメント領域を表示するため、frontmatterでcomments: falseに設定すると特定ポストのコメントを簡単に無効化できます。
---
// src/components/Comments.astro
interface Props {
enabled: boolean;
}
const { enabled } = Astro.props;
---
{enabled && (
<div class="comments-section" style="margin-top: 40px;">
<script
is:inline
src="https://utteranc.es/client.js"
repo="dev-yakuza/dev-yakuza.github.io"
issue-term="title"
label="comment"
theme="github-light"
crossorigin="anonymous"
async
></script>
</div>
)}主要設定
主要設定値は以下の通りです。
| 属性 | 値 | 説明 |
|---|---|---|
repo | dev-yakuza/dev-yakuza.github.io | コメントが保存されるGitHubリポジトリ |
issue-term | title | ポストタイトルでIssueをマッチング |
label | comment | Issueに付けるラベル |
theme | github-light | コメントウィジェットテーマ |
is:inlineディレクティブを使用してAstroがこのスクリプトをバンドルせずそのままHTMLに含めます。
Utterancesのインストール方法
Utterancesを使用するにはまずGitHubにutterancesアプリをインストールする必要があります。インストール後、コメントが保存されるリポジトリへのアクセス権限を付与すると、ポストにコメントが書かれるたびに該当リポジトリに自動的にIssueが作成されます。
PostLayoutでの使用
PostLayout.astroでCommentsコンポーネントをインポートして使用します。frontmatterのcomments値がそのままenabled propsに渡されるため、ポストごとにコメント表示の有無を個別に制御できます。
<!-- src/layouts/PostLayout.astro -->
<Comments enabled={comments} />完了
今回の記事ではAstroブログにUtterancesコメントシステムを連携する方法を見てきました。
UtterancesでGitHub Issuesベースの軽量コメントシステムを実装Comments.astroコンポーネントでカプセル化して再利用enabledpropsでポストごとのコメント表示有無を制御is:inlineディレクティブで外部スクリプトをそのままHTMLに含める
次の記事広告連携（Google AdSense）ではGoogle AdSense広告をブログに連携する方法とカスタムrehypeプラグインを扱います。
シリーズ案内
このポストはJekyllからAstroへのマイグレーションシリーズの一部です。
- JekyllからAstroへマイグレーションした理由
- Astroのインストールとプロジェクト構成
- Content Collectionsとマークダウンマイグレーション
- 多言語（i18n）実装
- SEO実装
- 画像最適化 — カスタムrehypeプラグイン
- コメントシステム（Utterances）
- 広告連携（Google AdSense）
- Pagefindを利用した検索実装
- レイアウトとコンポーネントアーキテクチャ
- GitHub Pagesデプロイ
- ソーシャル共有自動化スクリプト
- トラブルシューティングとヒント
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
