Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions src/content/docs/ru/basics/project-structure.mdx
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
title: Структура проекта
description: Введение в основы файловой структуры Astro-проекта.
description: Введение в файловую структуру проекта Astro.
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';

Ваш новый Astro-проект, созданный с помощью команды `create-astro`, уже включает в себя некоторые файлы и папки. Другие вы создадите сами и добавите в существующую файловую структуру.
Новый проект Astro, созданный с помощью команды `create-astro`, уже включает в себя необходимые файлы и папки. Вы можете дополнить уже существующую файловую структуру по своему усмотрению.

Ниже описано как Astro организован и какие файлы вы найдете в своем новом проекте.
Ниже описана структура Astro и основные файлы, которые можно обнаружить после создания нового проекта.

## Директории и Файлы

Astro использует определенную структуру папок для вашего проекта. Корневая папка каждого проекта на Astro должна включать следующие директории и файлы:
Astro использует определенную структуру папок. Корневая папка каждого проекта на Astro должна включать следующие директории и файлы:

- `src/*` Исходный код вашего проекта (компоненты, страницы, стили, изображения и т.д.)
- `public/*` — Ваши статичные файлы, помимо кода (шрифты, иконки, и т.д.)
- `package.json` Манифест проекта.
- `astro.config.mjs` Файл конфигурации Astro. (рекомендован)
- `tsconfig.json` Файл конфигурации TypeScript. (рекомендован)
- `src/*` - Исходный код проекта (компоненты, страницы, стили, изображения и т.д.)
- `public/*` - Статичные файлы, не являющиеся кодом (шрифты, иконки, и т.д.)
- `package.json` - Манифест проекта.
- `astro.config.mjs` - Файл конфигурации Astro. (рекомендуется)
- `tsconfig.json` - Файл конфигурации TypeScript. (рекомендуется)

### Пример дерева проекта

Структура простого Astro проекта может выглядеть так:
Структура простого проекта Astro может выглядеть так:

<FileTree>
- public/
Expand Down Expand Up @@ -58,37 +58,37 @@ Astro использует определенную структуру папо

### `src/`

Папка `src/` это место где живет большая часть вашего исходного кода. Здесь находятся:
Папка `src/` - это место, где расположена большая часть исходного кода. Здесь находятся:

- [Страницы](/ru/basics/astro-pages/)
- [Макеты](/ru/basics/layouts/)
- [Astro компоненты](/ru/basics/astro-components/)
- [Компоненты Astro](/ru/basics/astro-components/)
- [Компоненты UI-фреймворков (React и т.д.)](/ru/guides/framework-components/)
- [Стили (CSS, Sass)](/ru/guides/styling/)
- [Markdown](/ru/guides/markdown-content/)
- [Разметка Markdown](/ru/guides/markdown-content/)
- [Изображения, для оптимизации и обработки с помощью Astro](/ru/guides/images/)

Astro обрабатывает, оптимизирует и объединяет в бандл ваши файлы из `src/`, чтобы создать окончательный сайт, который отправляется в браузер. В отличие от статической директории `public/`, файлы из `src/` собираются в билд и обрабатываются с помощью Astro.
Astro обрабатывает, оптимизирует и собирает файлы из `src/`, чтобы создать итоговый сайт, отправляемый в браузер. В отличие от статической директории `public/`, файлы из `src/` собираются в билд и обрабатываются с помощью Astro.

Некоторые файлы (например, Astro-компоненты) не отправляются в браузер в том виде, в котором они написаны, а вместо этого отображаются статическим HTML. Другие файлы (такие как CSS) отправляются в браузер, но могут быть оптимизированы или объединены в бандл с другими CSS-файлами для производительности.
Некоторые файлы (например, компоненты Astro) определяются браузером не в том виде, в котором написаны, а в качестве статического HTML. Другие файлы (такие как CSS) отправляются в браузер, но могут быть оптимизированы или объединены с другими CSS-файлами для производительности.

:::Tip
В этом руководстве описываются практики, которые общеприняты в сообществе Astro. Однако единственной зарезервированной директорией в Astro является `src/pages/`. Вы можете переименовывать любые другие директории и организовывать их так, как вам удобно.
В этом руководстве описываются практики, которые общеприняты в сообществе Astro. Единственной зарезервированной директорией в Astro является `src/pages/`. Любые другие директории вы можете переименовывать и организовывать так, как вам удобно.
:::

### `src/pages`

Чтобы задать маршруты страниц для вашего сайта, добавьте [файлы поддерживаемых типов](/ru/basics/astro-pages/#поддерживаемые-типы-файлов-страниц) в эту директорию.

:::Caution
`src/pages` – это **обязательная** под-директория в вашем Astro-проекте. Без нее на вашем сайте не будет страниц и маршрутов!
`src/pages` – это **обязательная** под-директория в проекте Astro. Без нее на сайте не будет страниц и маршрутов!
:::

### `src/components`

**Компоненты** - это повторяющиеся блоки кода для ваших HTML-страниц. Это могут быть [компоненты Astro](/ru/basics/astro-components/) или [компоненты UI-фреймворка](/ru/guides/framework-components/) такие как React или Vue. Обычно принято группировать и упорядочивать все компоненты вашего проекта в этой папке.
**Компоненты** - это повторяющиеся блоки кода для HTML-страниц. Это могут быть [компоненты Astro](/ru/basics/astro-components/) или [компоненты UI-фреймворков](/ru/guides/framework-components/) таких как React или Vue. Принято добавлять и группировать все компоненты проекта в этой папке.

Это общепринятая практика для Astro-проектов, но она не является обязательной. Вы вольны организовывать компоненты своего проекта так, как вам удобно!
Это общепринятая практика для проектов Astro, но она не является обязательной. Вы вольны организовывать компоненты своего проекта так, как вам удобно!

### `src/layouts`

Expand All @@ -98,15 +98,15 @@ Astro обрабатывает, оптимизирует и объединяет

### `src/styles`

Общепринято хранить ваши CSS или Sass файлы в директории `src/styles`, но это не обязательно. Пока ваши стили находятся где-то внутри директории `src/` и правильно импортированы, Astro будет обрабатывать и оптимизировать их.
Общепринято хранить CSS или Sass файлы в директории `src/styles`, но это не обязательно. Пока файлы стилей находятся где-то внутри директории `src/` и импортированы правильно, Astro будет обрабатывать и оптимизировать их.

### `public/`

Директория `public/` предназначена для файлов и материалов в вашем проекте, которые Astro не должен обрабатывать во время сборки. Файлы в этой папке будут скопированы в папку сборки без изменений, после чего будет создан билд вашего сайт.
Директория `public/` предназначена для файлов и материалов в проекте, которые Astro не должен обрабатывать во время сборки. Файлы в этой папке будут скопированы в папку сборки без изменений, после чего будет создан билд сайта.

Это поведение делает `public/` идеальным местом для материалов, которые не нуждаются в обработке, например картинки и шрифты или специальные файлы, такие как `robots.txt` и `manifest.webmanifest`.
Это поведение делает `public/` идеальным местом для материалов, которые не нуждаются в обработке, например картинки, шрифты или специальные файлы, такие как `robots.txt` и `manifest.webmanifest`.

Вы можете поместить CSS и JavaScript в вашу директорию `public/`, но имейте в виду, что эти файлы не будут объединены в бандл или оптимизированы в вашей конечной сборке.
Вы можете поместить CSS и JavaScript в директорию `public/`, но имейте в виду, что эти файлы не будут объединены в бандл или оптимизированы в вашей конечной сборке.

:::tip
Как правило, любой CSS или JavaScript, который вы пишете самостоятельно, должен находиться в директории `src/`.
Expand All @@ -116,22 +116,22 @@ Astro обрабатывает, оптимизирует и объединяет

Это файл, используемый менеджерами пакетов JavaScript для управления зависимостями. Он также определяет скрипты, которые обычно используются для запуска Astro (например, `npm run dev`, `npm run build`).

Вы можете указать [два вида зависимостей](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) в файле `package.json`: `dependencies` и `devDependencies`. В большинстве случаев они работают одинаково: Astro нуждается во всех зависимостях на этапе сборки, и ваш менеджер пакетов установит оба. Мы рекомендуем поместить все зависимости в `dependencies` для начала, и использовать `devDependencies` только при наличии конкретной необходимости.
Вы можете указать [два вида зависимостей](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) в файле `package.json`: `dependencies` и `devDependencies`. В большинстве случаев они работают одинаково: Astro нуждается во всех зависимостях на этапе сборки, и ваш менеджер пакетов установит оба. Рекомендуется поместить все зависимости в `dependencies` для начала, и использовать `devDependencies` только при наличии конкретной необходимости.

Чтобы создать новый файл `package.json` для вашего проекта, ознакомьтесь с инструкцией по [ручной установке](/ru/install-and-setup/#ручная-установка).
Чтобы создать новый файл `package.json` в проекте, ознакомьтесь с инструкцией по [ручной установке](/ru/install-and-setup/#ручная-установка).

### `astro.config.mjs`

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

Astro поддерживает несколько форматов файлов конфигурации JavaScript: `astro.config.js`, `astro.config.mjs` и `astro.config.ts`. В большинстве случаев мы рекомендуем использовать `.mjs`, либо `.ts` если вы хотите писать конфигурации на TypeScript.
Astro поддерживает несколько форматов файлов конфигурации JavaScript: `astro.config.js`, `astro.config.mjs` и `astro.config.ts`. В большинстве случаев рекомендуется использовать `.mjs`, либо `.ts` если вы хотите писать конфигурации на TypeScript.

Загрузка файла конфигурации на TypeScript обрабатывается с помощью [`tsm`](https://github.com/lukeed/tsm) и будет учитывать настройку `tsconfig` вашего проекта.
Загрузка файла конфигурации на TypeScript обрабатывается с помощью [`tsm`](https://github.com/lukeed/tsm) и будет учитывать настройку `tsconfig` проекта.

См. [Руководство по настройке Astro](/ru/reference/configuration-reference/) для детальной настройки.

### `tsconfig.json`

Этот файл создается в каждом стартовом шаблоне и включает параметры конфигурации TypeScript для вашего Astro-проекта. Некоторые функции (такие как импорт пакетов npm) не полностью поддерживаются в редакторе без файла `tsconfig.json`.

См. [Руководство по TypeScript](/ru/guides/typescript/) для деталей по настройке конфигурации.
См. [Руководство по TypeScript](/ru/guides/typescript/) чтобы узнать подробнее о настройке конфигурации.
Loading