Перейти к содержимому

Страницы

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

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

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

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

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

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

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

src/pages/index.astro
Подробнее <a href="/authors/sonali/">о Сонали</a>.

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

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

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

Чтобы избежать повторного использования HTML на каждой странице, вы можете переместить общие элементы <head> и <body> в свои собственные компоненты макета. Вы можете использовать столько макетов, сколько захотите.

src/pages/index.astro
---
import MySiteLayout from "../layouts/MySiteLayout.astro";
---
<MySiteLayout>
<p>Мой контент страницы, обёрнутый в макет!</p>
</MySiteLayout>
Подробнее о компонентах макета в Astro.

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

Файлы Markdown могут использовать специальное свойство layout в метаданных для указания компонента макета, который обернет их содержимое Markdown в полный документ страницы <html>...</html>.

src/pages/page.md
---
layout: '../layouts/MySiteLayout.astro'
title: 'Моя Markdown страница'
---
# Заголовок
Это моя страница, написанная на **Markdown.**
Подробнее о Markdown в Astro.

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

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

Это приведет к созданию страницы 404.html. Большинство сервисов развёртывания найдут и будут использовать её.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/pages/index.astro
<html>
<head>
<title>My page</title>
<script src="https://unpkg.com/htmx.org@1.9.6"
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 для фрагментной страницы должен существовать по соответствующему пути к файлу и включать экспорт, определяющий страницу как фрагментную:

src/pages/partials/clicked.astro
---
export const partial = true;
---
<div>На меня нажали!</div>

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

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