| type | title | description | i18nReady |
|---|---|---|---|
tutorial |
ブログ記事一覧を作成する |
「初めてのAstroブログ」チュートリアル -
Astro.glob()を使用してプロジェクト内にあるファイルのデータにアクセスする |
true |
import Box from '/components/tutorial/Box.astro';
import Checklist from '/components/Checklist.astro';
import MultipleChoice from '/components/tutorial/MultipleChoice.astro';
import Option from '/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
リンクしたいブログ記事がいくつかできたので、そのリストを自動的に作成するようブログページを設定しましょう！
- `Astro.glob()`を使ってすべての投稿のデータに一度にアクセスする - 動的に生成された記事のリストをブログページに表示する - リストの各項目に``コンポーネントを使用するようリファクタリングする 1. 以下のコードを`blog.astro`に追加して、すべてのMarkdownファイルに関する情報を取得します。`Astro.glob()`は、各ブログ記事に対応するオブジェクトの配列を返します。```astro title="src/pages/blog.astro" ins={3}
---
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>手順を表示
1. `src/components/`に新しいコンポーネントを作成します。<details>
<summary>ファイル名を表示</summary>
```
BlogPost.astro
```
</details>
-
Astro.propsとしてtitleとurlを受け取ることができるよう、コンポーネントにコードを記述します。コードを表示
```astro --- // src/components/BlogPost.astro const { title, url } = Astro.props; --- ``` -
ブログ記事のリストの各項目を作成するために必要なテンプレートを追加します。
コードを表示
```astro- {title}
``` -
ブログページに新しいコンポーネントをインポートします。
コードを表示
```astro title="src/pages/blog.astro" ins={3} --- import BaseLayout from '../layouts/BaseLayout.astro'; import BlogPost from '../components/BlogPost.astro'; const allPosts = await Astro.glob('../pages/posts/*.md'); const pageTitle = "私のAstro学習ブログ"; --- ``` -
完成したコンポーネントのコードを確認します。
コードを表示
```astro title="src/components/BlogPost.astro" --- const { title, url } = Astro.props ---- {title}
``` ```astro title="src/pages/blog.astro" ins={3,10} --- import BaseLayout from '../layouts/BaseLayout.astro'; import BlogPost from '../components/BlogPost.astro'; const allPosts = await Astro.glob('../pages/posts/*.md'); const pageTitle = "私のAstro学習ブログ" ---ここには、私がAstroを学んでいく旅の様子を投稿します。
-
{allPosts.map((post) => )}
Astroコンポーネントに以下のコードが含まれているとします。
---
const myPosts = await Astro.glob('../pages/posts/*.md');
---以下の選択肢の中から、指定された要素を表わすコードを選択してください。
- [ ] ローカルファイルのデータを取得できる。 - [ ] ブログ記事のリストを表示できる。