La pagination avec Eleventy
11ty ou Eleventy est un générateur de site statique écrit en JavaScript. C'est un projet très flexible : structure de répertoire libre, moteur de templates indépendant, fonctionne avec de nombreux languages de templating (HTML, Markdown, Liquid, Nunjucks,Handlebars, Mustache, EJS, Haml, Pug …) et bien d'autre choses.
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>Pour voir le résultat, cliquez sur le menu Blog ou Portfolio.
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>Pour voir le résultat, regardez la pagination en bas de cet article.