Макеты
Макеты - это компоненты Astro, которые определяют структуру пользовательского интерфейса(UI), например, шаблоны страниц.
Мы условно используем термин “макет” для компонентов Astro, которые создают общие элементы UI, такие как заголовки, панели навигации и нижние колонтитулы, используемые на разных страницах. Типичный компонент макета Astro используется для предоставления страницам Astro, Markdown или MDX следующего:
- оболочки страницы (теги
<html>
,<head>
и<body>
) <slot />
, чтобы указать, куда должно быть вставлено содержимое отдельной страницы.
Но в макетном компоненте нет ничего особенного! Они могут принимать свойства и импортировать и использовать другие компоненты, как и любой другой компонент Astro. Они могут включать в себя компоненты UI-фреймворков и скрипты на стороне клиента. Они даже не обязательно должны предоставлять полную оболочку страницы, вместо этого их можно использовать как частичные шаблоны пользовательского интерфейса.
Компоненты макета обычно помещаются в раздел src/layouts
в вашем проекте для организации, но это не является обязательным; вы можете выбрать местоположение по своему усмотрению. Вы даже можете поместить компоненты макета рядом со своими страницами, добавив префикс _
к именам макетов.
Пример Макета
Заголовок раздела Пример МакетаMarkdown/MDX макеты
Заголовок раздела Markdown/MDX макетыМакеты страниц особенно полезны для Markdown и MDX файлов, которые иначе не имели бы какого-либо форматирования.
Astro предоставляет специальное свойство layout
frontmatter, чтобы указать, какой компонент .astro
использовать в качестве макета страницы.
Типичный макет для страниц Markdown или MDX включает в себя:
- Свойство
frontmatter
для доступа к frontmatter и другим данным страницы Markdown или MDX. - Cтандартный
<slot />
для указания места, где должно быть отображено содержимое страницы в формате Markdown/MDX.
Вы можете установить тип входных параметров компонента макета с помощью вспомогательных функций MarkdownLayoutProps
или MDXLayoutProps
:
Свойства макета Markdown
Заголовок раздела Свойства макета MarkdownМакет Markdown/MDX будет иметь доступ к следующей информации через Astro.props
:
file
- Абсолютный путь этого файла (например,/home/user/projects/.../file.md
).url
- Если это страница, то URL страницы (например,/en/guides/markdown-content
).frontmatter
- Вся мета-информация из документа Markdown или MDX.frontmatter.file
- То же, что и свойство верхнего уровняfile
.frontmatter.url
- То же, что и свойство верхнего уровняurl
.
headings
- Список заголовков (h1 -> h6
) в документе Markdown или MDX с соответствующими метаданными. Этот список следует типу:{ depth: number; slug: string; text: string }[]
.- (Только для Markdown)
rawContent()
- Функция, возвращающая необработанный документ Markdown в виде строки. - (Только для Markdown)
compiledContent()
- Функция, возвращающая документ Markdown, скомпилированный в HTML-строку.
Пример записи блога в формате Markdown может передавать в макет следующий объект Astro.props
:
Макет Markdown/MDX будет иметь доступ ко всем экспортированным свойствам своего файла из Astro.props
с некоторыми ключевыми отличиями:.
-
Информация о заголовках (т.е. элементы
h1 -> h6
) доступна через массивheadings
, а не через функциюgetHeadings()
. -
file
иurl
также *доступны как вложенные свойстваfrontmatter
(т.е.frontmatter.url
иfrontmatter.file
). -
Значения, определенные вне frontmatter (например, операторы
export
в MDX), недоступны. Вместо этого рассмотрите импорт макета.
Импорт макетов вручную (MDX)
Заголовок раздела Импорт макетов вручную (MDX)Вам может понадобиться передать в MDX макет информацию, которая не существует (или не может существовать) в frontmatter. В этом случае вы можете импортировать и использовать компонент <Layout />
и передавать ему входные параметры, как любому другому компоненту:
Затем ваши значения будут доступны вам через Astro.props
в вашем макете, и ваш MDX-контент будет внедрен на страницу, где прописан ваш компонент <slot />
:
Использование одного макета для .md
, .mdx
и .astro
Заголовок раздела Использование одного макета для .md, .mdx и .astroМожно написать один макет Astro, который будет принимать объект frontmatter
из файлов .md
и .mdx
, а также любые именованные входные параметры, передаваемые из файлов .astro
.
В приведенном ниже примере макет будет отображать заголовок страницы либо из свойства title
в frontmatter YAML, либо из атрибута title
, переданного компонентом Astro:
Вложенные макеты
Заголовок раздела Вложенные макетыКомпоненты макета не обязательно должны содержать целую страницу HTML. Вы можете разбить свои макеты на более мелкие компоненты и комбинировать их, чтобы создавать еще более гибкие шаблоны страниц. Этот шаблон полезен, когда вы хотите совместно использовать некоторый код в нескольких макетах.
Например, макет компонента BlogPostLayout.astro может стилизовать заголовок, дату и автора статьи. Затем, глобальный макет BaseLayout.astro
может обрабатывать остальную часть вашего шаблона страницы, такую как навигация, нижние колонтитулы, мета-теги SEO, глобальные стили и шрифты. Вы также можете передавать входные параметры, полученные из вашей статьи, в другой макет, так же как и любой другой вложенный компонент.