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

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

ここで学ぶことは…

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

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

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

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

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

---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
  <h1>{frontmatter.title}</h1>
  <p>{frontmatter.pubDate.toString().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>

http://localhost:4321/posts/post-1をブラウザのプレビューで確認します。コンテンツは現在、以下によってレンダリングされています。
- スタイル、ナビゲーションリンク、ソーシャルフッターを含むメインのページレイアウト
- 記事の説明文、日付、タイトル、画像などのフロントマタープロパティを含むブログ記事レイアウト
- この記事に表示されるテキストのみを含む個別のブログ記事のMarkdownコンテンツ

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

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

<BaseLayout pageTitle={frontmatter.title}>
  <h1>{frontmatter.title}</h1>
  <p>{frontmatter.pubDate.toString().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>

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

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

各ブログ記事は同じページテンプレートを表示しており、欠けているコンテンツはない。(ブログ記事のコンテンツが欠落している場合は、記事のフロントマタープロパティを確認してください。)
ページにコンテンツが重複していない。(2回レンダリングされているコンテンツがある場合は、MarkdownPostLayout.astroから削除してください。)

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

確認テスト

あるレイアウトを別のレイアウトの中に入れ子にし、個々のパーツを組み合わせることを可能にするのは以下のどれですか？
1. 継続的デプロイ
2. レスポンシブデザイン
3. コンポーネントベースの設計
Markdownページを含むプロジェクトでは複数のレイアウトが特に有用です。これに当てはまるのは以下のどれですか？
1. ブログ
2. ダッシュボード
3. チャットアプリ
各ページ共通のテンプレートは以下のどれですか？
1. index.astro
2. BaseLayout.astro
3. post-1.md