Хлебные крошки и переходы между уроками

Хлебные крошки и переходы между уроками отвечают на разные вопросы. Крошки показывают, где материал находится в библиотеке. Переходы помогают продолжить выбранную последовательность. Если оформить их как один случайный набор ссылок, читателю придётся самостоятельно угадывать направление.

В этом уроке вы уточните обе группы reading-lab, сохранив настоящие адреса. Мы не создаём новую систему коллекций и не меняем старый порядок ProfessorWeb. Пример касается оформления уже заданных ссылок; связь страниц остаётся отдельным источником данных.

Место материала в библиотеке

В верхней строке макета есть путь от общего каталога к статическим сайтам и текущему учебному образцу. Это место в рубрикации, а не список всех посещённых страниц. Если человек пришёл прямо из поиска, логический путь остаётся полезным. Поэтому хлебные крошки не нужно строить из истории браузера.

Последняя часть обозначает текущую страницу и не требует ссылки на неё же. В исходнике используется aria-current="page", которое сохраняем. Визуально она отличается спокойным текстом. На длинном пути можно переносить элементы на новую строку; скрывать середину с недоступным многоточием без отдельного действия не следует.

Не связывайте изменение рубрики со сменой адреса статьи. Старый урок LINQ может получить новое место в общем каталоге, оставаясь по /my/LINQ/linq_xml/level7/7_1.php. Это один материал с постоянным маршрутом. Рисовать новый путь в хлебных крошках допустимо только через действительные страницы каталога, а не через придуманные папки.

Разделитель также не должен выглядеть как часть названия. У нашего исходного макета это простой слеш. Его можно оставить спокойным, поскольку сами ссылки зелёные. Более сложная стрелка или SVG не обязательны для результата: ясность создают последовательность и точные слова, а не стоимость значка.

Оформление верхнего пути

Создайте полный файл lesson-12.css:

.reading-lab .lab-breadcrumbs { color: var(--lab-muted); line-height: 1.6; overflow-wrap: anywhere; }
.reading-lab .lab-breadcrumbs a { text-underline-offset: .2em; }
.reading-lab .lab-breadcrumbs [aria-current="page"] { color: var(--lab-ink); }
.reading-lab .lab-pager { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.reading-lab .lab-pager a { display: block; padding: 1rem; background: var(--lab-surface); border-radius: var(--lab-radius); text-decoration: none; }
.reading-lab .lab-pager a:hover { background: var(--lab-soft); text-decoration: underline; }
@media (min-width: 42rem) {
  .reading-lab .lab-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

Ожидается компактный верхний путь и более крупная нижняя область переходов. Это различие объясняется задачами: крошки поддерживают ориентацию во время начала чтения, а нижние ссылки становятся выбором следующего действия. Крупная область ссылки внизу не означает, что крошки можно сделать практически невидимыми.

На узком экране переходы стоят один под другим. На широком получают две равные дорожки с нулевым минимумом. Длинное название может занять несколько строк и увеличить высоту карточки. Фиксированной высоты нет, потому что она создала бы риск обрезания при изменении размера текста. Если карточки визуально различаются, сначала оцените содержание, а не уменьшайте один заголовок отдельно.

Мы не меняем цвет фирменных ссылок и не добавляем цветную полосу с одной стороны. Поверхность и внутреннее расстояние уже показывают область действия. При наведении появляется дополнительное подчёркивание, а видимый фокус из базы остаётся. Новое оформление не отменяет исходные состояния ссылки.

Последовательность без догадок

У исходного стенда нижние ссылки ведут в тематические разделы. Их тексты честно говорят «К материалам…», поэтому они не притворяются кнопками следующего урока. Для примера последовательной навигации можно заменить целиком содержимое существующего nav.lab-pager следующими двумя ссылками на главы этой серии:

<a href="/articles/article-design-11-lesson-metadata.html">Предыдущий урок: метаданные</a>
<a href="/articles/article-design-13-sources-related.html">Следующий урок: источники и связанные материалы</a>

Эта разметка показывает будущую форму переходов, а не рабочую локальную навигацию самостоятельного HTML-файла: корневые адреса относятся к будущему сайту после выпуска соответствующих черновиков. В сохранённом running-макете оставляем действительные тематические ссылки. Учебный дизайн можно оценить с теми же поверхностями, не выдавая неопубликованные маршруты за доступные страницы.

Названия «Предыдущий» и «Следующий» полезно дополнять темой. Когда человек заканчивает чтение, он может решить, подходит ли продолжение. Две одинаковые стрелки без слов не передают этого. При длинном названии допустимо краткое тематическое обозначение, если оно не меняет смысл следующего шага.

Первая глава серии не имеет предыдущего урока, а последняя — следующего. Пустая карточка не нужна. Сетка должна допускать один элемент без фиктивной ссылки «Назад» на текущую страницу. Если требуется возвращение к оглавлению курса, это отдельное действие с собственным названием, а не подмена отсутствующей соседней главы.

Указатель направления должен соответствовать языку и содержанию. В русскоязычной последовательности привычная стрелка вправо поддерживает слово «Следующий», но не заменяет его. Если интерфейс позднее локализуется для другого направления письма, нужно пересмотреть и расположение, и значки. Поэтому в основном макете направление названо словами, а декоративная стрелка не является единственным носителем информации.

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

Как сочетать старую и новую навигацию

В ProfessorWeb прежние последовательности заданы коллекциями. Поле order новой статьи сортирует её в каталоге, но само не создаёт пары переходов. Поэтому дизайнеру нужно знать источник связей, чтобы не придумать поведение, которое данные не поддерживают. Данный урок не требует ручного дублирования всех старых списков.

При применении нового оформления к старой статье сохраняйте значения href. Замена поверхности, отступа и текста служебного обозначения не должна незаметно вести к другому материалу. Особенно важно различать старое оглавление раздела и следующую страницу конкретной главы: это разные маршруты, хотя оба могут иметь знакомое слово «Далее».

Не используйте браузерное «назад» как обязательный предыдущий урок. История зависит от того, откуда пришёл читатель, а учебная последовательность — от содержания курса. Человек мог открыть материал в новой вкладке, и тогда возврат будет иметь другое значение. Постоянная ссылка на соседнюю главу предсказуемее.

Для самостоятельной проверки подготовьте три варианта нижней области: две ссылки, только следующая и только возвращение к оглавлению. Поменяйте длину названий. Ожидайте, что форма остаётся понятной без пустых декоративных элементов. На странице библиотеки навигация должна описывать возможное действие, а не заставлять читателя угадывать отсутствующее.

После этого урока верхний путь и продолжение чтения имеют разные визуальные роли и сохраняют адреса материалов. В следующем уроке отделим ещё две группы ссылок: доказательные источники текущего объяснения и статьи, которые можно читать дальше.