Sveltejs Academy · Pelajaran

Fail Susun Atur: +layout.svelte

Kongsi navigasi dan UI rangka merentas berbilang halaman dengan komponen susun atur.

Pelajaran 4 daripada 413 langkah

Fail Susun Atur: +layout.svelte ialah pelajaran Sveltejs Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Sveltejs Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Sveltejs Academy merangkumi sejumlah 4 pelajaran.

Reka Letak Membalut Halaman

Fail +layout.svelte membalut semua halaman dalam folder yang sama serta subfoldernya.

Reka Letak Akar

src/routes/+layout.svelte membalut setiap halaman dalam aplikasi. Ini ialah tempat biasa untuk navigasi dan rangka aplikasi.

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

Slot

Halaman semasa disuntik pada tempat <slot /> muncul.

Reka Letak Bersarang

Tambahkan +layout.svelte dalam mana-mana subfolder untuk reka letak khusus bahagian.

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

Pewarisan Reka Letak

Halaman mewarisi semua reka letak induk dari akar ke bawah. Susunkannya untuk UI yang dikongsi.

Pemuatan Data Reka Letak

Gabungkan dengan +layout.js untuk memuatkan data yang diperlukan dalam reka letak.

UI Bersyarat

Reka letak boleh membaca $page untuk melaraskan kandungan berdasarkan URL semasa.

Tetapkan Semula Reka Letak

Gunakan tatatanda +page@ untuk keluar daripada reka letak bagi halaman tertentu.

Kumpulan Reka Letak

Gunakan folder seperti (marketing) untuk reka letak yang tidak menambah segmen URL.

Halaman Ralat

Letakkan +error.svelte dalam mana-mana folder reka letak untuk menangkap ralat bagi bahagian tersebut.

Menggunakan Semula Reka Letak

Reka letak memudahkan penciptaan UI yang konsisten. Penghantaran prop berantai tidak diperlukan.

Semakan Pantas

Di manakah halaman dipaparkan dalam reka letak?

Jawab dalam pelajaran interaktif

Ulang Kaji

Reka letak membalut halaman melalui +layout.svelte dengan <slot />. Reka letak bersarang mengikut kedalaman folder.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Fail Susun Atur: +layout.svelte” percuma?

Ya — teks penuh “Fail Susun Atur: +layout.svelte” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Sveltejs Academy, tingkat taraf kepada CoddyKit PRO. Kursus Sveltejs Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Fail Susun Atur: +layout.svelte”?

Kongsi navigasi dan UI rangka merentas berbilang halaman dengan komponen susun atur. Anda berlatih Sveltejs Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Sveltejs Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Sveltejs Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Fail Susun Atur: +layout.svelte” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Sveltejs Academy ini?

Ya. Setiap pelajaran Sveltejs Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Penghalaan Berasaskan Fail dengan +page.svelte
Parameter Laluan Dinamik: [id]
Parameter Pilihan dan Rest
Fail Susun Atur: +layout.svelte

← Kembali ke Sveltejs Academy