ブログのトップページに最新の記事が表示されていると、訪問者が新しい情報をすぐに見つけられて便利です。ここでは、Content Collections APIで管理しているブログ記事の中から、最新の5件をトップページ (src/pages/index.astro) に表示する手順を紹介します。
前提:
- Content Collections APIを使ってブログ記事 (
blogコレクション) を管理している。 - 各記事のMarkdownファイルのフロントマターに
pubDate(公開日) が設定されている。 - 個別記事ページへのURL生成ロジックが確立している
トップページへの新着記事一覧表示手順
1.トップページファイル (src/pages/index.astro) を開く
プロジェクトの src/pages/index.astro ファイルをエディタで開きます。これがサイトのトップページに対応するファイルです。
2.記事データの取得、ソート、件数制限
ファイルの先頭にあるフロントマター部分 (--- で囲まれたエリア) に、記事データを取得し、並び替えて、件数を絞り込むコードを追加します。
---
// src/pages/index.astro
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro'; // 適切なレイアウトを指定
// 1. 'blog'コレクションの記事をすべて取得
const allPosts = await getCollection('blog');
// 2. 公開日 (pubDate) の新しい順に記事をソート
// new Date() を使って日付として比較する
const sortedPosts = allPosts.sort((a, b) =>
b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);
// 3. 最新の5件だけを取得 (sliceを使用)
const recentPosts = sortedPosts.slice(0, 5);
// 4. 個別記事ページへのURLを生成するヘルパー関数 (前の手順で作成したものを再利用または同様のロジックを記述)
function getPostUrl(post) {
if (post.data.url) {
// フロントマターにurlがあれば、ルートからのパスを返す
return `/${post.data.url}/`;
}
// なければファイルパスに基づくデフォルトのパスを返す
return `/blog/${post.slug}/`;
}
// 他のトップページ用データなど...
const pageTitle = "ようこそ！";
---
-
getCollection('blog')で全記事を取得します。 -
sort()メソッドでpubDateを基準に降順（新しいものが先頭）に並び替えます。valueOf()またはgetTime()を使って数値として比較するのが確実です。 -
slice(0, 5)で、ソート後の配列の先頭から5件分の記事データを取り出します。 - 個別記事ページへのリンク生成用に、以前の手順で
src/pages/tags/[tag].astroやsrc/pages/blog/index.astroで使ったgetPostUrl関数（または同様のロジック）をここにも記述します。
3.記事リストの表示
フロントマター部分の下にあるHTMLテンプレート部分に、取得した recentPosts を使って記事リストを表示するコードを追加します。
---
// --- 上記のフロントマターコード ---
---
<BaseLayout title={pageTitle}>
<h1>{pageTitle}</h1>
<p>このサイトのトップページです。</p>
{/* ↓ ここから新着記事一覧を追加 */}
<h2>新着記事</h2>
<ul>
{recentPosts.map((post) => (
<li>
{/* getPostUrlヘルパーでリンク先URLを生成 */}
<a href={getPostUrl(post)}>{post.data.title}</a>
<span style="font-size: 0.8em; margin-left: 8px;">
({post.data.pubDate.toLocaleDateString()})
</span>
</li>
))}
</ul>
{/* ↑ ここまで新着記事一覧 */}
{/* 他のトップページのコンテンツ... */}
</BaseLayout>
-
recentPosts配列をmap()でループ処理します。 - 各記事 (
post) について、タイトル (post.data.title) と公開日 (post.data.pubDate) を表示します。日付はtoLocaleDateString()などで読みやすい形式に変換すると良いでしょう。 -
<a>タグのhref属性には、ステップ2で用意したgetPostUrl(post)関数を使って正しい記事ページのURLを設定します。 - ページ全体を適切なレイアウトコンポーネント (
<BaseLayout>など) で囲みます。
4.開発サーバーで確認
ターミナルで開発サーバーを起動します。
npm run dev
# または pnpm dev, yarn dev
ブラウザでサイトのトップページ (http://localhost:4321/ など) にアクセスしてください。
「新着記事」セクションが表示され、公開日の新しい順に最大5件の記事がリストアップされていれば成功です。各記事のリンクをクリックして、正しい個別記事ページに移動できるかも確認しましょう。