Блок новостей на главной

Блок новостей выглядит просто — три карточки с датой и заголовком. Но именно на нём становится видно, зачем нужна CMS: в статической вёрстке добавить новость означает отредактировать три файла, а после переноса — нажать «Создать ресурс».

Что это и где применяется

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

Из чего состоит блок
Часть	Что в ней
Карточка на главной	Дата, заголовок, две-три строки анонса, ссылка на запись
Страница раздела	Все записи подряд, обычно с постраничной навигацией
Страница записи	Заголовок, дата, полный текст

Разметка: карточка — это статья с датой

Одна новость — <article>: кусок, который имеет смысл сам по себе и может быть вынут со страницы целиком. Дата пишется тегом <time> с атрибутом datetime: человек видит «12 сентября 2026», а программа читает машинную запись даты.

Одна карточка новости

<article class="news-card">
  <time class="news-card__date" datetime="2026-09-12">12 сентября 2026</time>

  <h3 class="news-card__title">
    <a class="news-card__link" href="/novosti/sayt-pereehal-na-cms/">
      Сайт переехал на CMS
    </a>
  </h3>

  <p class="news-card__text">
    Вёрстка разрезана на шаблоны и чанки. Теперь новая страница
    создаётся в админке за минуту.
  </p>
</article>

Ссылка стоит внутри заголовка, а не оборачивает карточку целиком. Так у ссылки понятное название: программа чтения экрана объявит «Сайт переехал на CMS, ссылка», а не прочитает подряд дату, заголовок и весь анонс одной длинной фразой.

Как сделать кликабельной всю карточку

Не оборачивая её в ссылку: у карточки ставится position: relative, а у ссылки внутри заголовка — псевдоэлемент ::after, растянутый на всю карточку. Щёлкнуть можно куда угодно, а в списке ссылок остаётся один понятный заголовок.

Какого уровня заголовок брать

В карточке стоит <h3>, и это не случайное число. Иерархия заголовков на странице не должна прыгать через уровень: <h1> — название страницы, <h2> — «Новости», значит заголовки карточек внутри блока идут третьим уровнем.

На странице самого раздела новостей всё сдвигается на уровень вверх: там <h1> — это «Новости», а карточки получают <h2>. Один и тот же чанк с жёстко вписанным уровнем в двух местах работать не будет — это как раз тот случай, когда чанков делают два.

Что попросить у нейросети

Разметка карточки простая, а вот раскладка ленты — место, где легко потерять час. Её удобно заказать сразу с условиями.

Мой запрос

Нужен CSS для блока новостей на главной. Разметка: секция, внутри заголовок «Новости», список карточек, под ним ссылка «Все новости». Карточка — тег article, внутри дата, заголовок третьего уровня со ссылкой и абзац анонса.

Раскладка: на телефоне одна колонка, с 768 пикселей две, с 1024 три. Карточки в ряду одинаковой высоты, дата прижата к верху, анонс к низу. При наведении — только смена цвета рамки и подложки, без подъёма карточки и без цветной тени.

Чистый CSS, без фреймворков, БЭМ-имена классов, отступы и цвета через CSS-переменные. Анонс обрезать тремя строками, чтобы карточки не разъезжались по высоте.

Ответ нейросети

Про одинаковую высоту. Отдельно выравнивать ничего не нужно: элементы сетки grid по умолчанию растягиваются на высоту ряда. Прижать анонс к низу проще всего так: карточка — колонка флексов, а у анонса margin-top: auto. Пустой распорки в разметке не требуется.

Про обрезку в три строки. Это -webkit-line-clamp: 3 вместе с display: -webkit-box. Свойство выглядит экспериментальным из-за приставки, но работает во всех сегодняшних браузерах. Полный текст анонса при этом остаётся в разметке и достаётся поисковику.

Про сетку. Задавайте колонки через repeat(auto-fill, minmax(280px, 1fr)) — тогда три медиавыражения не нужны вовсе, браузер сам разложит карточки по ширине.

В Evolution CMS: три новости на главной

В админке создаётся папка «Новости», внутри — по ресурсу на запись. Заголовок ресурса становится заголовком карточки, поле «Описание» — анонсом, дата публикации — датой. Выводит список сниппет DocLister, а разметку одной карточки задаёт чанк newsCard.

Вызов в шаблоне главной

<div class="news__grid">
  [[DocLister?
    &parents=`5`
    &display=`3`
    &tpl=`newsCard`
    &sortBy=`publishedon`
    &sortDir=`DESC`
  ]]
</div>

Чанк newsCard — это разметка карточки из первого блока кода, в которой настоящие значения заменены на метки полей: [+pagetitle+] вместо заголовка, [+introtext+] вместо анонса, [+url+] вместо адреса. Ровно та же вёрстка, просто с дырками под данные.

Дату форматирует сниппет, а не вы

В базе дата лежит числом — количеством секунд, и выводить его на страницу нельзя. У DocLister есть параметр формата даты, он и превращает число в «12 сентября 2026». Для атрибута datetime нужен второй формат, машинный: год-месяц-день.

Частые ошибки

Чем чаще всего ломают ленту новостей
Ошибка	Чем плохо	Как правильно
Дата обычным текстом	Ни поисковик, ни программа чтения не понимают, что это дата	Тег `time` с атрибутом `datetime`
Вся карточка обёрнута в ссылку	Диктор читает подряд дату, заголовок и весь анонс	Ссылка в заголовке, растянутая псевдоэлементом
Заголовки карточек — `h2` везде	Иерархия заголовков прыгает через уровень	Уровень по месту: на главной третий, в разделе второй
Анонс не обрезан	Карточки в ряду разной высоты, ряд выглядит сломанным	Обрезка в три строки, полный текст на странице записи
Сортировка по номеру ресурса	После правки старой записи порядок ломается	Сортировка по дате публикации, от новых к старым

Что должно получиться

На главной три свежие записи, под ними ссылка на весь раздел
Дата стоит тегом time и читается в двух видах: для человека и для машины
Карточки в ряду одной высоты, анонс обрезан
Новая запись появляется на главной сама, править шаблон не нужно
Записи идут от свежих к старым