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

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

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

Конфигурационный файл Astro

Конфигурационный файл Astro — это JavaScript-файл, включенный в корень каждого стартового проекта:

import { defineConfig } from "astro/config";

export default defineConfig({
  // ваши настройки здесь...
});

Он обязателен только в том случае, если у вас есть что настраивать, но большинство проектов используют этот файл. Хелпер defineConfig() обеспечивает автоматический IntelliSense в вашей IDE. Здесь вы добавляете все параметры, чтобы указать Astro, как собирать и рендерить ваш проект в HTML.

Мы рекомендуем использовать формат файла .mjs или .ts. Также поддерживаются astro.config.js и astro.config.cjs.

См. справочник по конфигурации для полного обзора всех поддерживаемых опций.

Конфигурационный файл TypeScript

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

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

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

Опыт разработки

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

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

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

Типичные задачи в новом проекте

Указание домена для развертывания

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

Также вам может потребоваться настроить поведение слеша в конце URL через параметр trailingSlash.

import { defineConfig } from "astro/config";

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

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

Astro не использует конфигурационный файл для SEO или общих метаданных. Эта информация добавляется в секцию <head> страницы с помощью стандартных тегов <link> и <meta>, как в обычном HTML.

Популярный подход — создать компонент Head.astro и добавить его в общий макет.

---
import Head from "./Head.astro";
---
<html>
  <head>
    <meta charset="utf-8">
    <Head title="Заголовок страницы" />
  </head>
  <body>
    <slot />
  </body>
</html>