Struktura projektu

Twój nowy projekt Astro wygenerowany dzięki kreatorowi CLI create astro już zawiera kilka plików i folderów. Inne stworzysz już sam i dodasz je do istniejącej struktury plików Astro.

Poniżej przedstawimy Ci w jaki sposób projekt Astro jest zorganizowany oraz jakie pliki znajdziesz w swoim nowym projekcie.

Foldery i Pliki

Astro wykorzystuje z góry narzuconą strukturę folderów dla Twojego projektu. Każdy główny folder projektu Astro powinien zawierać następujące foldery i pliki:

src/* - Kod źródłowy Twojego projektu. (komponenty, strony, style, itp.)
public/* - Twoje nieprzetworzone, pozaprogramowe zasoby. (fonty, ikony, itp.)
package.json - Manifest projektu.
astro.config.mjs - Plik konfiguracyjny Astro. (zalecany)
tsconfig.json - Plik konfiguracyjny TypeScript. (zalecany)

Przykładowe Drzewko Projektu

Standardowy folder projektu Astro może wyglądać tak:

Folderpublic/
- robots.txt
- favicon.svg
- social-image.png
Foldersrc/
- Foldercomponents/
  - Header.astro
  - Button.jsx
- Folderlayouts/
  - PostLayout.astro
- Folderpages/
  - Folderposts/
    post1.md
    post2.md
    post3.md
  - index.astro
- Folderstyles/
  - global.css
astro.config.mjs
package.json
tsconfig.json

`src/`

Folder src/ to miejsce, gdzie żyje większość kodu źródłowego Twojego projektu. Zawiera on:

Astro przetwarza, optymalizuje i pakuje Twoje pliki z folderu src/ aby stworzyć finalną stronę internetową, która wysyłana jest do przeglądarki. W przeciwieństwie do statycznego folderu public/ zawartość src/ jest budowana i obsługiwana przez Astro.

Niektóre pliki (takie jak komponenty Astro) nie są nawet wysyłane w swojej postaci, tylko renderowane jako statyczny HTML. Inne pliki (jak CSS) są przesyłane do przeglądarki ale mogą być zoptymalizowane bądź spakowane z innymi plikami CSS dla lepszej wydajności.

`src/components`

Komponenty są jednostkami wielekrotnego użytku dla Twoich stron HTML. Mogą być one komponentami Astro, lub komponentami frameworków UI jak React bądź Vue. Powszechne jest aby grupować i organizować wszystkie komponenty Twojego folderu w tym folderze.

To jest powszechnie przyjęta praktyka w projektach Astro, lecz nie jest ona wymagana. Możesz dowolnie organizować swoje komponenty według własnych życzeń!

`src/content`

Folder src/content/ ma na celu przechowywanie kolekcji zawartości i ich opcjonalne pliki konfiguracji. Żadne inne pliki nie mają prawa tu być.

`src/layouts`

Layouty to komponenty Astro, które definiują strukturę UI współdzieloną przez jedną lub więcej stron.

Tak jak src/components, ten folder to znana, ale niewymagana konwencja.

`src/pages`

Strony są specjalnym rodzajem komponentu, dzięki którym stworzysz nowe podstrony swojej witryny. Strona może być komponentem Astro bądź plikiem Markdown, który reprezentuje jakąś część zawartości Twojego portalu.

`src/styles`

Powszechnym zamysłem jest przechowywanie Twoich plików CSS bądź Sass w src/styles, ale nie jest on konieczny. Tak długo, jak Twoje style znajdują się gdziekolwiek w katalogu src/ i są poprawnie importowane, Astro zajmie się ich obsługą i optymalizacją.

`public/`

Folder public/ jest dla plików i zasobów Twojego projektu, które nie muszą być przetworzone podczas procesu budowania Astro. Pliki z tego folderu będą skopiowane do folderu budowania w stanie nienaruszonym, a po tym Twoja strona zostanie stworzona.

Takie zachowanie sprawia, że public/ jest idealnym miejscem na podstawowe zasoby jak zdjęcia czy fonty, lub dla specjalnych plików takich jak robots.txt i manifest.webmanifest.

Możesz umieścić w public/ pliki CSS i JavaScript, ale pamiętaj, że te pliki nie będą zoptymalizowane ani spakowane w Twoim finalnym projekcie.

`package.json`

Ten plik jest używany przez paczkę mendedżerów pakietów to zarządzania Twoimi zależnościami. Definiuje również powszechnie użyte skrypty do uruchamiania Astro (np. npm start, npm run build).

Znajdują się tu dwa typy zależności, które możesz określić jako package.json: dependencies i devDependencies. W większości przypadków oba pracują tak samo: Astro potrzebuje wszelkie zależności podczas budowy, a Twój menedżer paczki je zainstaluje. Zalecamy przechowywanie wszystkich Twoich zależności w dependencies na początek, oraz używać jedynie devDependencies gdy najdzie taka specyficzna potrzeba.

Aby wesprzeć tworzenie nowego pliku package.json dla Twojego projektu, sprawdź instrukcję ręcznej instalacji.

`astro.config.mjs`

Ten plik jest wygenerowany w każdym startowym szablonie i zawiera opcje konfiguracji dla Twojego projektu Astro. Tutaj możesz określić opcje budowania, opcje serwera, jakich integracji użyć i wiele więcej.

Astro wspiera kilka formatów dla pliku konfiguracyjnego JavaScriptu: astro.config.js, astro.config.mjs, astro.config.cjs i astro.config.ts. Polecamy korzystanie z .mjs w większości przypadków, oraz z .ts w razie pisania w TypeScript.

Ładowanie pliku konfiguracyjnego TypeScript jest obsługiwane przez tsm i będzie zwracał szczególną uwagę na Twoje opcje tsconfig.

Zerknij na Przewodnik Konfiguracji Astro aby poznać szczegóły opcji konfiguracyjnych.

`tsconfig.json`

Ten plik jest generowany w każdym szablonie startowym i zawiera on opcje konfiguracji TypeScript dla Twojego projektu Astro. Niektóre funkcje (takie jak importy pakietów npm) nie są w pełni obsługiwane w edytorze bez pliku tsconfig.json.

Szczegóły dotyczące ustawień konfiguracji znajdziesz w Przewodniku TypeScript.

Pomóż nam

Społeczność