ブログ記事一覧を作成する

リンクしたいブログ記事がいくつかできたので、そのリストを自動的に作成するようブログページを設定しましょう！

ここで学ぶことは…

Astro.glob()を使ってすべての投稿のデータに一度にアクセスする
動的に生成された記事のリストをブログページに表示する
リストの各項目に<BlogPost />コンポーネントを使用するようリファクタリングする

記事のリストを動的に表示する

以下のコードをblog.astroに追加して、すべてのMarkdownファイルに関する情報を取得します。Astro.glob()は、各ブログ記事に対応するオブジェクトの配列を返します。

---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "私のAstro学習ブログ";
---
<BaseLayout pageTitle={pageTitle}>
  <p>ここには、私がAstroを学んでいく旅の様子を投稿します。</p>
  <ul>
    <li><a href="/posts/post-1/">Post 1</a></li>
    <li><a href="/posts/post-2/">Post 2</a></li>
    <li><a href="/posts/post-3/">Post 3</a></li>
  </ul>
</BaseLayout>

記事のタイトルとURLを使用して記事のリストを動的に生成するには、個々の<li>タグを次のAstroコードに置き換えます。

---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "私のAstro学習ブログ";
---
<BaseLayout pageTitle={pageTitle}>
  <p>ここには、私がAstroを学んでいく旅の様子を投稿します。</p>
  <ul>
    <li><a href="/posts/post-1/">Post 1</a></li>
    <li><a href="/posts/post-2/">Post 2</a></li>
    <li><a href="/posts/post-3/">Post 3</a></li>

    {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  </ul>
</BaseLayout>

Astro.glob()によって返される配列をマップすることで、ブログ記事のリスト全体が動的に生成されるようになりました。

src/pages/posts/に新しくpost-4.mdファイルを作成し、Markdownコンテンツを追加して新しいブログ記事を追加します。以下で使用されているフロントマターのプロパティを少なくとも含めるようにしてください。

---
layout: ../../layouts/MarkdownPostLayout.astro
title: 私の4番目のブログ記事
author: Astro学習者
description: "この記事単独で表示されます！"
image:
  url: "https://docs.astro.build/default-og-image.png"
  alt: "惑星と星のイラストの中にastroという単語があります。"
pubDate: 2022-08-08
tags: ["astro", "成功"]
---
記事のリストを作成するために`Astro.glob()`がすべての記事データのリストを返しているので、この記事は他のブログ記事と一緒に表示されるはずです。

ブラウザのプレビューでhttp://localhost:4321/blogのブログページに再度アクセスし、新しいブログ記事を含む4つの項目のリストへと更新されているのを確認してください。

チャレンジ: ブログポストコンポーネントを作成する

以下のコードによりブログ記事のリストが生成されるよう、必要な変更をAstroプロジェクトに加えてみましょう。

<ul>
  {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>

手順を表示

src/components/に新しいコンポーネントを作成します。
ファイル名を表示
```
BlogPost.astro
```
Astro.propsとしてtitleとurlを受け取ることができるよう、コンポーネントにコードを記述します。
コードを表示
src/components/BlogPost.astro
```
---
const { title, url } = Astro.props;
---
```
ブログ記事のリストの各項目を作成するために必要なテンプレートを追加します。
コードを表示
src/components/BlogPost.astro
```
<li><a href={url}>{title}</a></li>
```

ブログページに新しいコンポーネントをインポートします。

コードを表示

---
import BaseLayout from '../layouts/BaseLayout.astro';
import BlogPost from '../components/BlogPost.astro';
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "私のAstro学習ブログ";
---

完成したコンポーネントのコードを確認します。

コードを表示

---
const { title, url } = Astro.props
---
<li><a href={url}>{title}</a></li>

---
import BaseLayout from '../layouts/BaseLayout.astro';
import BlogPost from '../components/BlogPost.astro';
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "私のAstro学習ブログ"
---
<BaseLayout pageTitle={pageTitle}>
  <p>ここには、私がAstroを学んでいく旅の様子を投稿します。</p>
  <ul>
    {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
  </ul>
</BaseLayout>

確認テスト

Astroコンポーネントに以下のコードが含まれているとします。

---
const myPosts = await Astro.glob('../pages/posts/*.md');
---

以下の選択肢の中から、指定された要素を表わすコードを選択してください。

3番目のブログ記事のタイトル。
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>初めての投稿！！</a>
最初のブログ記事のURLへのリンク。
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>初めての投稿！！</a>
各記事の最終更新日を表示するコンポーネント。
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>初めての投稿！！</a>

チェックリスト

ローカルファイルのデータを取得できる。
ブログ記事のリストを表示できる。

参考

Astro.glob() APIドキュメント