Sveltejs Academy · Lektion

Layoutfiler: +layout.svelte

Dela navigering och skal-UI mellan flera sidor med layoutkomponenter.

Lektion 4 av 413 steg

Layoutfiler: +layout.svelte är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Layouts omsluter sidor

En +layout.svelte-fil omsluter alla sidor i samma mapp och dess undermappar.

Rotlayout

src/routes/+layout.svelte omsluter varje sida i appen. Det är en vanlig plats för navigering och appskal.

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

Slotten

Den aktuella sidan infogas där <slot /> visas.

Nästlade layouts

Lägg till +layout.svelte i valfri undermapp för sektionsspecifika layouts.

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

Layoutarv

Sidor ärver alla överordnade layouts från roten och nedåt. Stapla dem för gemensamma gränssnitt.

Ladda data till en layout

Kombinera med +layout.js för att läsa in data som behövs i layouten.

Villkorligt gränssnitt

Layouts kan läsa $page för att anpassa sig efter den aktuella URL:en.

Åsidosätt layout

Använd notationen +page@ för att koppla bort en specifik sida från en layout.

Layoutgrupper

Använd mappar som (marketing) för layouts som inte lägger till URL-segment.

Felsidor

Placera +error.svelte i valfri layoutmapp för att fånga fel för den sektionen.

Återanvänd layouts

Layouts gör det enkelt att skapa ett konsekvent gränssnitt. Ingen prop drilling behövs.

Snabb kontroll

Var renderas sidan inuti en layout?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Layouts omsluter sidor via +layout.svelte med en <slot />. De nästlas efter mappdjup.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Layoutfiler: +layout.svelte” gratis?

Ja – hela texten till ”Layoutfiler: +layout.svelte” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Layoutfiler: +layout.svelte”?

Dela navigering och skal-UI mellan flera sidor med layoutkomponenter. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?

Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Layoutfiler: +layout.svelte”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?

Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Sveltejs Academy