Обзор конфигурации

Astro — это гибкий и не диктующий своих правил фреймворк, который позволяет настраивать ваш проект множеством способов. Это означает, что начало работы над новым проектом может показаться сложным: не существует «единственно правильного способа» настроить проект на Astro!

Руководства в этом разделе «Конфигурация» помогут вам разобраться в различных файлах, которые позволяют настраивать и кастомизировать аспекты вашего проекта и среды разработки.

Если это ваш первый проект на Astro или прошло много времени с момента создания нового проекта, воспользуйтесь следующими руководствами и справочными материалами в документации.

Файл конфигурации Astro

Файл конфигурации Astro (EN) — это JavaScript-файл, который находится в корневой директории каждого стартового проекта:

import { defineConfig } from "astro/config";

export default defineConfig({
  // ваши параметры конфигурации...
});

Этот файл требуется только в том случае, если вам нужно что-то настроить, однако большинство проектов его используют. Вспомогательная функция defineConfig() обеспечивает автоматическое отслеживание IntelliSense в вашей IDE и служит местом, куда вы добавляете все параметры конфигурации, чтобы указать Astro, как собирать и рендерить ваш проект в HTML.

Мы рекомендуем в большинстве случаев использовать формат файла по умолчанию .mjs или .ts, если вы хотите писать TypeScript в конфигурационном файле. Однако также поддерживаются форматы astro.config.js и astro.config.cjs.

Ознакомьтесь со справочником по конфигурации Astro (EN), чтобы получить полный обзор всех поддерживаемых параметров конфигурации.

Файл конфигурации TypeScript

Каждый стартовый проект Astro включает файл tsconfig.json. Скрипты компонентов Astro используют TypeScript, что обеспечивает работу инструментов редактора и позволяет вам при необходимости добавить проверку типов для вашего кода.

Используйте файл tsconfig.json для настройки шаблона TypeScript, который будет выполнять проверку типов вашего кода, настройки плагинов TypeScript, создания алиасов импорта и других задач.

Подробнее о возможностях TypeScript и встроенных утилитах типов Astro читайте в руководстве по TypeScript.

Окружение разработки

Во время работы в режиме разработки вы можете использовать возможности вашего редактора кода и других инструментов для улучшения процесса работы с Astro.

Astro предоставляет собственное официальное расширение для VS Code и совместим с другими популярными инструментами для разработчиков. Также Astro включает настраиваемую панель инструментов, которая отображается в браузерном просмотре при запущенном сервере разработки. Вы можете устанавливать и даже создавать собственные приложения для этой панели, если потребуется.

Узнайте, как настроить окружение разработки, из руководств по настройке редактора и использованию панели разработчика.

Типичные задачи для нового проекта

Вот несколько первых шагов, которые вы можете выполнить при создании нового проекта на Astro.

Добавление домена для развёртывания

Для генерации карты сайта и создания канонических URL-адресов укажите URL вашего сайта в параметре site (EN). Если проект разворачивается в подкаталог (например, www.example.com/docs), вы также можете указать base (EN) для корневой директории проекта.

Кроме того, разные хостинги могут по-разному обрабатывать слеши в конце URL (например, example.com/about и example.com/about/). После развёртывания сайта вам может потребоваться настроить предпочтения для параметра trailingSlash (EN).

import { defineConfig } from "astro/config";

export default defineConfig({
  site: "https://www.example.com",
  base: "/docs",
  trailingSlash: "always",
});

Добавление метаданных сайта

Astro не использует конфигурационный файл для стандартных SEO-настроек или метаданных — только для информации, необходимой для сборки проекта и его рендеринга в HTML.

Вместо этого данная информация добавляется в раздел <head> ваших страниц через HTML-теги <link> и <meta>, как в обычных HTML-документах.

Типичный подход в Astro — создание компонента <Head /> (файл .astro), который можно добавить в общий компонент макета, чтобы он применялся ко всем страницам.

---
import Head from "./Head.astro";

const { ...props } = Astro.props;
---
<html>
  <head>
    <meta charset="utf-8">
    <Head />
    <!-- Дополнительные элементы head -->
  </head>
  <body>
    <!-- Содержание страницы -->
  </body>
</html>

Поскольку Head.astro — это обычный компонент Astro, вы можете импортировать файлы и принимать пропсы, передаваемые из других компонентов (например, заголовок конкретной страницы).

---
import Favicon from "../assets/Favicon.astro";
import SomeOtherTags from "./SomeOtherTags.astro";

const { title = "Мой сайт Astro", ...props } = Astro.props;
---
<link rel="sitemap" href="/sitemap-index.xml">
<title>{title}</title>
<meta name="description" content="Добро пожаловать на мой новый сайт Astro!">

<!-- Веб-аналитика -->
<script data-goatcounter="https://my-account.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

<!-- Теги Open Graph -->
<meta property="og:title" content="Мой новый сайт Astro" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:description" content="Добро пожаловать на мой новый сайт Astro!" />
<meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp">
<meta property="og:image:alt" content="">

<SomeOtherTags />

<Favicon />

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