Структура проекта

Ваш новый проект 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 для повышения производительности.

`src/components`

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

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

`src/content`

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

`src/layouts`

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

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

`src/pages`

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

`src/styles`

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

`public/`

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

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

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

`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 для получения подробной информации о настройке конфигураций.

Внести свой вклад

Сообщество