diff --git a/src/content/docs/ru/guides/configuring-astro.mdx b/src/content/docs/ru/guides/configuring-astro.mdx new file mode 100644 index 0000000000000..5a7dec34f1f58 --- /dev/null +++ b/src/content/docs/ru/guides/configuring-astro.mdx @@ -0,0 +1,122 @@ +--- +title: Обзор конфигурации +description: Узнайте, как можно настроить ваш новый проект и процесс разработки. +i18nReady: true +--- +import ReadMore from '~/components/ReadMore.astro' + +Astro — это гибкий и не навязывающий своего мнения фреймворк, который позволяет конфигурировать ваш проект самыми разными способами. Это означает, что начало работы над новым проектом может показаться сложным: не существует "единственно верного способа" настройки проекта на Astro! + +Руководства в этом разделе помогут вам ознакомиться с различными файлами, которые позволяют настраивать и адаптировать аспекты вашего проекта и среды разработки. + +Если это ваш первый проект на Astro или вы давно не создавали новых проектов, воспользуйтесь приведёнными ниже руководствами и справочной информацией в документации. + +## Файл конфигурации Astro + +[Файл конфигурации Astro](/ru/reference/configuration-reference/) - это JavaScript-файл, включённый в корень каждого стартового проекта: + +```js +// astro.config.mjs +import { defineConfig } from "astro/config"; + +export default defineConfig({ + // ваши параметры конфигурации здесь... +}); +``` + +Он требуется только в том случае, если вам нужно что-то настроить, но большинство проектов всё же используют этот файл. Вспомогательная функция `defineConfig()` обеспечивает автоматическую поддержку IntelliSense в вашей IDE и является местом, куда вы будете добавлять все параметры конфигурации, чтобы указать Astro, как собирать и рендерить ваш проект в HTML. + +Мы рекомендуем в большинстве случаев использовать формат файла по умолчанию `.mjs` или `.ts`, если вы хотите писать на TypeScript в своём файле конфигурации. Однако `astro.config.js` также поддерживается. + +Ознакомьтесь со [справочником по конфигурации](/ru/reference/configuration-reference/) Astro для получения полного обзора всех поддерживаемых параметров настройки. + +## Файл конфигурации TypeScript + +Каждый стартовый проект Astro включает файл `tsconfig.json`. [Скрипт компонента](/ru/basics/astro-components/#скрипт-компонента) Astro написан на TypeScript, что обеспечивает инструментарий редактора Astro и позволяет при необходимости добавлять синтаксис в ваш JavaScript для проверки типов кода вашего собственного проекта. + +Используйте файл `tsconfig.json` для настройки шаблона TypeScript, который будет выполнять проверку типов вашего кода, настраивать плагины TypeScript, задавать алиасы для импортов и многое другое. + +Ознакомьтесь с [руководством по TypeScript](/ru/guides/typescript/) для получения полного обзора параметров TypeScript и встроенных служебных типов Astro. + +## Опыт разработки + +Во время работы в режиме разработки вы можете использовать возможности вашего редактора кода и другие инструменты для улучшения опыта разработки на Astro. + +Astro предоставляет собственное официальное расширение для VS Code и совместим с рядом других популярных инструментов для редакторов. Astro также предоставляет настраиваемую панель инструментов, которая отображается в предварительном просмотре в браузере во время работы dev-сервера. Вы можете устанавливать и даже создавать свои собственные приложения для панели инструментов для дополнительной функциональности. + +Ознакомьтесь с руководствами Astro по [параметрам настройки редактора](/ru/editor-setup/) и [использованию панели разработчика](/ru/guides/dev-toolbar/), чтобы узнать, как настроить свою рабочую среду. + +## Типичные задачи в новом проекте + +Вот несколько первых шагов, которые вы можете предпринять в новом проекте на Astro. + +### Добавление домена для развёртывания + +Для генерации sitemap и канонических URL-адресов настройте URL вашего развёртывания в параметре [`site`](/ru/reference/configuration-reference/#site). Если вы развёртываете по определённому пути (например, `www.example.com/docs`), вы также можете указать [`base`](/ru/reference/configuration-reference/#base) для корня вашего проекта. + +Кроме того, разные хостинги могут иметь разное поведение в отношении завершающих слэшей в конце ваших URL-адресов (например, `example.com/about` и `example.com/about/`). После того как ваш сайт будет развёрнут, вам, возможно, потребуется настроить параметр [`trailingSlash`](/ru/reference/configuration-reference/#trailingslash). + +```js title="astro.config.mjs" +import { defineConfig } from "astro/config"; + +export default defineConfig({ + site: "https://www.example.com", + base: "/docs", + trailingSlash: "always", +}); +``` + +### Добавление метаданных сайта + +Astro не использует свой файл конфигурации для общих SEO-данных или метаданных, а только для информации, необходимой для сборки кода проекта и его рендеринга в HTML. + +Вместо этого такая информация добавляется в секцию `` вашей страницы с использованием стандартных HTML-тегов `` и ``, как если бы вы писали обычные HTML-страницы. + +Один из распространённых паттернов для сайтов на Astro - создание [`.astro` компонента](/ru/basics/astro-components/) ``, который можно добавить в общий [компонент макета](/ru/basics/layouts/), чтобы он применялся ко всем вашим страницам. + +```astro title="src/components/MainLayout.astro" +--- +import Head from "./Head.astro"; + +const { ...props } = Astro.props; +--- + + + + + + + + + + +``` + +Поскольку `Head.astro` - обычный компонент Astro, вы можете импортировать файлы и получать пропсы, переданные из других компонентов, например, конкретный заголовок страницы. + +```astro title="src/components/Head.astro" +--- +import Favicon from "../assets/Favicon.astro"; +import SomeOtherTags from "./SomeOtherTags.astro"; + +const { title = "Мой сайт на Astro", ...props } = Astro.props; +--- + +{title} + + + + + + + + + + + + + + + + +```