ДокументацияНа основе файлов
Макеты
Макет оборачивает каждую страницу ниже своего каталога. Гнездо макетов: страница отображается внутри макета своего каталога, который отображается внутри макета родительского каталога, вплоть до корневого макета.
Каждому типу файла макета соответствует одна страница:
| Файл | Режим | Владеет HTML-документом | Страница |
|---|---|---|---|
layout.nexy |
сервер (useCSR = False) |
да, в корне | layout.nexy |
layout.tsx |
клиент (useCSR = True) |
да, в корне (React, Solid, Preact) | React, Solid, Preact |
layout.vue |
клиент | да, в корне | layout.vue |
layout.svelte |
клиент | да, в корне | layout.svelte |
В проекте используется одно семейство. layout.nexy и layout.tsx не могут находиться в одном проекте: в режиме сервера есть макеты .nexy, а в режиме клиента - макеты фреймворка. См. Режим сервера и режим клиента.
Как браузер берет на себя управление документом
В клиентском режиме Nexy отображает корневой макет в Node, поэтому первым ответом является полный документ. Затем браузер берет на себя управление одним из двух способов:
| Структура | Поглощение | Что это означает |
|---|---|---|
| React, Solid | гидратирование всего документа | серверный HTML используется повторно в том виде, в каком он есть |
| Preact, Vue, Svelte | перехват тела | фреймворк создает тело страницы и заменяет его на тело, отправленное сервером |
Preact, Vue и Svelte не могут увлажнять весь документ: hydrate в Preact создает второй элемент <html>, компилятор Vue удаляет <script> из клиентского шаблона, а Svelte не может создать <html>, <head> или <body> в браузере. Таким образом, для них атрибуты <html>, <head> и <body> - это те, которые отправляет сервер, и браузер создает только тело. На практике:
- Поместите заголовок, метатеги, шрифты и сценарий темы в корневой макет: они отображаются сервером и остаются такими, какие они есть.
- Привязка к
<html>,<head>или<body>(например, реактивный класс) применяется сервером, но не обновляется в браузере. Измените их из скрипта, как это делает скрипт темы. - Браузер визуализирует тело с нуля вместо повторного использования серверной разметки, поэтому тело заменяется один раз в той же задаче, что и при первом рендеринге.
Корневой макет
Корневой макет - src/routes/layout.<ext>. Он создан nx new и это единственное место, где пишут <!DOCTYPE html>, <html>, <head> и <body> (каждый фреймворк и .nexy). Страницы и вложенные макеты никогда не повторяют их.
dashboard/index отображается как root layout > dashboard layout > page.
Группы маршрутов
Каталог в скобках может иметь собственный макет без изменения URL-адресов:
настойчивость
В клиентском режиме макет остается смонтированным, пока пользователь перемещается между разделяющими его страницами: его DOM, состояние и положение прокрутки сохраняются. В режиме сервера каждая навигация представляет собой новый документ.