Skip to content

Latest commit

 

History

History
129 lines (87 loc) · 10.1 KB

project-structure.mdx

File metadata and controls

129 lines (87 loc) · 10.1 KB
Raw
title description i18nReady
Структура проекта
Узнайте, как организовать проект с помощью Astro.
true

import { FileTree } from '@astrojs/starlight/components';

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

Вот как организован проект Astro, и некоторые файлы, которые вы найдете в своем новом проекте.

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

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

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

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

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

- public/ - robots.txt - favicon.svg - social-image.png - src/ - components/ - Header.astro - Button.jsx - layouts/ - PostLayout.astro - pages/ - posts/ - post1.md - post2.md - post3.md - index.astro - styles/ - global.css - astro.config.mjs - package.json - tsconfig.json

src/

Директория src/ это место, где находится большая часть исходного кода вашего проекта. Сюда входят:

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

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

:::tip Хотя в этом руководстве описываются некоторые популярные соглашения, используемые в сообществе Astro, единственные зарезервированные директории Astro - это src/pages/ и src/content/. Вы можете свободно переименовывать и реорганизовывать любые другие директории так, как вам удобно. :::

src/components

Компоненты - это многократно используемые блоки кода для ваших HTML-страниц. Это могут быть компоненты Astro, или компоненты UI-фреймворка такие как React или Vue. Обычно все компоненты вашего проекта группируются и упорядочиваются в этой папке.

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

src/content

Директория src/content/ зарезервирована для хранения коллекций контента и файла конфигурации коллекций (по желанию). В этой папке не допускается наличие других файлов.

src/layouts

Макеты - это компоненты Astro, которые определяют структуру пользовательского интерфейса, разделяемую одной или несколькими страницами.

Как и src/components, эта директория является общепринятой, но не обязательной.

src/pages

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

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

src/styles

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

public/

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

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

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

:::tip Как правило, любой CSS или JavaScript, который вы пишете самостоятельно, должен находиться в директории src/. :::

package.json

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

В файле package.json есть два вида зависимостей: dependencies и devDependencies. В большинстве случаев они работают одинаково: Astro нуждается во всех зависимостях на этапе сборки, и ваш менеджер пакетов установит оба. Мы рекомендуем начать с помещения всех ваших зависимостей в dependencies, и использовать devDependencies только при наличии конкретной необходимости.

Для помощи в создании нового файла package.json для вашего проекта, ознакомьтесь с инструкциями по ручной установке.

astro.config.mjs

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

См. Руководство по настройке Astro для получения подробной информации о настройке конфигураций.

tsconfig.json

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

См. Руководство по TypeScript для получения подробной информации о настройке конфигураций.