Tương tự như các tệp +layout.svelte tạo UI (giao diện người dùng) cho mỗi child route (định tuyến con), thì các tệp +layout.server.js tải dữ liệu cho mỗi định tuyến con.
Giả sử chúng ta muốn thêm một cột "bài viết khác" vào trang bài viết blog của chúng ta. Chúng ta có thể trả về summaries từ hàm load trong src/routes/blog/[slug]/+page.server.js, giống như chúng ta làm trong src/routes/blog/+page.server.js, nhưng như vậy sẽ bị lặp lại.
Thay vào đó, chúng ta hãy đổi tên src/routes/blog/+page.server.js thành src/routes/blog/+layout.server.js. Lưu ý: đường dẫn /blog vẫn hoạt động — data.summaries vẫn có sẵn cho trang.
Bây giờ, ta hãy thêm một cột trong bố cục cho trang bài viết:
<script>
export let data;
</script>
<div class="layout">
<main>
<slot></slot>
</main>
<aside>
<h2>Xem thêm</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>Bố cục (và tất cả các trang dưới nó) kế thừa data.summaries từ +layout.server.js cha.
Khi chúng ta chuyển từ một bài viết này sang bài viết khác, chúng ta chỉ cần tải dữ liệu cho bài viết đó — layout data (dữ liệu bố cục) vẫn giữ nguyên. Xem tài liệu về invalidation (vô hiệu hóa) để biết thêm thông tin.