Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

<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>