Страницы

Страницы — это файлы, расположенные в поддиректории src/pages/ вашего проекта Astro. Они отвечают за маршрутизацию, загрузку данных и общую структуру каждой страницы вашего сайта.

Поддерживаемые типы файлов

Astro поддерживает следующие типы файлов в директории src/pages/:

.astro
.md
.mdx (при установленной интеграции MDX)
.html
.js/.ts (в качестве эндпойнтов)

Маршрутизация на основе файлов

Astro использует стратегию, называемую маршрутизацией на основе файлов. Каждый файл в директории src/pages/ становится эндпойнтом на вашем сайте, путь к которому соответствует пути к файлу.

Один файл также может генерировать несколько страниц с помощью динамической маршрутизации. Это позволяет создавать страницы, даже если ваш контент находится вне папки /pages/, например в коллекции контента или внешней CMS (EN).

Узнайте больше о маршрутизации в Astro.

Ссылки между страницами

Для создания ссылок на другие страницы сайта используйте стандартные HTML-элементы <a>. В качестве значения атрибута href используйте путь относительно корня домена, а не относительный путь к файлу.

Например, чтобы сослаться на https://example.com/authors/sonali/ с любой другой страницы на example.com:

Читать подробнее <a href="/authors/sonali/">о Сонали</a>.

Страницы Astro

Страницы Astro используют расширение .astro и поддерживают те же возможности, что и компоненты Astro.

---
---
<html lang="ru">
  <head>
    <title>Моя главная страница</title>
  </head>
  <body>
    <h1>Добро пожаловать на мой сайт!</h1>
  </body>
</html>

Страница должна возвращать полный HTML-документ. Если вы явно не указали декларацию <!DOCTYPE html> и содержимое <head>, Astro автоматически добавит их для любого .astro файла в папке src/pages/. Вы можете отключить это поведение для конкретного файла, пометив его как фрагмент.

Чтобы не дублировать одни и те же HTML-элементы на каждой странице, вы можете вынести общие части <head> и <body> в свои компоненты макетов.

---
import MySiteLayout from "../layouts/MySiteLayout.astro";
---
<MySiteLayout>
  <p>Контент моей страницы, обёрнутый в макет!</p>
</MySiteLayout>

Узнайте больше о компонентах макетов в Astro.

Страницы Markdown/MDX

Astro также рассматривает любые Markdown-файлы (.md) внутри src/pages/ как страницы вашего сайта. Если установлена интеграция MDX, то же самое относится и к файлам .mdx.

В Markdown-файлах можно использовать свойство layout в блоке метаданных (frontmatter), чтобы указать компонент макета, который обернёт контент в полный HTML-документ.

---
layout: ../layouts/MySiteLayout.astro
title: Моя страница на Markdown
---
# Заголовок

Это моя страница, написанная на **Markdown.**

Узнайте больше о Markdown в Astro.

Страницы HTML

Файлы с расширением .html в папке src/pages/ также становятся страницами сайта. Однако имейте в виду, что некоторые ключевые возможности Astro не поддерживаются в HTML-компонентах.

Своя страница 404

Для создания собственной страницы ошибки 404 создайте файл 404.astro или 404.md в папке src/pages/.

В итоге будет создана страница 404.html. Большинство хостингов автоматически найдут и будут использовать её при возникновении ошибки «Страница не найдена».

Своя страница 500

Для отображения собственной страницы ошибки 500 для страниц, рендеримых по запросу, создайте файл src/pages/500.astro. Эта страница недоступна для предварительно отрендеренных страниц.

Если при рендеринге этой страницы возникнет ошибка, посетителю будет показана стандартная страница 500 вашего хостинга.

Добавлено в: astro@4.10.3

В режиме разработки, если у вас есть файл 500.astro, возникающие ошибки будут выводиться в терминал, а не отображаться в оверлее ошибок браузера.

`error`

Добавлено в: astro@4.11.0

src/pages/500.astro — это специальная страница, которая автоматически получает пропс error при возникновении любой ошибки рендеринга. Это позволяет использовать детали ошибки (например, из другой страницы или мидлвара) для вывода информации пользователю.

Тип данных пропса error может быть любым:

---
interface Props {
  error: unknown;
}

const { error } = Astro.props;
---
<div>{error instanceof Error ? error.message : "Неизвестная ошибка"}</div>

Будьте осторожны с выводом информации из пропса error, чтобы не раскрыть чувствительные данные сервера. Например, не стоит выводить стек вызовов (stack trace), так как он содержит информацию о структуре вашего кода на сервере.

Фрагменты страниц

Добавлено в: astro@3.4.0

Фрагменты — это компоненты страниц в папке src/pages/, которые не должны рендериться как полные страницы.

Как и обычные компоненты, эти файлы не включают автоматически декларацию <!DOCTYPE html> и содержимое <head>.

Однако, поскольку они находятся в папке src/pages/, их сгенерированный HTML доступен по URL. Это позволяет библиотекам (например, htmx, Stimulus, jQuery) динамически подгружать части HTML на страницу без её перезагрузки.

Фрагменты — это альтернатива островкам Astro и тегам <script> для создания динамического контента.

Пометить страницу как фрагмент можно с помощью экспорта partial:

---
export const partial = true;
---
<li>Я — фрагмент!</li>

Использование с библиотеками

Пример ниже показывает использование атрибута hx-post (библиотека htmx) с URL фрагмента. Контент из фрагмента будет использован для обновления целевого элемента на странице.

<html>
  <head>
    <title>Моя страница</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"></script>
  </head>
  <body>
    <section>
      <div id="parent-div">Цель обновления</div>

      <button hx-post="/partials/clicked/"
        hx-trigger="click"
        hx-target="#parent-div"
        hx-swap="innerHTML"
      >
        Нажми на меня!
      </button>
    </section>
  </body>
</html>

Соответствующий фрагмент:

---
export const partial = true;
---
<div>На меня нажали!</div>

Подробности смотрите в документации htmx.