Phần tử <svelte:head> cho phép bạn chèn các phần tử vào trong thẻ <head> của document. Điều này hữu ích cho các thẻ <title> và <meta>, quan trọng để tối ưu hóa SEO.
Vì những thẻ đó khá khó để hiển thị trong ngữ cảnh của bài hướng dẫn này, chúng ta sẽ sử dụng nó cho một mục đích khác — tải các stylesheets.
App.svelte
<script>
const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
let selected = themes[0];
</script>
<svelte:head>
<link rel="stylesheet" href="/stylesheets/{selected}.css" />
</svelte:head>
<h1>Chào mừng đến với site của tôi!</h1>Trong chế độ render trên máy chủ (SSR), nội dung của svelte:head được trả về một cách riêng biệt so với phần còn lại của mã HTML của bạn.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
let selected = themes[0];
</script>
<h1>Chào mừng đến với site của tôi!</h1>
<select bind:value={selected}><option disabled>chọn một theme</option>
{#each themes as theme} <option>{theme}</option> {/each}</select>