<svelte:head> 元素允許您將元素插入到文件的 <head> 中。這對於諸如 <title> 和 <meta> 標籤之類的事項非常有用，它們對於良好的 SEO 至關重要。
由於這些在本次教學的背景下很難展示，我們將將其用於不同的目的——載入樣式表。
應用程式
<script>
const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
let selected = $state(themes[0]);
</script>
<svelte:head>
<link rel="stylesheet" href="/tutorial/stylesheets/{selected}.css" />
</svelte:head>
<h1>Welcome to my site!</h1>在伺服器端渲染 (SSR) 模式下，
<svelte:head>的內容會與其餘 HTML 分開返回。
上一個 下一個
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
let selected = $state(themes[0]);
</script>
<h1>Welcome to my site!</h1>
<select bind:value={selected}><option disabled>choose a theme</option>
{#each themes as theme} <option>{theme}</option> {/each}</select>