<svelte:head> 元素允许你在文档的 <head> 内插入元素。这对于 <title> 和 <meta> 标签等对 SEO 至关重要的元素非常有用。
由于这些在本教程的上下文中比较难展示，我们将用它来实现一个不同的目的 — 加载样式表。
App
<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><script lang="ts">
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>