Как сделать постраничную навигацию в Pug?

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

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

2. Затем, определите общее количество страниц, разделив totalCount на perPage и округлив результат в большую сторону. Для округления вверх вы можете использовать функцию Math.ceil(). Сохраните это значение в переменную totalPages.

3. Далее, создайте цикл на основе totalPages, который будет генерировать ссылки на каждую страницу. Используйте встроенный цикл each в Pug для этого. Например:

each page in Array.from({ length: totalPages }, (_, i) => i + 1)
  a(href=`/page/${page}`)= page

Этот код создаст ссылки на каждую страницу, каждая ссылка будет иметь URL вида /page/1, /page/2 и т.д.

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

each page in Array.from({ length: totalPages }, (_, i) => i + 1)
  if currentPage === page
    a(href=`/page/${page}`, class='active')= page
  else
    a(href=`/page/${page}`)= page

5. Наконец, вы можете добавить кнопки "Предыдущая" и "Следующая" страницы соответствующим образом. При нажатии на кнопку "Предыдущая" вы можете уменьшить значение currentPage на 1, а при нажатии на кнопку "Следующая" - увеличить на 1. Не забудьте проверить наличие предыдущей или следующей страницы перед изменением значения currentPage.

- if currentPage > 1
  a(href=`/page/${currentPage - 1}`) Предыдущая
- for (let page = 1; page <= totalPages; page++)
  - if currentPage === page
    a(href=`/page/${page}`, class='active')= page
  - else
    a(href=`/page/${page}`)= page
- if currentPage < totalPages
  a(href=`/page/${currentPage + 1}`) Следующая

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