新興のフレームワークである Astro フレームワークは、驚異的な速度と簡単な構築を持っていますが、現時点ではまだエコシステムが発展しておらず、ほとんどのテーマは giscus などのコメントシステムをサポートしていません。この記事では、Astro フレームワークのブログで giscus コメントシステムを使用する方法について簡単に説明します。
注意
この記事の対象読者は、一定の基礎知識を持つブロガーです。
重要
このコメントシステムは Vercel でのデプロイでは正常に動作しますが、Cloudflare Pages でのデプロイでは、ホームページから記事に入るとコメントシステムが正常に読み込まれないため、ページをリロードするか、直接リンクを使用して記事に入る必要があります。詳細は後述の内容をご覧ください。
giscus の設定#
まず最初に、ターゲットのコメントストレージリポジトリを giscus で初期化する必要があります。
giscus 公式ウェブサイトを開き、以前と同様にリポジトリを設定し、生成された設定ファイルは次のようになります：
<script src="https://giscus.app/client.js"
data-repo="YOUR_REPO_NAME"
data-repo-id="REPO_ID"
data-category="Announcements"
data-category-id="CATEGORY_ID"
data-mapping="title"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
これを保存するか、ウェブページを閉じずに次のステップに進んでください。
Astro の設定#
コメントシステムスクリプトの作成#
エディタに戻ります。ここでは、VS Code + Fuwariテーマを使用します。srcディレクトリのcomponentsディレクトリを見つけます。
/
├── ...
└── src
├── components
└── ...
...
componentsディレクトリの中にCommentSection.astroというファイルを作成します（名前は任意です）。
先ほどの giscus の設定をコピーして貼り付け、保存します。
記事ページの変更#
記事をレンダリングする責任を持つ Astro ファイルを見つけます。おそらくpagesディレクトリの中にあるはずです（これは他のフレームワークと同様で、ウェブサイトは「ページ」で構成され、その中には記事を表示するページがあります）。
Fuwari テーマの場合、おそらくsrc->pages->posts->[...slug].astroにあるはずです。次のように変更します：
---
import CommentSection from '@components/CommentSection.astro'
---
...
<!-- 記事のレンダリングメイン要素 -->
<div>
...
<!-- 最後の要素 -->
<div>
...
</div>
<CommentSection />
</div>
...
注：Markdown は Astro の構文をレンダリングできないため、コードブロックを近い JSX に設定して正しくハイライトします。
ここで大幅に簡略化された構造ですが、<CommentSection />は記事のレンダリングメイン要素の内部の最後、または記事の最後の要素の後に配置する必要があります。
Fuwari テーマの場合、これは著作権情報の下に配置する必要があります。
<div>
...
{licenseConfig.enable && <License ...></License>}
<CommentSection />
</div>
以下のような効果が得られます：
パフォーマンスの最適化#
giscus は JavaScript スクリプトであり、静的ウェブページに対しては非常にパフォーマンスの負荷が大きいです。
制御変数のテストでは（1500 文字の複雑なブログで、ホームページから直接記事にアクセスしない場合）、次のような lighthouse_mobile のパフォーマンススコアが得られます：
コメントシステムを追加しない場合：77 点
コメントシステムを追加して最適化しない場合：56 点
コメントシステムを追加して最適化する場合：70 点
最適化は非常に重要です。最適化の方法は非常に簡単で、コメントコンポーネントの Astro ファイル（つまり、先ほどのCommentSection.astro）を見つけます。
先頭に次の行を追加します：
---
export const partial = true
---
<script src="https://giscus.app/client.js"
... // あなたのgiscusの設定
</script>
表示が正常でない場合の推測と一部の解決策#
注意
このセクションはチュートリアルではないため、自己判断してください。すべて推測に過ぎません。
UPDATE
更新：キャッシュを無効にする方法は、Cloudflare Pages でデプロイされたコメントシステムが正常に動作する可能性がある一部の場合に役立つかもしれません（ただし、ページのトランジションアニメーションが欠落します）！それ以外の場合、コメントがロードされません！
Vercel プラットフォームでは、ブログサイトをブラウザキャッシュしないように Cloudflare で設定するだけで問題ありません。
以下は設定の例です：
ただし、この方法は Vercel プラットフォームでデプロイされたウェブサイトに完璧に対応します。
Cloudflare Pages でデプロイされたウェブサイトの場合、この方法は必ずしも効果的ではありません。非常に混乱しており、コメントが正常にロードされる場合もありますが、ページのトランジションアニメーションが消えることもあります。
以下は推測です：
このブログは静的ウェブページとして設定されており、レンダリング方法はstaticです。これは最初からテーマの設計時にこのように設定されており、現在はSSRレンダリングモードに変更するのが難しいです。
Cloudflare はこのようなウェブページを純粋な静的ウェブページとして扱い、記事に入るというアクションに対しては2回目のリフレッシュは行われません。そのため、コメントモジュールが正しく読み込まれません（キャッシュを無効にする方法もしかしたら解決策になるかもしれません）。
一方、Vercel は記事に入った後、記事内の動的コンポーネント（つまり、giscus モジュール）を再度読み込みます（記事ページに入った後、ブラウザのタブアイコンが回転しているのが見えるでしょう）。そのため、giscus スクリプトが正しく読み込まれます。
Vercel は Astro に対する全体的なサポートがより優れているため、Astro ウェブサイトのデプロイには Vercel が最適であり、現在はドメインをバインドしているため、中国本土から直接アクセスできます。
これで、Astro フレームワークのブログで giscus コメントシステムを実装するためのすべての設定が完了しました。