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

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

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

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

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

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

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

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

Директорияpublic/
- robots.txt
- favicon.svg
- my-cv.pdf
Директорияsrc/
- Директорияblog/
  - post1.md
  - post2.md
  - post3.md
- Директорияcomponents/
  - Header.astro
  - Button.jsx
- Директорияimages/
  - image1.jpg
  - image2.jpg
  - image3.jpg
- Директорияlayouts/
  - PostLayout.astro
- Директорияpages/
  - Директорияposts/
    [post].astro
  - about.astro
  - index.astro
  - rss.xml.js
- Директорияstyles/
  - global.css
- content.config.ts
astro.config.mjs
package.json
tsconfig.json

`src/`

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

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

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

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

`src/pages`

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

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

`src/components`

Компоненты - это повторяющиеся блоки кода для HTML-страниц. Это могут быть компоненты Astro или компоненты UI-фреймворков (EN) таких как React или Vue. Принято добавлять и группировать все компоненты проекта в этой папке.

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

`src/layouts`

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

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

`src/styles`

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

`public/`

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

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

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

`package.json`

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

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

Чтобы создать новый файл package.json в проекте, ознакомьтесь с инструкцией по ручной установке.

`astro.config.mjs`

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

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

Загрузка файла конфигурации на TypeScript обрабатывается с помощью tsm и будет учитывать настройку tsconfig проекта.

См. Руководство по настройке Astro (EN) для детальной настройки.

`tsconfig.json`

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

См. Руководство по TypeScript (EN) чтобы узнать подробнее о настройке конфигурации.

Внести свой вклад Сообщество Поддержать