Пропустить до содержимого
Astro Astro

Макеты

Макеты это вид Astro компонентов, используемых для создания переиспользуемых шаблонов.

Этот вид компонентов используется для предоставления страницам .astro или .md как обертку страницы (<html>, <head> и <body> теги), так и <slot /> чтобы указать, куда на странице макета следует внедрить содержимое.

Макеты часто содержат общие элементы <head> и общие UI элементы для страницы, такие как headers, панели навигации и footer.

Эти компоненты обычно расположены в директории src/layouts вашего проекта.

Пример Макета

src/layouts/MySiteLayout.astro
---
---
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Cool Astro Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">Posts</a>
      <a href="#">Contact</a>
    </nav>
    <article>
      <slot /> <!-- ваш контент будет внедрен сюда -->
    </article>
  </body>
</html>
src/pages/index.astro
---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>Мой контент, обернутый в макет!</p>
</MySiteLayout>

📚 Прочитать больше о слотах.

Markdown макеты

Макеты обычно полезны для Markdown файлов. Файлы Markdown могут использовать специальное свойство layout frontmatter, для указания какой .astro компонент использовать как макет страницы.

src/pages/posts/post-1.md
---
layout: ../../layouts/BlogPostLayout.astro
title: Пост в блоге
description: Мой первый пост в блоге!
---
Этот пост написан в формате Markdown.

Когда Markdown файл включает макет, он передает свойство frontmatter компоненту .astro, который включает frontmatter свойства и итоговый HTML вывод страницы.

src/layouts/BlogPostLayout.astro
---
const {frontmatter} = Astro.props;
---
<html>
   <!-- ... -->
  <h1>{frontmatter.title}</h1>
  <h2>Автор: {frontmatter.author}</h2>
  <slot />
   <!-- ... -->
</html>

📚 Прочитать больше о поддержке Markdown в нашем руководстве руководстве.

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

Компоненты макета необязательно должны содержать HTML-код на всю страницу. Вы можете разбить свои макеты на более мелкие компоненты, а затем повторно использовать эти компоненты для создания еще более гибких и мощных макетов в вашем проекте.

Например, общий макет для записей в блоге может отображать заголовок, дату и автора. Макет BlogPostLayout.astro может добавить этот UI на страницу, а также использовать более крупный макет для всего сайта для обработки остальной части вашей страницы.

src/layouts/BlogPostLayout.astro
---
import BaseLayout from './BaseLayout.astro'
const {frontmatter} = Astro.props;
---
<BaseLayout>
  <h1>{frontmatter.title}</h1>
  <h2>Автор: {frontmatter.author}</h2>
  <slot />
</BaseLayout>