Sveltejs Academy · leksjon

Layout-filer: +layout.svelte

Del navigasjon og skallets UI på tvers av flere sider med layout-komponenter.

Leksjon 4 av 413 trinn

Layout-filer: +layout.svelte er en gratis leksjon i Sveltejs Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Sveltejs Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.

Layouts pakker inn sider

En +layout.svelte-fil pakker inn alle sider i samme mappe og undermappene der.

Rot-layout

src/routes/+layout.svelte pakker inn alle sider i appen. Dette er et vanlig sted for navigasjon og appskall.

<!-- +layout.svelte -->
<nav>...</nav>
<main>
  <slot />
</main>

Slot-en

Den gjeldende siden settes inn der <slot /> vises.

Nøstede layouts

Legg til +layout.svelte i en hvilken som helst undermappe for seksjonsspesifikke layouts.

src/routes/admin/+layout.svelte  // wraps all /admin/* pages

Layout-arv

Sider arver alle overordnede layouts fra roten og nedover. Nøst dem for å dele brukergrensesnitt.

Lasting av layoutdata

Kombiner med +layout.js for å laste inn data som trengs i layouten.

Betinget brukergrensesnitt

Layouts kan lese $page for å tilpasse seg den gjeldende URL-en.

Tilbakestille layout

Bruk notasjonen +page@ for å gå ut av en layout for en bestemt side.

Layout-grupper

Bruk mapper som (marketing) for layouts som ikke legger til URL-segmenter.

Feilsider

Plasser +error.svelte i en layoutmappe for å fange opp feil i den aktuelle seksjonen.

Gjenbruke layouts

Layouts gjør det enkelt å få et konsekvent brukergrensesnitt. Prop drilling er ikke nødvendig.

Hurtigsjekk

Hvor gjengis siden inne i en layout?

Besvar den i den interaktive leksjonen

Oppsummering

Layouts pakker inn sider via +layout.svelte med en <slot />. De nøstes etter mappenivå.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Layout-filer: +layout.svelte» gratis?

Ja – hele teksten i «Layout-filer: +layout.svelte» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Sveltejs Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Layout-filer: +layout.svelte»?

Del navigasjon og skallets UI på tvers av flere sider med layout-komponenter. Du øver på Sveltejs Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Sveltejs Academy?

Ingen tidligere erfaring er nødvendig. Sveltejs Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Layout-filer: +layout.svelte»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Sveltejs Academy-leksjonen?

Ja. Alle Sveltejs Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Sveltejs Academy