Макеты: +layout.svelte

Макет (layout) — общая обёртка для нескольких страниц: шапка, меню, подвал. Его пишут один раз в файле +layout.svelte, а SvelteKit выводит внутри него текущую страницу. При переходе между страницами макет не перерисовывается заново — меняется только содержимое.

Корневой макет

Макет в папке src/routes действует на весь сайт. Если файла src/routes/+layout.svelte ещё нет, создайте его:

<!-- src/routes/+layout.svelte -->
<script>
  let { children } = $props();
</script>
 
<header>
  <nav>
    <a href="/">Главная</a>
    <a href="/blog">Блог</a>
    <a href="/about">О сайте</a>
  </nav>
</header>
 
<main>
  {@render children()}
</main>
 
<footer>© 2026 Мой блог</footer>

Теперь меню и подвал видны на /, /blog и /about. Страница приходит в макет как сниппет children — тот же приём, что в уроке о сниппетах.

Вложенный макет

Макет в подпапке оборачивает только страницы этого раздела и сам выводится внутри корневого. Создайте src/routes/blog/+layout.svelte:

<!-- src/routes/blog/+layout.svelte -->
<script>
  let { children } = $props();
</script>
 
<div class="blog">
  <aside>
    <a href="/blog/new">Написать статью</a>
  </aside>
  {@render children()}
</div>

На /blog и /blog/new появится боковая ссылка «Написать статью», а на главной её не будет. Общее меню из корневого макета остаётся на всех страницах.

Текущая ссылка

Чтобы выделить пункт меню текущей страницы, нужен её адрес. Его даёт объект page из модуля $app/state:

<!-- src/routes/+layout.svelte -->
<script>
  import { page } from '$app/state';
 
  let { children } = $props();
</script>
 
<nav>
  <a href="/" class:active={page.url.pathname === '/'}>Главная</a>
  <a href="/blog" class:active={page.url.pathname.startsWith('/blog')}>Блог</a>
</nav>
 
{@render children()}
 
<style>
  .active {
    font-weight: bold;
  }
</style>

На /blog и всех вложенных адресах пункт «Блог» станет жирным. page.url — обычный объект URL, а page обновляется при каждом переходе.

Глобальные стили

Корневой макет — подходящее место, чтобы подключить общий файл стилей: добавьте в его <script> строку import '../app.css';, и стили из src/app.css применятся ко всем страницам.

Частая ошибка

Забыть вывести children в макете. Страница откроется, меню будет на месте, а содержимого страниц не будет ни на одном адресе. В каждом +layout.svelte должен быть {@render children()}.