Mettre en oeuvre la pagination avec Jekyll et Bulma.

Optimisez la navigation de votre site avec une pagination fluide et élégante.

11 nov 2024 · 2 min ·

Table des matières

Introduction
Le code Liquid pour Jekyll et le plugin jekyll-paginate
1. La configuration
2. Le code
Le résultat
Sources

Introduction

Mettre en place une pagination simple et efficace avec Jekyll et mis en forme avec Bulma.

Mon besoin est :

Afficher systématiquement le lien vers la premiere et la dernière page, sous forme de numéro et sous forme d’icône
Afficher les liens vers la page suivante et la page précédente
Afficher quelques pages avant et quelques pages après la page courante
Mettre en évidence la page courante
Afficher des points de suspension pour combler les sauts dans la numérotation
Ne pas afficher toutes les pages
Afficher la barre de pagination uniquement lorsqu’elle est nécessaire

Le code Liquid pour Jekyll et le plugin jekyll-paginate

La configuration

Dans le fichier de configuration, il faut activer le plugin jekyll-paginate et ajouter ces paramètres :

paginate: 12 pour indiquer le nombre d’items par page, ici 12
paginate_path: "/page:num/"pour indiquer le format de pagination souhaité (la 2ème page sera page2, la 3ème sera page3, etc.)
Attention, la première page n’est pas page1, mais l’URL originelle de la page.

paginate: 12
paginate_path: "/page:num/"

plugins:
  - jekyll-paginate

Le code

{%- if paginator.total_pages > 1 %}
<section class="section">
  <div class="container is-max-desktop">
    <nav class="pagination is-centered" role="navigation" aria-label="pagination">
      <a href="{{ site.paginate_path | relative_url | replace: 'page:num/', '' }}" title="Première page" class="pagination-previous  {% if paginator.page == 1 %}is-link{% endif %}"><i class="fa-solid fa-backward-fast"></i></a>
      <a href="{{ paginator.previous_page_path }}" class="pagination-previous">Page précédente</a>
      <a href="{{ paginator.next_page_path }}" class="pagination-next">Page suivante</a>
      <a href="{{ site.paginate_path | relative_url | replace: ':num', paginator.total_pages }}" title="Dernière page" class="pagination-next {% if paginator.total_pages == paginator.page %}is-link{% endif %}"><i class="fa-solid fa-forward-fast"></i></a>

      {%-  assign pagedebut = paginator.page | minus: 2 %}
      {%-  assign pagefin = paginator.page | plus: 2 %}
      
      <ul class="pagination-list">
        {%  if pagedebut > 1 %}
          <li><a href="{{ site.paginate_path | relative_url | replace: 'page:num/', '' }}" class="pagination-link">1</a></li>
          <li><span class="pagination-ellipsis">&hellip;</span></li>
        {% endif %}
  
        {%- for i in (pagedebut..pagefin) %}
          {%- if i >= 1 and i <= paginator.total_pages %}
            {%- if i == 1 %}
              <li><a href="{{ site.paginate_path | relative_url | replace: 'page:num/', '' }}" class="pagination-link {% if i == paginator.page %}is-current{% endif %}">{{ i }}</a></li>
            {%- else %}
              <li><a href="{{ site.paginate_path | relative_url | replace: ':num', i }}" class="pagination-link {% if i == paginator.page %}is-current{% endif %}">{{ i }}</a></li>
            {%- endif %}
          {%- endif %}
        {%- endfor %}
  
        {%  if pagefin < paginator.total_pages %}
          <li><span class="pagination-ellipsis">&hellip;</span></li>
          <li><a href="{{ site.paginate_path | relative_url | replace: ':num', paginator.total_pages }}" class="pagination-link">{{ paginator.total_pages }}</a></li>
        {% endif %}
      </ul>
    </nav>
  </div>
</section>
{%- endif %}

Où:

{%- if paginator.total_pages > 1 %} pour n’afficher la barre de navigation uniquement s’il y a plus d’une page
{% if paginator.page == 1 %}is-link{% endif %} pour mettre en évidence le bouton correspondant à la page en cours
{{ site.paginate_path | relative_url | replace: 'page:num/', '' }} pour supprimer tout indication de page de l’URL pour atteindre la 1ère page
{%- assign pagedebut = paginator.page | minus: 2 %} je me suis arraché les cheveux avant de découvrir que Liquid ne connaît pas la syntaxe variable + 2 mais uniquement | minus: 2 (minus ou plus ; 2 ou un autre nombre)
minus ou plus pour afficher 2 pages avant ou après la page courante
{%- for i in (pagedebut..pagefin) %} pour itérer de pagedebut à pagefin, i contient l’index en cours

Le résultat

Pagination Bulma avec Jekyll

On peut observer :

Jusqu’à 16 pages à parcourir
La page en cours est la 4ème page
Affichage de la première et de la dernière page
Affichage de “…”, si nécessaire
Le bouton de la page courante est coloré
Affichage de la barre de navigation uniquement s’il y a plusieurs pages à parcourir

Sources

Partage et commentaires

Partager cet article sur : Mastodon X (Twitter) Facebook LinkedIn Reddit

Vous pouvez commenter cet article grâce à ce fil de discussion sur Mastodon (avec Mastodon ou un autre compte ActivityPub/Fediverse).