Страницы на Markdown

Markdown — простой формат текста: # делает заголовок, ** — жирный шрифт, пустая строка разделяет абзацы. Astro понимает Markdown без настроек: файл .md в src/pages/ сразу становится страницей. Это удобно для текстов, которые редко меняются, например страницы «Обо мне».

Первая страница на Markdown

Удалите src/pages/about.astro и создайте вместо него src/pages/about.md:

---
title: Обо мне
---
 
# Обо мне
 
Меня зовут **Анна**, я пишу о веб-разработке.
 
- Пишу на JavaScript
- Изучаю Astro

Откройте /about — Astro превратит текст в HTML: заголовок, абзац с жирным словом и список. Блок между --- вверху — фронтматтер Markdown-файла: данные о странице в формате YAML (ключ: значение).

Макет для Markdown

Страница пока без шапки и стилей. Укажите макет в фронтматтере через ключ layout:

---
layout: ../layouts/MarkdownLayout.astro
title: Обо мне
---
 
Меня зовут **Анна**, я пишу о веб-разработке.

Путь к макету пишут относительно самого файла. Теперь создайте этот макет — src/layouts/MarkdownLayout.astro:

---
import BaseLayout from './BaseLayout.astro';
 
const { frontmatter } = Astro.props;
---
 
<BaseLayout title={frontmatter.title}>
  <h1>{frontmatter.title}</h1>
  <slot />
</BaseLayout>

Данные из фронтматтера Markdown приходят в макет в пропсе frontmatter, а готовый HTML текста вставляется в <slot />. Страница /about получила шапку, подвал и заголовок вкладки «Обо мне — Блог Анны».

Что поддерживается

Блоки кода Astro подсвечивает сам при сборке, без JavaScript в браузере.

Когда Markdown-страницы, а когда коллекции

Страница в src/pages/ подходит для одиночных текстов. Для множества однотипных записей, например статей блога, лучше коллекции содержимого: они проверяют фронтматтер и позволяют получить список всех статей. Им посвящены следующие уроки.

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

В Markdown-файле пишут фигурные скобки или компоненты, как в .astro, — например {frontmatter.title}. Обычный Markdown не выполняет выражения, и на странице появится сам текст в скобках. Для компонентов и выражений внутри текста нужен формат MDX — следующий урок.