コンテンツにスキップ
Astro Astro

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

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

ここで学ぶことは…

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

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

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

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

チェックリスト

参考