Как оформить блок "Похожие материалы" с помощью AI Code - Форум - игровой тематики поможет вам в любой ситуации

Страница 1 из 1
1

Как оформить блок "Похожие материалы" с помощью AI Code

Pasan не в сети

11:33 PM 2026-04-26 | Сообщение # 1

Админ

Администраторы

Сообщений: 131

Награды: 0

Репутация: 0

AI Code помогает оформить блок «Похожие материалы» современно и аккуратно. По умолчанию в uCoz он выводится через cистемный код $RELATED_ENTRIES$, но внешний вид можно изменить. Ассистент сгенерирует HTML и CSS под нужное количество карточек: картинки, текст и удобные отступы.

Как это работает

Зайдите в раздел «Дизайн» → «Редактор шаблонов».

Откройте шаблон Общие шаблоны → Вид похожих материалов.

Сформулируйте запрос в AI Code — опишите сколько колонок нужно, размеры и стиль.

Получите готовый код и вставьте его в шаблон.
Пример промптаШаблон: Вид похожих материалов (Общие шаблоны)

Код

Сделай адаптивный блок похожих материалов с [3] колонками.
Каждый элемент — карточка: сверху обложка материала фиксированной высотой [200px] со скруглением [16px], снизу название обычным текстом.
Между карточками отступы [25px].
Заголовок блока оформить как подзаголовок над сеткой.
Стиль — современный, аккуратный, с выравниванием по центру.

В шаблоне "Страница материалов и комментариев" у меня уже есть код для вывода блока:

<?if($RELATED_ENTRIES$(3))?>
<div id="rel">
<h3>Похожие материалы</h3>
<? $RELATED_ENTRIES$(3)?>
</div>
<?endif?>

Где разместить код в шаблоне?

Код <?if($RELATED_ENTRIES$(3))?> вставьте в шаблон Страница материалов и комментариев.

HTML верстку похожих материалов в шаблон Вид похожих материалов.

CSS добавьте в Таблицу стилей (CSS) или в блок <style> шаблона.

Цитата

Если вы не уверены, куда именно вставить код, вы всегда можете уточнить это у AI Code — ассистент подскажет подходящее место.

Готовый код (ориентир)

Код

<li class="uRelatedEntry">
<a href="$ENTRY_URL$">
<div class="related-item">
<img class="related-cover" src="$COVER_URL$" alt="$TITLE$">
<p class="related-title">$TITLE$</p>
</div>
</a>
</li>

<style>
#rel {
margin-top: 30px;
}

#rel > h3 {
margin-top: 0;
margin-bottom: 20px;
}

.uRelatedEntries {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}

.uRelatedEntries > li {
margin: 0;
}

.uRelatedEntry {
list-style: none;
margin-bottom: 15px;
}

.related-item {
border: none;
border-radius: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}

.related-cover {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
margin-bottom: 8px;
border-radius: 16px;
}

.related-title {
font-size: 16px;
margin: 0 0 6px 0;
}

.related-description {
font-size: 14px;
color: #666;
margin: 0;
}

/* Адаптив */
@media (max-width: 992px) {
.uRelatedEntries {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 600px) {
.uRelatedEntries {
grid-template-columns: 1fr;
}
.related-cover {
height: 160px;
}
.related-title {
font-size: 15px;
}
}
</style>

Проверка работыОткройте любую страницу материала и убедитесь, что блок «Похожие материалы» выводится корректно в виде сетки карточек.

Цитата

Важно! Чтобы увидеть изменения на сайте, необходимо очистить кеш браузера.

Как доработать результат с помощью ассистентаЕсли результат вас не устраивает, просто уточните детали в диалоге с AI Code — ассистент доработает внешний вид и поведение блока.
Примеры уточнений

Увеличь высоту картинок до 250px, чтобы они занимали больше места в карточке.
Сделай так, чтобы при наведении на карточку появлялась лёгкая тень (box-shadow).
Выравняй заголовок «Похожие материалы» по центру и добавь ему нижнюю границу (border-bottom).
На мобильных устройствах увеличь размер текста до 18px, чтобы он был лучше читаем и сделай блоки в одну колонку.
Сделай плавную анимацию появления карточек с эффектом «fade-in» при загрузке страницы.
Добавь скругление углов у картинок до 24px, чтобы они выглядели мягче.

профиль сайт