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

Страницы

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

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

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

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

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

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

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

src/pages/index.astro
Read more <a href="/authors/sonali/">about Sonali</a>.

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

src/pages/index.astro
---
---
<html lang="en">
<head>
<title>My Homepage</title>
</head>
<body>
<h1>Welcome to my website!</h1>
</body>
</html>

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

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

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

src/pages/index.astro
---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
<p>My page content, wrapped in a layout!</p>
</MySiteLayout>
Подробнее о компонентах макета в Astro.

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

Коллекции содержимого страниц в формате Markdown или MDX в src/content/ могут использоваться для динамической генерации страниц.

Макеты страниц особенно полезны для Markdown файлов. Файлы Markdown могут использовать специальное свойство layout в frontmatter для указания компонента макета, который обернет их содержимое 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. Большинство сервисов развертывания найдут и будут использовать ее.

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

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

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

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

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

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

Настройте файл в директории src/pages/, как фрагмент, добавив следующий экспорт:

src/pages/partial.astro
---
export const partial = true;
---
<li>I'm a partial!</li>

export const partial должен быть идентифицируемым статически. Он может иметь следующие значения:

  • Булево значение true.
  • Переменная окружения, использующая import.meta.env, например import.meta.env.USE_PARTIALS.

Фрагментные страницы используются для динамического обновления раздела страницы с помощью такой библиотеки, как 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>
</html>
<section>
<div id="parent-div">Target here</div>
<button hx-post="/partials/clicked/"
hx-trigger="click"
hx-target="#parent-div"
hx-swap="innerHTML"
>
Click Me!
</button>
</section>

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

src/pages/partials/clicked.astro
---
export const partial = true;
---
<div>I was clicked!</div>

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