Макеты на уровне маршрута
Добавляйте макет, применяемый только к определённому маршруту и его дочерним маршрутам
«Макеты на уровне маршрута» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Специальные макеты
Можно добавить макет, применяемый только к определённому маршруту и его дочерним маршрутам, разместив +layout.svelte в папке этого маршрута.
Наследование макетов
Вложенные макеты объединяются в цепочку: корневой макет оборачивает макет раздела, а тот — страницу.
Навигация для раздела
В разделе администрирования может быть собственный макет с боковой панелью, наследующий глобальный заголовок.
Данные макета
Каждый макет может загружать собственные данные; данные передаются во вложенные макеты и страницы.
Повторное использование макетов
Избегайте дублирования разметки, вынося макеты в самую глубокую общую папку.
Сочетание с группами
Сочетайте группы и макеты на уровне маршрутов для построения сложной архитектуры.
Страницы ошибок
У каждого макета может быть собственный +error.svelte для ошибок, специфичных для раздела.
Серверные и универсальные макеты
+layout.server.js выполняется только на сервере, а +layout.js — везде.
Композиция
Представляйте макеты как составные оболочки. Каждый из них добавляет дочерним элементам контекст, стили или данные.
Цепочка наследования
Каждая страница отображается внутри всех макетов-предков. Последовательно переходите к конечным страницам.
Производительность
Макеты кэшируются и повторно используются при навигации в пределах своей области действия.
Быстрая проверка
Как работают вложенные макеты?
Итоги
Добавляйте +layout.svelte в каждую папку для создания интерфейса, специфичного для раздела; макеты автоматически объединяются с макетами-предками.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Макеты на уровне маршрута» бесплатный?
Да — полный текст урока «Макеты на уровне маршрута» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Макеты на уровне маршрута»?
Добавляйте макет, применяемый только к определённому маршруту и его дочерним маршрутам Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Макеты на уровне маршрута»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Группы макетов с (group)
- Макеты на уровне маршрута
- Выход из макета с +page@route
- Общие данные между макетами