跳至主要内容

<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 的其余部分分开返回。

在 GitHub 上编辑此页面

上一页 下一页
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>