Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!

Как добавить кнопки навигации между предыдущим и следующим материалами

Материал добавлен: 19 Января 2024

Материал обновлен: 27 Мая 2025

В этом материале вы узнаете, как быстро и удобно добавить на ваш сайт стильные и адаптивные кнопки для перехода между материалами с использованием системных переменных $PREV_ENTRY$ и $NEXT_ENTRY$.

Описание переменных

$PREV_ENTRY$ — ссылка на предыдущий материал модуля.
$NEXT_ENTRY$ — ссылка на следующий материал модуля.

Как добавить кнопки переключения между материалами

Шаг 1. Размещение HTML-кода

Перейдите в Дизайн → Управление дизайном → Редактирование шаблонов, откройте шаблон «Страница материалов и комментариев к нему» и вставьте следующий код в нужное место отображения кнопок:

<div id="material-nav">
 <div><?if($PREV_ENTRY$)?>$PREV_ENTRY$ <?else?>Предыдущих материалов нет<?endif?></div>
 <div><?if($NEXT_ENTRY$)?>$NEXT_ENTRY$ <?else?>Следующих материалов нет<?endif?></div>
</div>

Шаг 2. Добавление CSS-стилей

Откройте шаблон «Таблица стилей (CSS)» и в самый конец вставьте следующий код:

#material-nav {
 display: flex;
 margin: 10px 0;
 justify-content: space-between;
}

#material-nav > div {
 width: 49%;
 text-align: center;
 padding: 0.5em 2em;
 border: transparent;
 box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
 background: dodgerblue;
 color: white;
 border-radius: 20px;
 cursor: pointer;
 font-size: 17px;
 display: flex;
 align-items: center;
 justify-content: center;
}

#material-nav a {
 display: inline-flex;
 width: 100%;
 height: 100%;
 color: inherit;
 text-decoration: none;
 align-items: center;
 justify-content: center;
 position: relative;
}

#material-nav > div:hover {
 background: rgb(2,0,36);
 background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%);
}

#material-nav > div:first-child a::before {
 content: "\2190";
 position: absolute;
 left: -20px;
}

#material-nav div:last-child a::after {
 content: "\2192";
 position: absolute;
 right: -20px;
}

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

Дополнительные настройки

Как изменить фоновый цвет кнопки и цвет шрифта?

#material-nav > div {
 ...
 background: dodgerblue; /* Укажите нужный цвет фона */
 color: white; /* Укажите нужный цвет шрифта */
 ...
}

Вы можете выбрать цвет в формате HEX на сайте htmlcolorcodes.com.

Как изменить цвет кнопки при наведении?

#material-nav > div:hover {
 background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%); /* Укажите свой градиент */
}

Создать собственный градиент можно с помощью бесплатного генератора градиентов.

Как изменить закругление углов кнопки?

#material-nav > div {
 ...
 border-radius: 20px; /* Укажите своё значение */
 ...
}

Как изменить размер шрифта внутри кнопки?

#material-nav > div {
 ...
 font-size: 17px; /* Укажите нужный размер */
 ...
}

Как добавить кнопки навигации между предыдущим и следующим материалами