File Tata Letak: +layout.svelte
Bagikan navigasi dan UI kerangka di beberapa halaman dengan komponen tata letak.
File Tata Letak: +layout.svelte adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Tata Letak Membungkus Halaman
Berkas +layout.svelte membungkus semua halaman dalam direktori yang sama beserta subdirektorinya.
Tata Letak Utama
src/routes/+layout.svelte membungkus setiap halaman dalam aplikasi. Tempat yang umum untuk navigasi dan kerangka aplikasi.
<!-- +layout.svelte -->
<nav>...</nav>
<main>
<slot />
</main>Slot Penyisipan
Halaman saat ini disisipkan di tempat <slot /> muncul.
Tata Letak Bersarang
Tambahkan +layout.svelte di subdirektori mana pun untuk tata letak khusus bagian tersebut.
src/routes/admin/+layout.svelte // wraps all /admin/* pagesPewarisan Tata Letak
Halaman mewarisi semua tata letak induk dari akar hingga ke bawah. Tumpuk tata letak tersebut untuk antarmuka pengguna bersama.
Pemuatan Data Tata Letak
Padukan dengan +layout.js untuk memuat data yang diperlukan dalam tata letak.
Antarmuka Kondisional
Tata letak dapat membaca $page untuk menyesuaikan diri berdasarkan URL saat ini.
Atur Ulang Tata Letak
Gunakan notasi +page@ untuk keluar dari tata letak pada halaman tertentu.
Grup Tata Letak
Gunakan direktori seperti (marketing) untuk tata letak yang tidak menambahkan segmen URL.
Halaman Kesalahan
Tempatkan +error.svelte di direktori tata letak mana pun untuk menangani kesalahan pada bagian tersebut.
Menggunakan Kembali Tata Letak
Tata letak memudahkan pembuatan antarmuka pengguna yang konsisten. Anda tidak perlu meneruskan properti melalui banyak komponen.
Pemeriksaan Singkat
Di mana halaman ditampilkan di dalam tata letak?
Rangkuman
Tata letak membungkus halaman melalui +layout.svelte dengan <slot />. Tata letak tersebut bersarang berdasarkan kedalaman direktori.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “File Tata Letak: +layout.svelte” gratis?
Ya — teks lengkap “File Tata Letak: +layout.svelte” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “File Tata Letak: +layout.svelte”?
Bagikan navigasi dan UI kerangka di beberapa halaman dengan komponen tata letak. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “File Tata Letak: +layout.svelte” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Perutean Berbasis File dengan +page.svelte
- Parameter Rute Dinamis: [id]
- Parameter Opsional dan Sisa
- File Tata Letak: +layout.svelte