Mettre en oeuvre la pagination avec Jekyll et Bulma.

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

 Publié le 11 nov 2024 (MàJ le 25 déc 2024) ·  2 min de lecture

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ù:

  1. {%- if paginator.total_pages > 1 %} pour n’afficher la barre de navigation uniquement s’il y a plus d’une page
  2. {% if paginator.page == 1 %}is-link{% endif %} pour mettre en évidence le bouton correspondant à la page en cours
  3. {{ site.paginate_path | relative_url | replace: 'page:num/', '' }} pour supprimer tout indication de page de l’URL pour atteindre la 1ère page
  4. {%- 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)
  5. minus ou plus pour afficher 2 pages avant ou après la page courante
  6. {%- 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

Articles similaires

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).