Маршруты и состояния страниц

Сначала определите, какие фреймы показывают одну страницу. Затем укажите её настоящий адрес, возможные состояния и секции, к которым ведут ссылки. Так пустой каталог не станет вымышленной страницей, а мобильная раскладка — отдельным маршрутом.

Сначала прочитайте общие page и view, затем два значения bp. Они задают ширины одного вида страницы. URL задаётся отдельно через route; bp обозначает подготовленную нативную ширину, не порог CSS-медиазапроса. Открыть в полном размере.

В визуальном экскурсе два корня workshop относятся к одной странице и одному состоянию; различаются их контрольные ширины.

Идентификатор страницы и необязательный маршрут

Корневому фрейму всегда нужен стабильный [page=...]. [route=...] добавляется только тогда, когда известен настоящий рабочий адрес.

Маршрут известен:

contacts [page=contacts] [route=/contacts] [bp=1200] [view=default]
contacts [page=contacts] [route=/contacts] [bp=320] [view=default]

Маршрут пока неизвестен:

contacts [page=contacts] [bp=1200] [view=default]
contacts [page=contacts] [bp=320] [view=default]

Правила:

• [page=...] — стабильный идентификатор страницы;
• [route=...] — настоящий путь, а не догадка или заглушка;
• [route-pattern=...] — настоящий шаблон динамического маршрута;
• отсутствие маршрута в черновике является задачей на будущее, а не блокирующей ошибкой;
• все адаптивы и состояния одной страницы используют один маршрут, когда он известен;
• конкретный маршрут уникален внутри сайта, если это не объявленный шаблон.

Синтаксис маршрута

[route=/]
[route=/contacts]
[route=/catalog]
[route=/catalog/product]
[route-pattern=/catalog/:slug]

• [route=...] задаёт конкретную страницу;
• [route-pattern=...] задаёт реальный шаблон, например карточку товара;
• не придумывайте временный маршрут ради чеклиста;
• не добавляйте завершающий /, кроме корня, если продукт не требует иного;
• значения чувствительны к регистру, но рекомендуется нижний регистр и kebab-case.

Состояния страницы

[view=...] описывает состояние страницы или данных, а не состояние отдельного компонента.

catalog [page=catalog] [route=/catalog] [bp=1200] [view=default]
catalog [page=catalog] [route=/catalog] [bp=1200] [view=empty]
catalog [page=catalog] [route=/catalog] [bp=1200] [view=loading]
catalog [page=catalog] [route=/catalog] [bp=1200] [view=error]

Типовые значения:

default
empty
loading
error
filtered
not-found
unauthorized
success

Правила:

• у страницы должно быть view=default;
• динамической странице при необходимости нужны пустое состояние, загрузка и ошибка;
• все состояния используют один [page] и один [route];
• состояние может менять содержимое, но адаптивы внутри одного состояния сохраняют его смысл;
• сравнение идентификаторов, типов, родителей и текста выполняется только между адаптивами одного [view];
• каждое заявленное состояние должно иметь фрейм для каждой обязательной контрольной ширины страницы.

Не создавайте отдельную страницу для состояния

Плохо:

catalog [page=catalog] [route=/catalog] [view=default]
catalog-empty [page=catalog-empty] [route=/catalog-empty]

Хорошо:

catalog [page=catalog] [route=/catalog] [view=default]
catalog [page=catalog] [route=/catalog] [view=empty]

Если маршрут неизвестен, сохраните один идентификатор страницы и просто не добавляйте [route].

Секции и якоря

Адресуемая секция может иметь одновременно секционный ключ и якорь:

contacts-faq [section=contacts-faq] [anchor=faq]

[section] описывает повторно используемый тип секции. Название конкретного блока и его содержимое могут отличаться:

catalog [section=product-slider]
related-products [section=product-slider]
recommended-products [section=product-slider]
hero [section=home-hero]

Правила:

• не добавляйте Секция / в имя слоя;
• [section] стабилен между адаптивами одной страницы;
• одинаковый [section] на разных страницах допускает разное содержимое;
• якорь уникален внутри страницы;
• одна секция сохраняет один якорь между адаптивами;
• якоря определяются в макете, а не придумываются во время реализации.

Как разрешаются ссылки

contacts [href=/contacts]
faq [href=/contacts#faq]
same-page-faq [href=#faq]
telegram [href=https://t.me/company]

Если адрес неизвестен, используйте [link]. Не используйте [href=#] как заглушку.

Валидатор сопоставляет:

href=/contacts      → страница с [route=/contacts]
href=/contacts#faq  → страница [route=/contacts] и секция [anchor=faq]
href=#faq           → текущая страница и секция [anchor=faq]
href=https://...    → внешний адрес

Если маршрут целевой страницы ещё неизвестен, разрешение ссылки может оставаться задачей на будущее.

Область уникальности

Для корневых фреймов с известным маршрутом:

page + route + bp + view

Для черновика без маршрута:

page + bp + view

Что проверяет валидатор

• корневой фрейм без маршрута отмечается как задача на будущее, а не как ошибка;
• указанный маршрут соответствует формату рабочего пути;
• конкретные маршруты не повторяются;
• одна страница не меняет маршрут между адаптивами;
• каждое состояние существует на обязательных контрольных ширинах;
• динамическая страница имеет необходимые состояния;
• [href=#] не используется как заглушка;
• внутренний маршрут и якорь существуют;
• якорь не повторяется внутри одной страницы;
• состояние страницы не смоделировано отдельным вымышленным маршрутом.