Sveltejs Academy · Oppitunti

Asettelu-tiedostot: +layout.svelte

Jakakaa navigointi ja käyttöliittymän runko useille sivuille layout-komponenttien avulla.

Oppitunti 4/413 vaihetta

Asettelu-tiedostot: +layout.svelte on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Sveltejs Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.

Layoutit ympäröivät sivut

+layout.svelte-tiedosto ympäröi kaikki saman kansion ja sen alikansioiden sivut.

Juurilayout

src/routes/+layout.svelte ympäröi sovelluksen kaikki sivut. Se on yleinen paikka navigaatiolle ja sovelluksen rungolle.

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

Slot

Nykyinen sivu lisätään kohtaan, jossa <slot /> esiintyy.

Sisäkkäiset layoutit

Lisätkää +layout.svelte mihin tahansa alikansioon osiokohtaisia layouteja varten.

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

Layoutien periytyminen

Sivut perivät kaikki yläkansioiden layoutit juuresta alaspäin. Ketjuttakaa ne jaetun käyttöliittymän rakentamiseksi.

Layoutin tietojen lataaminen

Yhdistäkää +layout.js-tiedostoon ladataksenne layoutissa tarvittavat tiedot.

Ehdollinen käyttöliittymä

Layoutit voivat lukea $page-storea ja mukautua nykyisen URL-osoitteen perusteella.

Layoutin nollaaminen

Käyttäkää +page@-syntaksia irrottaaksenne yksittäisen sivun layoutista.

Layout-ryhmät

Käyttäkää esimerkiksi (marketing)-kansioita layouteihin, jotka eivät lisää URL-segmenttejä.

Virhesivut

Sijoittakaa +error.svelte mihin tahansa layout-kansioon, jos haluatte käsitellä kyseisen osion virheet.

Layoutien uudelleenkäyttö

Layoutit helpottavat yhtenäisen käyttöliittymän luomista. Propseja ei tarvitse välittää komponenttiketjussa.

Pikatarkistus

Mihin kohtaan sivu renderöidään layoutissa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Layoutit ympäröivät sivut +layout.svelte-tiedoston ja <slot />-elementin avulla. Ne ovat sisäkkäisiä kansioiden syvyyden mukaan.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Asettelu-tiedostot: +layout.svelte” ilmainen?

Kyllä – oppitunnin ”Asettelu-tiedostot: +layout.svelte” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Sveltejs Academy-kurssin, päivitä CoddyKit PROhon. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Asettelu-tiedostot: +layout.svelte”?

Jakakaa navigointi ja käyttöliittymän runko useille sivuille layout-komponenttien avulla. Harjoittelet Sveltejs Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Sveltejs Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Sveltejs Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Asettelu-tiedostot: +layout.svelte”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Sveltejs Academy-oppitunnilla?

Kyllä. Jokainen Sveltejs Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Tiedostopohjainen reititys +page.svelte-tiedostolla
Dynaamiset reittiparametrit: [id]
Valinnaiset ja loput parametrit
Asettelu-tiedostot: +layout.svelte

← Takaisin: Sveltejs Academy