布局文件：+layout.svelte
使用布局组件在多个页面之间共享导航和外壳用户界面。
布局文件：+layout.svelte 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
布局包裹页面
+layout.svelte 文件会包裹同一文件夹及其子文件夹中的所有页面。
根布局
src/routes/+layout.svelte 会包裹应用中的每个页面。导航栏和整体框架通常放在这里。
<!-- +layout.svelte -->
<nav>...</nav>
<main>
<slot />
</main>插槽
当前页面会插入到 <slot /> 所在的位置。
嵌套布局
在任意子文件夹中添加 +layout.svelte，即可为特定区域创建布局。
src/routes/admin/+layout.svelte // wraps all /admin/* pages布局继承
页面会从根布局开始继承所有父级布局。您可以将它们层叠起来，复用共享界面。
布局数据加载
与 +layout.js 搭配，为布局加载所需的数据。
条件界面
布局可以读取 $page，根据当前网址进行调整。
重置布局
使用 +page@ 记法，让特定页面脱离某个布局。
布局组
使用 (marketing) 等文件夹创建不添加网址段的布局。
错误页面
将 +error.svelte 放在任意布局文件夹中，即可捕获该区域的错误。
复用布局
布局可以轻松实现一致的界面，无需逐层传递属性。
快速检查
页面会在布局中的什么位置渲染？
回顾
布局通过带有 <slot /> 的 +layout.svelte 包裹页面，并且会根据文件夹层级嵌套。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 41
- 课程
- 163
常见问题解答
「布局文件：+layout.svelte」课时是免费的吗？
是的 — 「布局文件：+layout.svelte」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「布局文件：+layout.svelte」这节课中我会学到什么？
使用布局组件在多个页面之间共享导航和外壳用户界面。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「布局文件：+layout.svelte」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 使用 +page.svelte 进行基于文件的路由
- 动态路由参数：[id]
- 可选参数与剩余参数
- 布局文件：+layout.svelte