ブログ記事一覧を作成する
リンクしたいブログ記事がいくつかできたので、そのリストを自動的に作成するようブログページを設定しましょう!
ここで学ぶことは…
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コードに置き換えます。src/pages/blog.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.astrotitle: 私の4番目のブログ記事author: Astro学習者description: "この記事単独で表示されます!"image: url: "https://docs.astro.build/default-og-image.png" alt: "惑星と星のイラストの中に「astro」という単語があります。"pubDate: 2022-08-08tags: ["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> -
ブログページに新しいコンポーネントをインポートします。
コードを表示
src/pages/blog.astro ---import BaseLayout from '../layouts/BaseLayout.astro';import BlogPost from '../components/BlogPost.astro';const allPosts = await Astro.glob('../pages/posts/*.md');const pageTitle = "私のAstro学習ブログ";--- -
完成したコンポーネントのコードを確認します。
コードを表示
src/components/BlogPost.astro ---const { title, url } = Astro.props---<li><a href={url}>{title}</a></li>src/pages/blog.astro ---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番目のブログ記事のタイトル。
-
最初のブログ記事のURLへのリンク。
-
各記事の最終更新日を表示するコンポーネント。