Чередование фона в shortstory.tpl: как развести карточки анонсов

Различить краткий анонс и полную статью

В официальной документации DLE 21.0 шаблон shortstory.tpl описан как шаблон вывода кратких новостей; среди его тегов указаны {title}, {short-story} и {date}. Шаблон fullstory.tpl отвечает за вывод полной статьи, а main.tpl служит общим основным макетом, который включает вывод других шаблонов. Поэтому чередование фона логично добавлять именно в shortstory.tpl: оно влияет на список анонсов на главной или в рубрике и не затрагивает страницу полной статьи.

Важно не смешивать эти роли при правке. Если вы случайно измените fullstory.tpl, эффект появится на странице чтения, а не в списке. Если же правка затронет main.tpl, она распространится на весь макет сайта. Ограничиваясь shortstory.tpl, вы сохраняете полный контроль над тем, где именно меняется внешний вид.

Определить повторяющуюся карточку

Откройте страницу списка новостей и через инструменты браузера найдите элемент, который повторяется для каждого анонса. Обычно это контейнер с заголовком, анонсом и датой. Запомните его класс или идентификатор, но не пытайтесь угадать, какой именно тег DLE его формирует: достаточно видеть повторяющуюся HTML-структуру в инспекторе. Если карточка обёрнута в список, проверьте, повторяется ли сам элемент списка или только внутренний блок.

Полезный приём: выделите в инспекторе несколько соседних карточек и сравните их атрибуты. Если у всех одинаковый класс, например news-item, и они идут подряд внутри одного родительского контейнера, селекторы :nth-child будут работать предсказуемо. Если же между анонсами вставляются другие блоки, например рекламные или навигационные, порядок нумерации может сбиться, и тогда лучше искать более точный родительский элемент.

Выбрать ненавязчивое чередование

Классический приём — чередовать фон нечётных и чётных карточек через селекторы :nth-child(odd) и :nth-child(even). Цвета подбирайте близкие к фону страницы: например, один вариант остаётся белым, второй получает едва заметный серый оттенок. Разница должна помогать глазу отделять одну карточку от другой, но не превращаться в пеструю ленту. Альтернатива — чередовать не фон, а тонкую левую границу или отступ, что иногда смотрится аккуратнее.

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

Разобрать условный список карточек

Представьте страницу, где подряд идут шесть анонсов: «Обновление движка», «Новый модуль», «Смена дизайна», «Плановые работы», «Обзор шаблона», «Отчёт за месяц». Без чередования все шесть блоков сливаются в однородную ленту, и читателю приходится перемещаться по ней, считая абзацы. После применения :nth-child(odd) и :nth-child(even) каждая вторая карточка получает другой фон, и глаз сразу понимает, где начинается новый анонс.

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

Проверить читаемость и ссылки

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

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

Сравнить результат на разных экранах

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

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