レイアウト

レイアウトは、再利用可能なページテンプレートを作成するのに便利なAstroコンポーネントの特殊なタイプです。

レイアウトコンポーネントは、慣習的に .astro または .md ページにページシェル（<html>, <head>, <body> タグ）と、レイアウト内のどこにページ内容を挿入するか指定する <slot /> を提供するために使用されています。

レイアウトは多くの場合、共通の <head> 要素や、ヘッダー、ナビゲーションバー、フッターなどのページの共通UI要素を提供します。

レイアウトコンポーネントは一般的に、プロジェクト内の src/layouts ディレクトリに配置されます。

レイアウトのサンプル

---
---
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <nav>
      <a href="#">ホーム</a>
      <a href="#">ブログ</a>
      <a href="#">お問い合わせ</a>
    </nav>
    <article>
      <slot /> <!-- ここにコンテンツが挿入されます -->
    </article>
  </body>
</html>

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>レイアウトに包まれたページのコンテンツ</p>
</MySiteLayout>

📚 スロットについてもっと学ぶ。

レイアウトの入れ子

レイアウトコンポーネントは、ページ全体に相当するHTMLを含む必要はありません。レイアウトをより小さなコンポーネントに分割し、そのコンポーネントを再利用して、プロジェクトでさらに柔軟で強力なレイアウトを作成できます。

たとえば、ブログの記事によくあるレイアウトは、タイトル、日付、作者を表示するものです。BlogPostLayout.Astroレイアウトコンポーネントは、このUIをページに追加し、さらに大きなサイト全体のレイアウトを利用して、ページの残りの部分を処理できます。

---
import BaseLayout from '../layouts/BaseLayout.astro'
const {content} = Astro.props;
---
<BaseLayout>
  <h1>{content.title}</h1>
  <h2>投稿者: {content.author}</h2>
  <slot />
</BaseLayout>

Markdownのレイアウト

ページレイアウトはとくにMarkdownファイルに対して便利です。Markdownファイルは特別な layoutというfront-matterのプロパティを使用して、MarkdownコンテンツをフルページのHTMLドキュメントで包むレイアウトコンポーネントを指定できます。

Markdownページがレイアウトを使用する場合、レイアウトにはすべてのMarkdownのfront-matterデータと最終的なHTML出力を含む、単一の content プロパティを渡します。レイアウトコンポーネントでこの content プロパティをどのように使用するかは、上記の BlogPostLayout.Astro の例を参照してください。

---
title: ブログ記事
description: 最初のブログ記事
layout: ../layouts/BlogPostLayout.astro
---
これはMarkdownで書かれた投稿です。

📚 AstroのMarkdownサポートについては、Markdownガイドで詳しく説明しています。