La pagination avec Eleventy

J'ai choisi de migrer ce site de Hexo à 11ty pour les raisons exposées précédemment. Voici mon retour d'expérience pratique concernant la réalisation de la pagination avec 11ty.

Collection

Avec 11ty on peut paginer des données globales ou locales, des tableaux ou des objets et des collections. Une collection permet de regrouper le contenu par tag ou par répertoire.
Je veux paginer mes articles. Je vais créer une collection nommée myPosts en regroupant les articles avec le tag posts. J'utilise l'api collection de 11ty pour déclarer ma collection dans le fichier de configuration .eleventy.js.

// .eleventy.js
eleventyConfig.addCollection("myPosts", function(collection) {
  return collection.getFilteredByTag("posts").reverse();
});

J'ai ajouté le filtre reverse pour que ma liste s'affiche du plus récent au plus ancien.

Liste paginée

J'utilise le language de templating Nunjuck. Je crée maintenant le template blog.njk pour afficher la pagination à partir ma collection posts. Dans le front matter du template, j'ajoute la clé pagination. Je lui affecte les données avec la clé data. La clé size défini le nombre d'articles affichés et pour finir la clé alias.
La clé permalink défini le permalien des pages. J'ajoute le chiffre + 1 pour commencer la numérotation avec 1.
Dans le corps du template, j'insère le template postslist.njk et le template pagination-list.njk.

{# blog.njk #}
---
layout: layouts/page.njk
title: Blog
pagination:
  data: collections.myPosts
  size: 6
  alias: postslist
permalink: "/blog/page-{{ pagination.pageNumber + 1 }}/index.html"
---
{% include "partials/postslist.njk" %}
{% include "partials/pagination-list.njk" %}

Création du template postslist.njk pour afficher les articles. La boucle se fait sur l'alias défini dans le front matter du template blog.njk.

{# postslist.njk #}
{% for post in postslist %}
  <article>
    <h2><a href="{{ post.url | url }}">{{ post.data.title }}</a></h2>
  </article>
{% endfor %}

Création du template pagination-list.njk pour afficher la pagination entre les différentes pages.

{# pagination-list.njk #}
<nav aria-labelledby="pagination">
  {% if pagination.previousPageHref %}
    <a href="{{ pagination.previousPageHref }}">Précédent</a>
  {% endif %}
  {% if pagination.nextPageHref %}
    <a href="{{ pagination.nextPageHref }}">Suivant</a>
  {% endif %}
</nav>

Articles paginés

Pour afficher la pagination articles, on utilise le template des articles post.njk. J'affecte les données à l'alias postslist qui se trouve cette fois dans le corps du template. J'insère ensuite le template pagination-post.njk.

{# post.njk #}
---
layout: layouts/base.njk
permalink: /blog/{{ page.fileSlug }}/
---
<h1>{{ title }}</h1>
{{ content | safe }}

{% set postslist = collections.myPosts %}
{% include "partials/pagination-post.njk" %}

Création du template pagination-post.njk pour afficher la pagination entre articles.

{# pagination-post.njk #}
{% set currentPostIndex = 0 %}
{% for post in postslist %}
  {% if post.url == page.url %}
    {% set currentPostIndex = loop.index0 %}
  {% endif %}
{% endfor %}
{% set prevPostIndex = currentPostIndex - 1  %}
{% set prevPost = postslist[prevPostIndex] %}
{% set nextPostIndex = currentPostIndex + 1  %}
{% set nextPost = postslist[nextPostIndex] %}

<nav aria-labelledby="pagination">
  {% if prevPost %}
    <a href="{{ prevPost.url | url }}">{{ prevPost.data.title }}</a>
  {% endif %}
  {% if nextPost %}
    <a href="{{ nextPost.url | url }}">{{ nextPost.data.title }}</a>
  {% endif %}
</nav>

Liens

• 11ty, un simple générateur de site statique écrit en JavaScript
• Language de templating JavaScript Nunjucks de Mozilla

Dernière mise à jour le 21 mai 2020