就像 +layout.svelte 文件为每个子路由创建 UI 一样，+layout.server.js 文件为每个子路由加载数据。

¥Just as +layout.svelte files create UI for every child route, +layout.server.js files load data for every child route.

假设我们将更多帖子的侧边栏添加到我们的博客文章页面。我们可以从 src/routes/blog/[slug]/+page.server.js 中的 load 函数返回 summaries，就像我们在 src/routes/blog/+page.server.js 中所做的那样，但那样会重复。

¥Suppose we’d like to add a ‘more posts’ sidebar to our blog post page. We could return summaries from the load function in src/routes/blog/[slug]/+page.server.js, like we do in src/routes/blog/+page.server.js, but that would be repetitive.

相反，让我们将 src/routes/blog/+page.server.js 重命名为 src/routes/blog/+layout.server.js。请注意，/blog 路由继续工作 - data.summaries 仍然可用于页面。

¥Instead, let’s rename src/routes/blog/+page.server.js to src/routes/blog/+layout.server.js. Notice that the /blog route continues to work — data.summaries is still available to the page.

现在，在帖子页面的布局中添加一个侧边栏：

¥Now, add a sidebar in the layout for the post page:

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

¥The layout (and any page below it) inherits data.summaries from the parent +layout.server.js.

当我们从一篇文章导航到另一篇文章时，我们只需要加载文章本身的数据 - 布局数据仍然有效。有关 invalidation 的文档以了解更多信息。

¥When we navigate from one post to another, we only need to load the data for the post itself — the layout data is still valid. See the documentation on invalidation to learn more.