您的應用程式的不同路由通常會共享通用 UI。 我們可以使用 +layout.svelte 元件來套用至相同目錄中的所有路由，而無需在每個 +page.svelte 元件中重複它。

在此應用程式中，我們有兩個路由，src/routes/+page.svelte 和 src/routes/about/+page.svelte，其中包含相同的導覽 UI。 讓我們建立一個新檔案，src/routes/+layout.svelte...

src/routes/
├ about/
│ └ +page.svelte
├ +layout.svelte
└ +page.svelte

...並將重複的內容從 +page.svelte 檔案移至新的 +layout.svelte 檔案。 {@render children()} 標籤是將呈現頁面內容的位置

<script>
	let { children } = $props();
</script>

<nav>
	<a href="/">home</a>
	<a href="/about">about</a>
</nav>

{@render children()}

+layout.svelte 檔案會套用至每個子路由，包括同層的 +page.svelte (如果存在)。 您可以將版面配置巢狀至任意深度。