Latihan 1 dari materi SvelteKit Routing di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kamu menulis +layout.svelte. Kode awal sudah punya <nav> berisi <a href="/">Home</a> dan <a href="/about">About</a>. Biarkan keduanya.
Di bawah </nav>, sediakan tempat untuk isi halaman: <slot />. Bentuk rune juga diterima: let { children } = $props() di <script>, lalu {@render children?.()}. Tanda ?. perlu karena editor gak mengirim halaman ke layout-nya.
Yang dicek:
Halaman punya <nav>.
Ada minimal 2 tautan <a>, dan minimal 2 tautan di dalam nav punya href.
Salah satunya menuju /, satunya menuju /about.
Kodemu punya <slot /> (atau <slot></slot>, atau {@render children?.()}), di luar komentar.
Di editor latihan gak ada halaman yang dikirim ke slot itu, jadi yang tampil cuma nav-nya.
Hint
Layout membungkus halaman. Dia butuh satu tempat di mana halaman yang sedang dibuka digambar, sama seperti slot di pelajaran Slots.
Nav dari kode awal sudah benar. Tambahkan satu tag slot tanpa nama, sendirian, di bawah penutup nav.
<nav> <a href="/">Home</a> <a href="/about">About</a> </nav> lalu <slot />
</>{ }.css=>#idfn()
Versi baru
HyperSheets
bagian dari BelajarWeb.dev
0%
Membuka gerbang…
HyperSheets
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...