<svelte:head>
元素允许你在文档的 <head>
内插入元素。这对于 <title>
和 <meta>
标签等内容很有用,这些标签对于良好的 SEO 至关重要。
¥The <svelte:head>
element allows you to insert elements inside the <head>
of your document. This is useful for things like <title>
and <meta>
tags, which are critical for good SEO.
由于在本教程的上下文中很难展示这些内容,我们将它用于不同的目的 - 加载样式表。
¥Since those are quite hard to show in the context of this tutorial, we’ll use it for a different purpose — loading stylesheets.
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 分开返回。¥[!NOTE] In server-side rendering (SSR) mode, contents of
<svelte:head>
are returned separately from the rest of your 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>