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

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 также поддерживается.

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

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

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

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

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

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

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

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

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

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

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

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

Для генерации sitemap и канонических 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 - создание .astro компонента <Head />, который можно добавить в общий компонент макета, чтобы он применялся ко всем вашим страницам.

---
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 />

Внести свой вклад Сообщество Поддержать