Внутренняя страница — рабочая лошадь сайта. Её задача не удивлять, а помогать читать: чтобы человек понимал, где он, видел, что будет дальше, и не терял строку в длинном тексте.
Порядок блоков
Сверху вниз, ровно в этом порядке — он одинаков на всех тридцати пяти страницах.
| Блок | Зачем он нужен |
|---|---|
| Хлебные крошки | Показывают, где мы в дереве сайта, и дают уйти на уровень выше |
| Шапка страницы | Заголовок, пояснение и условия: сколько читать, что понадобится |
| Боковое меню или оглавление | Меню — если страница часть раздела; оглавление — если она длинная и отдельная |
| Статья | Собственно текст: заголовки, абзацы, таблицы, код, врезки |
| Что должно получиться | Короткий список итогов — по нему читатель проверяет себя |
| Назад и вперёд | Переход к соседям, чтобы не возвращаться в меню за каждым шагом |
Шапка тише, чем у раздела
Шапка внутренней страницы сделана тем же приёмом, что шапка хаба, — тёмная обложка с цветным пятном, — но нарочно потише: пятно меньше, сама полоса ниже, подписи мельче. Это и есть способ показать вложенность: не другой приём, а тот же самый, убавленный по громкости. Разные приёмы на соседних уровнях читаются как разные сайты.
Две колонки и что в них ставить
Слева текст, справа — узкая колонка. Что именно в ней стоит, зависит от того, часть ли страница последовательности.
- Страница внутри этапа получает список соседних страниц этапа: читатель идёт по порядку и должен видеть, где он в этом порядке.
- Мануал или статья теории получает оглавление самой страницы. Такие страницы читают по одной и не подряд, зато они длинные — и нужно уметь перескочить к нужному заголовку.
На телефоне ни то, ни другое в колонку не влезает, поэтому узкая колонка превращается в сворачиваемый блок над текстом. Важная мелочь: в разметке оглавление стоит раньше статьи, а вправо его уводит CSS. Так на телефоне оно оказывается там, где нужно, без дублирования разметки.
Оглавление собирается скриптом
Писать список заголовков руками — гарантированная рассинхронизация: текст поправили, список забыли. Небольшой скрипт проходит по заголовкам статьи и строит оглавление сам. Если заголовков меньше трёх, он вообще ничего не выводит — оглавление из двух пунктов не помогает.
Ограничение, о котором забывают
Длина строки текста — не больше 68 знаков. На большом мониторе текст без ограничения растягивается на всю ширину, и глаз теряет начало следующей строки. Ограничивать нужно везде, где блок может растянуться: не только в статье, но и в описаниях карточек и во врезках.
Исключения ровно три — таблица, блок кода и картинка. Этим ширина нужна вся, а если содержимое всё равно не влезло, они получают собственную прокрутку внутри себя и не растягивают страницу целиком.
Что просить у нейросети
Свёрстай раскладку внутренней страницы сайта: хлебные крошки, заголовок с пояснением, две колонки — статья и узкая колонка справа с липким оглавлением, внизу переходы «Назад» и «Вперёд».
Требования: чистый CSS, БЭМ, mobile-first. Две колонки включаются с 1024 пикселей; ниже — одна колонка, и оглавление становится сворачиваемым блоком над текстом. В разметке оглавление должно идти до статьи, а вправо его уводи через grid-column, не порядком в HTML.
Ширину текста ограничь 68 знаками. Кнопку оглавления сделай настоящим button с aria-expanded и aria-controls, чтобы она работала с клавиатуры.
Ответь одним блоком HTML и одним блоком CSS. Классы назови так: page-layout, article, toc, page-nav.
Имена классов в запросе стоят не для красоты. Назвав их заранее, вы получите код, который встанет рядом с уже написанным, а не принесёт третий набор имён для тех же самых вещей.
Что должно получиться
- Одна раскладка, которая одинаково работает для этапа, мануала и статьи
- На телефоне одна колонка, узкая колонка свёрнута в кнопку над текстом
- Строка текста не длиннее 68 знаков ни в статье, ни в карточках
- Крошки и переходы к соседям стоят на каждой странице, кроме главной