レイアウトを組み合わせ、両方の長所を活かす

各ブログ記事にレイアウトを追加したところで、記事の見た目をサイトの他のページに近づけてみましょう！

ここで学ぶことは…

• メインのページレイアウトの中にブログ記事レイアウトを入れ子にする

2つのレイアウトを入れ子にする

セクションタイトル： 2つのレイアウトを入れ子にする

ページ全体のレイアウトを定義するためのBaseLayout.astroはすでにあります。

一方MarkdownPostLayout.astroは、titleやdateなど、ブログ記事共通のプロパティに対応するテンプレートを提供しますが、ブログ記事ページはサイトの他のページとは異なる見た目になってしまっています。レイアウトを入れ子にすることで、ブログ記事の見た目をサイトの他のページに合わせてみましょう。

1. src/layouts/MarkdownPostLayout.astroにBaseLayout.astroをインポートし、テンプレートのコンテンツ全体を包みます。pageTitlepropを渡すのを忘れないでください。

   src/layouts/MarkdownPostLayout.astro

   ---
   import BaseLayout from './BaseLayout.astro';
   const { frontmatter } = Astro.props;
   ---
   <BaseLayout pageTitle={frontmatter.title}>
     <h1>{frontmatter.title}</h1>
     <p>{frontmatter.pubDate.slice(0,10)}</p>
     <p><em>{frontmatter.description}</em></p>
     <p>著者: {frontmatter.author}</p>
     <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
     <slot />
   </BaseLayout>

2. http://localhost:4321/posts/post-1をブラウザのプレビューで確認します。コンテンツは現在、以下によってレンダリングされています。

   • スタイル、ナビゲーションリンク、ソーシャルフッターを含むメインのページレイアウト
   • 記事の説明文、日付、タイトル、画像などのフロントマタープロパティを含むブログ記事レイアウト
   • この記事に表示されるテキストのみを含む個別のブログ記事のMarkdownコンテンツ

3. ページタイトルが各レイアウトで1回ずつ、合計2回表示されていることに注意してください。

   MarkdownPostLayout.astroからページタイトルを表示する行を削除します。

   src/layouts/MarkdownPostLayout.astro

   <BaseLayout pageTitle={frontmatter.title}>
     <h1>{frontmatter.title}</h1>
     <p>{frontmatter.pubDate.slice(0,10)}</p>
     <p><em>{frontmatter.description}</em></p>
     <p>著者: {frontmatter.author}</p>
     <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
     <slot />
   </BaseLayout>

4. http://localhost:4321/posts/post-1をブラウザのプレビューで再度確認し、上で削除した行が表示されなくなり、タイトルが1回だけ表示されていることを確認します。コンテンツが重複しないよう、必要に応じて他の調整をおこなってください。

以下のことを確認してください。

• 各ブログ記事は同じページテンプレートを表示しており、欠けているコンテンツはない。(ブログ記事のコンテンツが欠落している場合は、記事のフロントマタープロパティを確認してください。)

• ページにコンテンツが重複していない。(2回レンダリングされているコンテンツがある場合は、MarkdownPostLayout.astroから削除してください。)

なお、好みに合わせてページテンプレートをカスタマイズしても構いません。

確認テスト

セクションタイトル： 確認テスト

1. あるレイアウトを別のレイアウトの中に入れ子にし、個々のパーツを組み合わせることを可能にするのは以下のどれですか？

   1. 継続的デプロイ

   2. レスポンシブデザイン

   3. コンポーネントベースの設計

   確認する

2. Markdownページを含むプロジェクトでは複数のレイアウトが特に有用です。これに当てはまるのは以下のどれですか？

   1. ブログ

   2. ダッシュボード

   3. チャットアプリ

   確認する

3. 各ページ共通のテンプレートは以下のどれですか？

   1. index.astro

   2. BaseLayout.astro

   3. post-1.md

   確認する

チェックリスト

セクションタイトル： チェックリスト

• 重複した要素に注意しながら、レイアウトを入れ子にすることができる。

参考

セクションタイトル： 参考

• Astroにおけるレイアウトの入れ子