Петля HTML шаблоны

HTML-шаблоны циклов для повторяющегося контента

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

Где заканчивается шаблон и начинается контент

Частая путаница с циклами возникает из-за смешения шаблона с самим элементом. Шаблон содержит пустые слоты: чаще всего область изображения, заголовок и строку метаданных. При изменении названия товара меняется одна запись; при редактировании разметки перестраивается вся сетка целиком.

Такое разделение оставляет циклу три составные части:

1. Разметку элемента, фиксирующую иерархию и порядок чтения;
2. Динамические поля, подставляющие значения в эту разметку;
3. Внешнюю сетку, определяющую, сколько элементов располагается рядом друг с другом.

Эти три части определяют пригодность готового шаблона. Блок элемента с двумя полями не подойдет для записей, содержащих пять полей.

Наборы полей различаются от цикла к циклу

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

Три наглядных примера показывают, насколько сильно различаются эти наборы:

1. Цикл статей привязывает дату, автора и анонс к заголовку, чтобы анонс никогда не перевешивал его;
2. Цикл событий начинается с даты и места, поэтому блок со временем имеет больший визуальный вес, чем картинка;
3. Цикл каталога или справочника содержит категорию, адрес и контактные данные, а кнопка действия располагается рядом с ними.

Все три варианта повторяют единый каркас, однако акценты внутри него меняются, и подбор шаблона под эти акценты составляет основу выбора. Адаптация макета статьи под карточки мероприятий требует перестановки полей.

Сохранение порядка элементов на экранах разных размеров

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

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

В Nicepage Элемент Сетка распределяет повторяющиеся элементы по адаптивным ячейкам; в руководстве по адаптивному веб-дизайну описаны его параметры управления.

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