Элементы

Пагинация

Номера страниц в рамках, текущая чёрная; текстовый вариант «назад — страница N из M — вперёд» для кабинетов.

Примеры

<nav class="pager" aria-label="Страницы">
  <a href="#" aria-label="Предыдущая страница">←</a>
  <a href="#">1</a>
  <a href="#" class="is-current" aria-current="page">2</a>
  <a href="#">3</a>
  <span>…</span>
  <a href="#">12</a>
  <a href="#" aria-label="Следующая страница">→</a>
</nav>

<nav class="pager pager--text" aria-label="Страницы журнала">
  <a class="btn btn--sm btn--ghost" href="#">Новее</a>
  <span>Страница 3 из 14</span>
  <a class="btn btn--sm btn--ghost" href="#">Старее</a>
</nav>

<nav class="pager pager--text" aria-label="Страницы заметок">
  <a href="#">← Назад</a>
  <span>3 / 14</span>
  <a href="#">Вперёд →</a>
</nav>

Установка

bukatchuk-ui add pagination

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Пагинация jekyll-paginate. Параметры: paginator (по умолчанию — глобальный), text=true — текстовый вариант
  (только «назад», «страница N из M», «вперёд»), prev_text, next_text.
{%- endcomment -%}
{%- assign pg = include.paginator | default: paginator -%}
{%- if pg.total_pages > 1 -%}
{%- assign prev_text = include.prev_text | default: '←' -%}
{%- assign next_text = include.next_text | default: '→' -%}
<nav class="pager{% if include.text %} pager--text{% endif %}" aria-label="Страницы">
  {%- if pg.previous_page %}
  <a href="{{ pg.previous_page_path | relative_url }}" rel="prev">{{ prev_text }}</a>
  {%- endif %}
  {%- if include.text %}
  <span>Страница {{ pg.page }} из {{ pg.total_pages }}</span>
  {%- else %}
  {%- for n in (1..pg.total_pages) %}
  {%- if n == pg.page %}
  <a href="{{ site.baseurl }}{% if n == 1 %}{{ pg.first_page_path }}{% else %}{{ site.paginate_path | replace: ':num', n }}{% endif %}" class="is-current" aria-current="page">{{ n }}</a>
  {%- else %}
  <a href="{{ site.baseurl }}{% if n == 1 %}{{ pg.first_page_path }}{% else %}{{ site.paginate_path | replace: ':num', n }}{% endif %}">{{ n }}</a>
  {%- endif %}
  {%- endfor %}
  {%- endif %}
  {%- if pg.next_page %}
  <a href="{{ pg.next_page_path | relative_url }}" rel="next">{{ next_text }}</a>
  {%- endif %}
</nav>
{%- endif -%}

Макрос для Jinja

{#- Пагинация. page — текущая страница, pages — всего страниц, url — шаблон адреса с {n}
    (например '/audit?page={n}'); text=True — текстовый вариант («Новее», «Страница N из M», «Старее»). -#}
{% macro pagination(page, pages, url, text=False, prev_text='←', next_text='→') -%}
{%- if pages > 1 -%}
<nav class="pager{% if text %} pager--text{% endif %}" aria-label="Страницы">
  {%- if page > 1 %}
  <a href="{{ url.replace('{n}', (page - 1)|string) }}" rel="prev">{{ prev_text }}</a>
  {%- endif %}
  {%- if text %}
  <span>Страница {{ page }} из {{ pages }}</span>
  {%- else %}
  {%- for n in range(1, pages + 1) %}
  <a href="{{ url.replace('{n}', n|string) }}"{% if n == page %} class="is-current" aria-current="page"{% endif %}>{{ n }}</a>
  {%- endfor %}
  {%- endif %}
  {%- if page < pages %}
  <a href="{{ url.replace('{n}', (page + 1)|string) }}" rel="next">{{ next_text }}</a>
  {%- endif %}
</nav>
{%- endif -%}
{%- endmacro %}