Skip to content

Commit 6bec2c0

Browse files
i18n(ru): add guilds/configuring-astro.mdx (#13887)
Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>
1 parent 5d2620f commit 6bec2c0

1 file changed

Lines changed: 122 additions & 0 deletions

File tree

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
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

Comments
 (0)