Файлы макета: +layout.svelte
Используйте компоненты макета, чтобы разделять навигацию и оболочку интерфейса между несколькими страницами
«Файлы макета: +layout.svelte» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Макеты оборачивают страницы
Файл +layout.svelte оборачивает все страницы в той же папке и её подпапках.
Корневой макет
src/routes/+layout.svelte оборачивает каждую страницу приложения. Это обычное место для навигации и общей оболочки.
<!-- +layout.svelte -->
<nav>...</nav>
<main>
<slot />
</main>Слот
Текущая страница вставляется там, где находится <slot />.
Вложенные макеты
Добавьте +layout.svelte в любую подпапку, чтобы создать макет для отдельного раздела.
src/routes/admin/+layout.svelte // wraps all /admin/* pagesНаследование макетов
Страницы наследуют все родительские макеты от корневого вниз. Объединяйте их для общего интерфейса.
Загрузка данных макета
Используйте вместе с +layout.js, чтобы загружать данные, необходимые макету.
Условный интерфейс
Макеты могут читать $page и изменяться в зависимости от текущего URL.
Сброс макета
Используйте запись +page@, чтобы исключить отдельную страницу из макета.
Группы макетов
Используйте папки вроде (marketing) для макетов, которые не добавляют сегменты URL.
Страницы ошибок
Разместите +error.svelte в любой папке макета, чтобы перехватывать ошибки в этом разделе.
Повторное использование макетов
Макеты упрощают создание единообразного интерфейса. Передача свойств через множество уровней не требуется.
Быстрая проверка
Где отображается страница внутри макета?
Итоги
Макеты оборачивают страницы с помощью +layout.svelte и <slot />. Они вкладываются в соответствии с глубиной папок.
Часто задаваемые вопросы
Урок «Файлы макета: +layout.svelte» бесплатный?
Да — полный текст урока «Файлы макета: +layout.svelte» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Файлы макета: +layout.svelte»?
Используйте компоненты макета, чтобы разделять навигацию и оболочку интерфейса между несколькими страницами Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Файлы макета: +layout.svelte»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Маршрутизация на основе файлов с +page.svelte
- Динамические параметры маршрута: [id]
- Необязательные параметры и параметры остатка
- Файлы макета: +layout.svelte