AstroコンテンツコレクションのLP作例｜インタラクティブブログUI

このインタラクティブなブログエクスプローラーは、Astroコンテンツコレクションを使用してマークダウンコンテンツを整理・表示する方法を実演しています。実際のAstroプロジェクトで実装する方法と同様に、カテゴリー別フィルタリングと検索機能をリアルタイムで行う例を示しています。

実際のAstroプロジェクトでは、Content Collections APIを使用してマークダウンファイルを取得し、Zodスキーマでフロントマターを検証し、静的HTMLとしてレンダリングします。このデモでは、フィルタリングロジックを示すためにJavaScriptでその動作をシミュレートしています。

実演されている主な機能：

• カテゴリー別フィルタリング
• リアルタイム検索機能
• レスポンシブグリッドレイアウト
• 投稿メタデータの表示（日付、カテゴリー）
• インタラクティブなホバー効果

Astroでこれを実装するには、コンテンツコレクションディレクトリを作成し、コンテンツスキーマを定義し、Astroの組み込みメソッドを使用してコンテンツを取得・レンダリングします。