Aujourd'hui j'ai décidé de me concentrer sur la pagination des entrées de mon journal de bord :
- Navigation dans la page "journal" (ajouter un peu de mise en forme, des boutons précédents/suivants)
- Navigation dans les entrées, pour passer d'une entrée à l'autre.
Optimiser la pagination du journal
J'ai commencé par la pagination du journal. Un rapide passage dans la documentation d'eleventy(S'ouvre dans un nouvelle fenêtre) m'a permis d'ajouter des boutons précédent et suivant assez facilement.
Ce que je n'ai pas fait, c'est ajouter un mécanisme pour "contracter" ma pagination (n'afficher que les premières et dernières pages, ainsi que celles proches de la page courante), pour 3 raisons
- je n'en ai pas besoin dans l'immédiat (avec les entrées écrites jusqu'ici, je n'ai même pas assez d'entrées pour déclencher l'affichage de la pagination.[1])
- La mécanique apporte son lot de complexités et j'ai encore beaucoup à faire : ce n'est pas une priorité
- Je ne suis pas sûr de comment gérer la sémantique (pour l'accessibilité) des "ellipses" dans la pagination "contractée". Je préfère avoir une pagination simple (mais trop longue/perfectible) que de coder une pagination inaccessible.
Note : J'ai aussi ajouté une condition pour masquer la pagination si je n'ai qu'une seule page (Cette limitation ne sera pas utile très longtemps, mais savoir le faire pourrait être utile plus tard pour d'autres paginations) : l'objet pagination n'a pas de propriété indiquant sa longueur mais je m'en suis sorti en comparant les premières et dernières pages (pagination.href.first et pagination.href.last). Si elles sont identiques, c'est qu'il n'y a qu'une seule page à afficher (donc pas besoin de navigation de pagination).
Naviguer entre les entrées du journal
Pour pouvoir naviguer entre les pages du journal, il a fallu que je commence par créer un template dédié afin de pouvoir ajouter à chaque entrée le code spécifique aux entrées.
L'astuce pour profiter du code du template de base (sans copier/coller) est de créer un nouveau fichier de template et d'ajouter dans son front matter un layout pointant sur le template de base. J'obtiens ainsi une cascade de template et il ne me reste plus qu'à appliquer ce template à toutes mes entrées du dossier "journal" grâce au fichier journal.11tydata.js
Ensuite, l'ajout d'une navigation au sein des pages tagguées log-entry a été assez simple : eleventy propose toutes sortes de filtres sur ses collections (voir la documentation des filtres de collection(S'ouvre dans un nouvelle fenêtre)) dont deux permettant justement de trouver les pages pages précédentes et suivantes.
Pour pouvoir tester ma pagination, j'ai "triché" en réduisant le nombre d'entrée par page et en créant des entrées "bidons" ↩︎