Перейти к содержимому

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

Ваш новый проект 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/ это место, где находится большая часть исходного кода вашего проекта. Сюда входят:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что у вас на уме?

Сообщество