Компоненты .astro

Компонент Astro — файл с расширением .astro, который описывает кусок разметки: шапку сайта, карточку статьи, целую страницу. Он состоит из двух частей: фронтматтера с кодом между линиями --- и шаблона с HTML ниже. Компонент выполняется на сервере и превращается в чистый HTML.

Первый компонент

Отдельной команды для создания компонента нет. Создайте папку src/components и в ней файл src/components/Header.astro:

---
const siteName = 'Блог Анны';
---
 
<header>
  <a href="/">{siteName}</a>
</header>

В фронтматтере объявлена обычная переменная JavaScript. В шаблоне её значение вставляется через фигурные скобки — так же, как выражение в шаблонной строке.

Подключение компонента

Компонент импортируют во фронтматтере другого компонента и пишут в шаблоне как тег с большой буквы. Откройте src/pages/index.astro:

---
import Header from '../components/Header.astro';
---
 
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Блог</title>
  </head>
  <body>
    <Header />
    <h1>Статьи</h1>
  </body>
</html>

Откройте http://localhost:4321 — вверху появится ссылка «Блог Анны». Имя тега совпадает с именем, под которым компонент импортирован.

Выражения в шаблоне

В фигурных скобках можно писать любое выражение JavaScript. Списки выводят через map(), условия — через && или тернарный оператор:

---
const posts = ['Первая статья', 'Как я учу Astro', 'Заметки о CSS'];
const isEmpty = posts.length === 0;
---
 
<h1>Статьи ({posts.length})</h1>
 
{isEmpty && <p>Статей пока нет.</p>}
 
<ul>
  {posts.map((title) => <li>{title}</li>)}
</ul>

На странице будет заголовок «Статьи (3)» и список из трёх пунктов. Текст в фигурных скобках экранируется автоматически: символы < и > из строки не станут тегами.

Отличия от HTML и JSX

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

Переменные фронтматтера вычисляются один раз — при сборке страницы. В собранном сайте код const now = new Date() покажет время сборки, а не время, когда посетитель открыл страницу. Чтобы что-то менялось в браузере, нужен клиентский скрипт или остров; чтобы страница пересчитывалась на каждый запрос — режим рендеринга по запросу.