| title | description | i18nReady |
|---|---|---|
Структура проекта |
Введение в основы файловой структуры Astro-проекта. |
true |
import { FileTree } from '@astrojs/starlight/components';
Ваш новый Astro-проект, созданный с помощью команды create-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 компоненты
- Компоненты UI-фреймворков (React и т.д.)
- Стили (CSS, Sass)
- Markdown
- Изображения, для оптимизации и обработки с помощью Astro
Astro обрабатывает, оптимизирует и объединяет ваши файлы из src/, чтобы создать окончательный сайт, который отправляется в браузер. В отличие от статической директории public/, файлы из src/ собираются и обрабатываются с помощью Astro.
Некоторые файлы (например, Astro-компоненты) не отправляются в браузер в том виде, в каком они написаны, а вместо этого отображаются в статическом HTML. Другие файлы (например, CSS) отправляются в браузер, но могут быть оптимизированы или объединены с другими файлами CSS для повышения производительности.
:::Tip
В этом руководстве описываются общепринятые сообществом Astro практики. Однако единственной зарезервированной директорией в Astro является src/pages/. Вы можете переименовывать любые другие директории и организовывать их так, как вам удобно.
:::
Чтобы задать маршруты страниц для вашего сайта, добавьте файлы поддерживаемых типов в директорию src/pages/.
:::Caution
src/pages – это обязательная директория в вашем Astro-проекте. Без нее на вашем сайте не будет страниц и маршрутов!
:::
Компоненты - это многократно используемые блоки кода для ваших HTML-страниц. Это могут быть компоненты Astro или компоненты UI-фреймворка такие как React или Vue. Обычно принято группировать и упорядочивать все компоненты вашего проекта в этой папке.
Это общепринятая практика для Astro-проектов, но она не является обязательной. Вы вольны организовывать компоненты своего проекта так, как вам удобно!
Макеты - это компоненты Astro, которые задают UI-структуру для одной или нескольких страниц.
Как и src/components, эта директория является общепринятой, но не обязательной.
Общепринято хранить ваши CSS или Sass файлы в папке src/styles, но это не обязательно. Пока ваши стили находятся где-то в директории src/ и правильно импортированы, Astro будет обрабатывать и оптимизировать их.
Директория public/ предназначена для файлов и материалов в вашем проекте, которые Astro не должен обрабатывать во время сборки. Файлы в этой папке будут скопированы в папку сборки без изменений, после чего будет создан ваш сайт.
Это поведение делает public/ идеальным местом для таких материалов как изображения и шрифты или специальных файлов, таких как robots.txt и manifest.webmanifest.
Вы можете поместить CSS и JavaScript в вашу директорию public/, но имейте в виду, что эти файлы не будут объединены или оптимизированы в вашей конечной сборке.
:::совет
Как правило, любой CSS или JavaScript, который вы пишете самостоятельно, должен находиться в директории src/.
:::
Это файл, используемый менеджерами пакетов JavaScript для управления зависимостями. Он также определяет скрипты, которые обычно используются для запуска Astro (например, npm run dev, npm run build).
В файле package.json есть два вида зависимостей: dependencies и devDependencies. В большинстве случаев они работают одинаково: Astro нуждается во всех зависимостях на этапе сборки, и ваш менеджер пакетов установит оба. Мы рекомендуем поместить все зависиомсти в dependencies для начала, и использовать devDependencies только при наличии конкретной необходимости.
Чтобы создать новый файл package.json для вашего проекта, ознакомьтесь с инструкциями по ручной установке.
Этот файл создается в каждом стартовом шаблоне и включает в себя параметры конфигурации для вашего проекта Astro. Здесь вы можете указать используемые интеграции, параметры сборки, параметры сервера и многое другое.
Astro поддерживает несколько форматов файлов конфигурации JavaScript: astro.config.js, astro.config.mjs, astro.config.cjs и astro.config.ts. В большинстве случаев мы рекомендуем использовать .mjs, либо .ts если вы хотите писать конфигурации на TypeScript.
Загрузка файла конфигурации на TypeScript обрабатывается с помощью tsm и будет учитывать настройку tsconfig вашего проекта.
См. Руководство по настройке Astro для детальной настройки.
Этот файл создается в каждом стартовом шаблоне и включает параметры конфигурации TypeScript для вашего проекта Astro.
Некоторые функции (например, импорт пакетов npm) не полностью поддерживаются в редакторе без файла tsconfig.json.
См. Руководство по TypeScript для получения подробной информации о настройке конфигураций.