Макеты и слоты

Макет (layout) — компонент с общей разметкой всех страниц: <html>, <head>, шапкой и подвалом. Страница передаёт в макет только своё содержимое. Место, куда оно попадёт, обозначает тег <slot /> — слот.

Макет

Создайте папку src/layouts и файл src/layouts/BaseLayout.astro:

---
import Header from '../components/Header.astro';
 
interface Props {
  title: string;
}
 
const { title } = Astro.props;
---
 
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title} — Блог Анны</title>
  </head>
  <body>
    <Header />
    <main>
      <slot />
    </main>
    <footer>Блог Анны, 2025</footer>
  </body>
</html>

Это обычный компонент с пропсом title. Тег <slot /> — место, куда Astro вставит всё, что страница напишет между открывающим и закрывающим тегом макета.

Страница в макете

Перепишите src/pages/about.astro:

---
import BaseLayout from '../layouts/BaseLayout.astro';
---
 
<BaseLayout title="Обо мне">
  <h1>Обо мне</h1>
  <p>Меня зовут Анна, я пишу о веб-разработке.</p>
</BaseLayout>

Откройте /about: у страницы появились шапка, подвал и заголовок вкладки «Обо мне — Блог Анны». Заголовок и абзац встали на место <slot />. Так же оберните index.astro и posts/index.astro — повторять <head> в каждой странице больше не нужно.

Именованные слоты

Иногда содержимое нужно вставить в несколько мест. Слоту дают имя, а страница помечает элемент атрибутом slot. Добавьте в макет боковую колонку:

<main>
  <slot />
</main>
<aside>
  <slot name="sidebar">
    <p>Подпишитесь на RSS.</p>
  </slot>
</aside>

Текст внутри <slot name="sidebar"> — запасное содержимое: оно показывается, если страница ничего не передала. Страница заполняет слот так:

<BaseLayout title="Статьи">
  <h1>Статьи</h1>
  <nav slot="sidebar">
    <a href="/tags/astro">astro</a>
  </nav>
</BaseLayout>

Список статей попадёт в <main>, а навигация по тегам — в <aside>.

Вложенные макеты

Макет может использовать другой макет. Например, src/layouts/PostLayout.astro оборачивает статью в BaseLayout и добавляет дату и автора. Так у статей будет своё оформление, а шапка и подвал останутся общими.

Частая ошибка

В макете забывают написать <slot />. Страница открывается с шапкой и подвалом, но её собственное содержимое пропадает без всякой ошибки. Если страница внезапно «опустела», первым делом проверьте слот в макете.