|
| 1 | +--- |
| 2 | +title: Обзор конфигурации |
| 3 | +description: Узнайте, как можно настроить ваш новый проект и процесс разработки. |
| 4 | +i18nReady: true |
| 5 | +--- |
| 6 | +import ReadMore from '~/components/ReadMore.astro' |
| 7 | + |
| 8 | +Astro — это гибкий и не навязывающий своего мнения фреймворк, который позволяет конфигурировать ваш проект самыми разными способами. Это означает, что начало работы над новым проектом может показаться сложным: не существует "единственно верного способа" настройки проекта на Astro! |
| 9 | + |
| 10 | +Руководства в этом разделе помогут вам ознакомиться с различными файлами, которые позволяют настраивать и адаптировать аспекты вашего проекта и среды разработки. |
| 11 | + |
| 12 | +Если это ваш первый проект на Astro или вы давно не создавали новых проектов, воспользуйтесь приведёнными ниже руководствами и справочной информацией в документации. |
| 13 | + |
| 14 | +## Файл конфигурации Astro |
| 15 | + |
| 16 | +[Файл конфигурации Astro](/ru/reference/configuration-reference/) - это JavaScript-файл, включённый в корень каждого стартового проекта: |
| 17 | + |
| 18 | +```js |
| 19 | +// astro.config.mjs |
| 20 | +import { defineConfig } from "astro/config"; |
| 21 | + |
| 22 | +export default defineConfig({ |
| 23 | + // ваши параметры конфигурации здесь... |
| 24 | +}); |
| 25 | +``` |
| 26 | + |
| 27 | +Он требуется только в том случае, если вам нужно что-то настроить, но большинство проектов всё же используют этот файл. Вспомогательная функция `defineConfig()` обеспечивает автоматическую поддержку IntelliSense в вашей IDE и является местом, куда вы будете добавлять все параметры конфигурации, чтобы указать Astro, как собирать и рендерить ваш проект в HTML. |
| 28 | + |
| 29 | +Мы рекомендуем в большинстве случаев использовать формат файла по умолчанию `.mjs` или `.ts`, если вы хотите писать на TypeScript в своём файле конфигурации. Однако `astro.config.js` также поддерживается. |
| 30 | + |
| 31 | +<ReadMore>Ознакомьтесь со [справочником по конфигурации](/ru/reference/configuration-reference/) Astro для получения полного обзора всех поддерживаемых параметров настройки.</ReadMore> |
| 32 | + |
| 33 | +## Файл конфигурации TypeScript |
| 34 | + |
| 35 | +Каждый стартовый проект Astro включает файл `tsconfig.json`. [Скрипт компонента](/ru/basics/astro-components/#скрипт-компонента) Astro написан на TypeScript, что обеспечивает инструментарий редактора Astro и позволяет при необходимости добавлять синтаксис в ваш JavaScript для проверки типов кода вашего собственного проекта. |
| 36 | + |
| 37 | +Используйте файл `tsconfig.json` для настройки шаблона TypeScript, который будет выполнять проверку типов вашего кода, настраивать плагины TypeScript, задавать алиасы для импортов и многое другое. |
| 38 | + |
| 39 | +<ReadMore>Ознакомьтесь с [руководством по TypeScript](/ru/guides/typescript/) для получения полного обзора параметров TypeScript и встроенных служебных типов Astro.</ReadMore> |
| 40 | + |
| 41 | +## Опыт разработки |
| 42 | + |
| 43 | +Во время работы в режиме разработки вы можете использовать возможности вашего редактора кода и другие инструменты для улучшения опыта разработки на Astro. |
| 44 | + |
| 45 | +Astro предоставляет собственное официальное расширение для VS Code и совместим с рядом других популярных инструментов для редакторов. Astro также предоставляет настраиваемую панель инструментов, которая отображается в предварительном просмотре в браузере во время работы dev-сервера. Вы можете устанавливать и даже создавать свои собственные приложения для панели инструментов для дополнительной функциональности. |
| 46 | + |
| 47 | +<ReadMore>Ознакомьтесь с руководствами Astro по [параметрам настройки редактора](/ru/editor-setup/) и [использованию панели разработчика](/ru/guides/dev-toolbar/), чтобы узнать, как настроить свою рабочую среду.</ReadMore> |
| 48 | + |
| 49 | +## Типичные задачи в новом проекте |
| 50 | + |
| 51 | +Вот несколько первых шагов, которые вы можете предпринять в новом проекте на Astro. |
| 52 | + |
| 53 | +### Добавление домена для развёртывания |
| 54 | + |
| 55 | +Для генерации sitemap и канонических URL-адресов настройте URL вашего развёртывания в параметре [`site`](/ru/reference/configuration-reference/#site). Если вы развёртываете по определённому пути (например, `www.example.com/docs`), вы также можете указать [`base`](/ru/reference/configuration-reference/#base) для корня вашего проекта. |
| 56 | + |
| 57 | +Кроме того, разные хостинги могут иметь разное поведение в отношении завершающих слэшей в конце ваших URL-адресов (например, `example.com/about` и `example.com/about/`). После того как ваш сайт будет развёрнут, вам, возможно, потребуется настроить параметр [`trailingSlash`](/ru/reference/configuration-reference/#trailingslash). |
| 58 | + |
| 59 | +```js title="astro.config.mjs" |
| 60 | +import { defineConfig } from "astro/config"; |
| 61 | + |
| 62 | +export default defineConfig({ |
| 63 | + site: "https://www.example.com", |
| 64 | + base: "/docs", |
| 65 | + trailingSlash: "always", |
| 66 | +}); |
| 67 | +``` |
| 68 | + |
| 69 | +### Добавление метаданных сайта |
| 70 | + |
| 71 | +Astro не использует свой файл конфигурации для общих SEO-данных или метаданных, а только для информации, необходимой для сборки кода проекта и его рендеринга в HTML. |
| 72 | + |
| 73 | +Вместо этого такая информация добавляется в секцию `<head>` вашей страницы с использованием стандартных HTML-тегов `<link>` и `<meta>`, как если бы вы писали обычные HTML-страницы. |
| 74 | + |
| 75 | +Один из распространённых паттернов для сайтов на Astro - создание [`.astro` компонента](/ru/basics/astro-components/) `<Head />`, который можно добавить в общий [компонент макета](/ru/basics/layouts/), чтобы он применялся ко всем вашим страницам. |
| 76 | + |
| 77 | +```astro title="src/components/MainLayout.astro" |
| 78 | +--- |
| 79 | +import Head from "./Head.astro"; |
| 80 | +
|
| 81 | +const { ...props } = Astro.props; |
| 82 | +--- |
| 83 | +<html> |
| 84 | + <head> |
| 85 | + <meta charset="utf-8"> |
| 86 | + <Head /> |
| 87 | + <!-- Дополнительные элементы head --> |
| 88 | + </head> |
| 89 | + <body> |
| 90 | + <!-- Содержимое страницы --> |
| 91 | + </body> |
| 92 | +</html> |
| 93 | +``` |
| 94 | + |
| 95 | +Поскольку `Head.astro` - обычный компонент Astro, вы можете импортировать файлы и получать пропсы, переданные из других компонентов, например, конкретный заголовок страницы. |
| 96 | + |
| 97 | +```astro title="src/components/Head.astro" |
| 98 | +--- |
| 99 | +import Favicon from "../assets/Favicon.astro"; |
| 100 | +import SomeOtherTags from "./SomeOtherTags.astro"; |
| 101 | +
|
| 102 | +const { title = "Мой сайт на Astro", ...props } = Astro.props; |
| 103 | +--- |
| 104 | +<link rel="sitemap" href="/sitemap-index.xml"> |
| 105 | +<title>{title}</title> |
| 106 | +<meta name="description" content="Добро пожаловать на мой новый сайт на Astro!"> |
| 107 | +
|
| 108 | +<!-- Веб-аналитика --> |
| 109 | +<script data-goatcounter="https://my-account.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script> |
| 110 | +
|
| 111 | +<!-- Теги Open Graph --> |
| 112 | +<meta property="og:title" content="Мой новый сайт на Astro" /> |
| 113 | +<meta property="og:type" content="website" /> |
| 114 | +<meta property="og:url" content="http://www.example.com/" /> |
| 115 | +<meta property="og:description" content="Добро пожаловать на мой новый сайт на Astro!" /> |
| 116 | +<meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp"> |
| 117 | +<meta property="og:image:alt" content=""> |
| 118 | +
|
| 119 | +<SomeOtherTags /> |
| 120 | +
|
| 121 | +<Favicon /> |
| 122 | +``` |
0 commit comments