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

Макеты

Макеты это вид 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>