Источники и связанные материалы

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

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

Источник рядом с утверждением

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

Визуально такая ссылка остаётся частью обычного предложения. Не нужно оформлять каждую ссылку на документацию как крупную отдельную карточку. Это разрывает объяснение, особенно когда рядом встречаются несколько свойств. Краткое название документа и фирменный цвет уже дают понятное действие.

Отдельный список источников нужен, если материал опирается на несколько важных документов и полезно вернуться к ним после чтения. Такой список дополняет локальные ссылки, а не оправдывает отсутствие точного основания рядом с техническим утверждением. Для дизайна существенна его компактность: источник не является обещанием нового урока.

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

Компактная группа документов

После div.lab-prose и перед существующим nav.lab-pager добавьте следующий полный фрагмент. Он вводит новый класс lab-sources, который определим ниже:

<section class="lab-sources" aria-labelledby="sources-title">
  <h2 id="sources-title">Документы для уточнения</h2>
  <ul>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure">MDN: элемент figure</a> — структура иллюстрации.</li>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/white-space">MDN: white-space</a> — сохранение строк.</li>
  </ul>
</section>

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

Теперь создайте полный файл lesson-13.css:

.reading-lab .lab-sources { margin-block: 2.5rem 1.5rem; }
.reading-lab .lab-sources h2 { font-size: 1.125rem; margin-block: 0 .75rem; }
.reading-lab .lab-sources ul { padding-inline-start: 1.25rem; margin: 0; color: var(--lab-muted); font-size: .9375rem; }
.reading-lab .lab-sources li + li { margin-block-start: .5rem; }
.reading-lab .lab-related h2 { font-size: 1.25rem; }
.reading-lab .lab-card h3 { font-size: 1.0625rem; line-height: 1.4; }
.reading-lab .lab-card p { margin-block: .5rem 0; color: var(--lab-muted); }

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

Связанная статья с причиной перехода

В reading-lab уже есть ссылка на реальный старый урок LINQ. Пояснение сообщает, что там встречаются длинные листинги и изображения результатов. Это причина выбора для нашего курса дизайна. Человек понимает, зачем открывать материал, даже если непосредственно сейчас не изучает LINQ.

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

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

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

Названия и адреса

Карточка должна использовать настоящее название материала либо осмысленное короткое обозначение, не обещающее другой результат. Старый урок «Запросы LINQ to XML» нельзя переименовать в ссылке в «Современный полный курс веб-разработки». Дизайн не меняет содержание целевого документа и не делает исторический текст новым.

Сохранение href особенно важно при обновлении каталога. Одна связанная статья имеет один адрес, даже если встречается в нескольких проектных маршрутах. Не создавайте копию старого урока под новым красивым путём ради формы карточки. Изменение места ссылки и поверхности не требует изменения маршрута.

У внешнего документа можно кратко указать организацию и предмет. Автоматическое открытие всех таких ссылок в новой вкладке не является обязательной частью дизайна. Читатель может сам выбрать вкладку средствами браузера. Если интерфейс использует особое поведение, оно должно быть предсказуемым, а не скрытой неожиданностью после нажатия.

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

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

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

Нижняя часть как завершение объяснения

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

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

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

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