Страницы

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

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

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

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

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

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

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

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

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

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

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

Read more <a href="/authors/sonali/">about Sonali</a>.

Astro Страницы

Astro страницы используют расширение файла .astro и поддерживают те же функции, что и компоненты 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> в свои собственные компоненты макета. Вы можете использовать столько макетов, сколько захотите.

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>My page content, wrapped in a layout!</p>
</MySiteLayout>

Подробнее о компонентах макета в Astro.

Markdown/MDX Страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

---
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-элемента на этой странице.

<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 для фрагментной страницы должен существовать по соответствующему пути к файлу и включать экспорт, определяющий страницу как фрагментную:

---
export const partial = true;
---
<div>I was clicked!</div>

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

Внести свой вклад

Сообщество