Страницы

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

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

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

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

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

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

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

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

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

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

Например, чтобы создать ссылку на 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-документ. Если не указано явно, Astro добавит необходимое объявление <!DOCTYPE html> и содержимое <head> к любому компоненту .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 (EN), она также обрабатывает файлы MDX (.mdx).

Файлы Markdown могут использовать специальное свойство layout в метаданных для указания компонента макета, который обернет их содержимое Markdown в полный документ страницы <html>...</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 для страниц, рендерящихся по запросу (EN), создайте файл src/pages/500.astro. Эта страница недоступна для предварительно рендеренных страниц и сама не может быть предварительно отрендерена.

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

Добавлено в: [email protected]

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

`error`

Добавлено в: [email protected]

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

Тип данных пропса error может быть любым, что может повлиять на его обработку в вашем коде:

---
interface Props {
  error: unknown;
}

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

Чтобы избежать утечки конфиденциальной информации при отображении данных из пропса error, рекомендуется сначала анализировать ошибку и возвращать соответствующий контент в зависимости от типа ошибки. Например, не следует отображать стек ошибки, так как он содержит информацию о структуре вашего серверного кода.

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

Добавлено в: [email protected]

Фрагменты страниц предназначены для использования в сочетании с фронтенд-библиотекой, такой как htmx или Unpoly. Вы также можете использовать их, если вам удобно писать низкоуровневый внешний JavaScript. По этой причине они являются продвинутой функцией.

Кроме того, частичные компоненты (partials) не следует использовать, если компонент содержит изолированные стили или скрипты, так как эти элементы будут удалены из HTML-вывода. Если вам нужны изолированные стили, лучше использовать обычные (не частичные) страницы вместе с фронтенд-библиотекой, которая умеет объединять содержимое в раздел <head>.

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

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

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

Фрагменты, в сочетании с библиотекой рендеринга, предоставляют альтернативу островкам Astro и тегам <script> для создания динамического контента в Astro.

Файлы страниц, поддерживающие экспорт значения partial (EN) (например, .astro, .mdx), могут быть помечены как фрагменты.

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

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

Фрагментные страницы используются для динамического обновления раздела страницы с помощью такой библиотеки, как htmx.

В следующем примере атрибут hx-post установлен на URL фрагментной страницы. Содержимое фрагментной страницы будет использовано для обновления целевого HTML-элемента на этой странице.

<html>
  <head>
    <title>My page</title>
    <script src="https://unpkg.com/[email protected]"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></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>

Файл с расширением .astro для фрагментной страницы должен существовать по соответствующему пути к файлу и включать экспорт, определяющий страницу как фрагментную:

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

Более подробную информацию об использовании htmx см. в документации htmx.

Внести свой вклад Сообщество Sponsor