就像 +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 仍然可用于页面。

现在，在文章页面的布局中添加一个侧边栏

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

布局（以及其下的任何页面）继承来自父 +layout.server.js 的 data.summaries。

当我们从一篇帖子导航到另一篇帖子时，我们只需要加载帖子本身的数据——布局数据仍然有效。请参阅有关 失效 的文档以了解更多信息。