就像 +layout.svelte 文件为每个子路由创建 UI 一样，+layout.server.js 文件为每个子路由加载数据。
假设我们想要在博客文章页面添加一个”更多文章”的侧边栏。我们可以在 src/routes/blog/[slug]/+page.server.js 的 load 函数中返回 summaries，就像在 src/routes/blog/+page.server.js 中那样，但这会导致代码重复。
相反，让我们将 src/routes/blog/+page.server.js 重命名为 src/routes/blog/+layout.server.js。注意 /blog 路由继续正常工作 — data.summaries 仍然可以在页面中使用。
现在，在文章页面的布局中添加一个侧边栏：
src/routes/blog/[slug]/+layout
<script>
let { data, children } = $props();
</script>
<div class="layout">
<main>
{@render children()}
</main>
<aside>
<h2>More posts</h2>
<ul>
{#each data.summaries as { slug, title }}
<li>
<a href="/blog/{slug}">{title}</a>
</li>
{/each}
</ul>
</aside>
</div>
<style>
@media (min-width: 640px) {
.layout {
display: grid;
gap: 2em;
grid-template-columns: 1fr 16em;
}
}
</style><script lang="ts">
let { data, children } = $props();
</script>
<div class="layout">
<main>
{@render children()}
</main>
<aside>
<h2>More posts</h2>
<ul>
{#each data.summaries as { slug, title }}
<li>
<a href="/blog/{slug}">{title}</a>
</li>
{/each}
</ul>
</aside>
</div>
<style>
@media (min-width: 640px) {
.layout {
display: grid;
gap: 2em;
grid-template-columns: 1fr 16em;
}
}
</style>布局（以及其下的任何页面）从父级 +layout.server.js 继承 data.summaries。
当我们从一篇文章导航到另一篇文章时，我们只需要加载文章本身的数据 — 布局数据仍然有效。查看有关失效的文档以了解更多信息。
1
2
<p>home</p>