Будьте в курсе всех обновлений: подпишитесь на наш официальный 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; /* Укажите нужный размер */ ... }
Как добавить кнопки навигации между предыдущим и следующим материалами