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

Страницы

Страницы - это файлы, расположенные в директории 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 страницы используют расширение файла .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-документ. Если не указано явно, 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.

Markdown/MDX Страницы

Заголовок раздела Markdown/MDX Страницы

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

Заголовок раздела Страницы HTML

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

Пользовательская страница ошибки 404

Заголовок раздела Пользовательская страница ошибки 404

Для создания пользовательской страницы ошибки 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.