Pliki układów: +layout.svelte
Współdziel nawigację i strukturę interfejsu między wieloma stronami za pomocą komponentów układu.
Pliki układów: +layout.svelte to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Layouty otaczają strony
Plik +layout.svelte otacza wszystkie strony w tym samym folderze i jego podfolderach.
Layout główny
src/routes/+layout.svelte otacza każdą stronę aplikacji. To typowe miejsce na nawigację i szkielet interfejsu.
<!-- +layout.svelte -->
<nav>...</nav>
<main>
<slot />
</main>Slot
Bieżąca strona jest wstawiana w miejscu występowania <slot />.
Zagnieżdżone layouty
Dodaj +layout.svelte w dowolnym podfolderze, aby utworzyć layout właściwy dla danej sekcji.
src/routes/admin/+layout.svelte // wraps all /admin/* pagesDziedziczenie layoutów
Strony dziedziczą wszystkie layouty nadrzędne, od głównego w dół. Układaj je warstwowo, aby współdzielić interfejs.
Ładowanie danych layoutu
Połącz layout z +layout.js, aby załadować potrzebne w nim dane.
Warunkowy interfejs
Layouty mogą odczytywać $page, aby dostosowywać się do bieżącego adresu URL.
Resetowanie layoutu
Użyj składni +page@, aby dla konkretnej strony wyłączyć dziedziczenie layoutu.
Grupy layoutów
Używaj folderów takich jak (marketing) dla layoutów, które nie dodają segmentów do adresu URL.
Strony błędów
Umieść +error.svelte w dowolnym folderze layoutu, aby przechwytywać błędy w tej sekcji.
Ponowne używanie layoutów
Layouty ułatwiają tworzenie spójnego interfejsu. Nie trzeba przekazywać właściwości przez wiele poziomów komponentów.
Szybkie sprawdzenie
Gdzie strona jest renderowana wewnątrz layoutu?
Podsumowanie
Layouty otaczają strony za pomocą +layout.svelte i <slot />. Zagnieżdżają się zgodnie z głębokością folderów.
Często zadawane pytania
Czy lekcja „Pliki układów: +layout.svelte” jest bezpłatna?
Tak — pełny tekst „Pliki układów: +layout.svelte” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Pliki układów: +layout.svelte”?
Współdziel nawigację i strukturę interfejsu między wieloma stronami za pomocą komponentów układu. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Pliki układów: +layout.svelte”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Routing oparty na plikach z +page.svelte
- Dynamiczne parametry tras: [id]
- Parametry opcjonalne i rest
- Pliki układów: +layout.svelte