Aller au contenu principal
divagations - Retour à l'accueil

Lancer mon journal de bord

Guillaume Barbier

Temps de lecture : ~ 4 minutes

Le principe

J'ai déjà un template basique qui devrait faire l'affaire pour afficher mes entrées de journal de bord (du moins pour l'instant). Par contre ce qui me manque, c'est une page collectant ces différentes entrées et en donnant un aperçu.

Il faudrait aussi que cette page remonte dans la navigation (contrairement aux entrées du journal de bord, qui risquent de vite prendre de la place et qu'il vaudrait mieux masquer dans la nav).

La première étape est de créer un Data file pour définir un certain nombre de propriétés transverses à toutes les entrées de mon journal. Comme je souhaite pouvoir surcharger certains points (comme le navigation title, par exemple), je crée une version javascript : journal.11tydata.js

Après avoir créé mes premières entrées, je peux me lancer dans la rédaction de la page "journal", la page pour les réunir tous. Dans cette page, j'utilise plusieurs fonctionnalités de 11ty :

  • pagination, pour définir un nombre max d'entrées (10) à afficher dans ma page journal. Au-delà, 11ty générera automatiquement d'autres pages avec un système de numérotation.
    Note : j'ai appliqué la propriété reverse: true à ma pagination pour que les dernières entrées remontent en première.
  • des boucles for en Liquid pour générer les entrées, ainsi qu'une navigation rudimentaire pour la pagination (la fonctionnalité pagination d'11ty permet d'en créer une très rapidement)
  • un permalink un peu complexe.

De base la fonctionnalité de pagination créé une première page du nom de ma page "journal", puis ensuite créé de nouvelles sous-pages numérotées.
J'aime bien que ma première page porte exactement le même nom que mon fichier, cela me permet d'avoir une navigation cohérente :

  - journal
    - <entrée 1 du journal>
    - <entrée 2>
    - …

Note : Je pars du principe que les paginations du journal sont des pages supplémentaires, qui ne doivent pas être indexées. Mais ce n'est pas le cas par défaut. C'est un point que je vais devoir craquer ultérieurement.

Par contre, passé la première page, la numérotation est décalée. En effet, ma première page (/journal/) a pour index "0" et ma deuxième page un index "1". Mais lorsque je génère ma navigation, la numérotation des liens commence logiquement par "Page 1", ce qui me donnera à terme le décalage suivant :

Navigation (Libellé) URL
Page 1 /journal/
Page 2 /journal/1/
Page 3 /journal/2/

Pour éviter ce décalage, j'ai ajouté un permalink pour modifier l'URL des pages paginées. Mais le permalink modifie aussi la page d'origine. J'ai donc du ajouter un tag conditionnel en Liquid :

  • D'abord je vérifie si le paginationNumber (= index de la page générée) est égal à 0 : si oui, je génère la page /journal/index.html
  • Si non, alors je génère une sous-page numérotée avec un index augmenté de 1 (grâce au filtre {{pagination.pageNumber | plus: 1}})

Un problème de structure

Une fois ma boucle d'entrée implémentée dans ma page "/journal/journal.html", je me suis rendu compte d'un souci : la page remontait elle-même dans la liste, comme si elle était une entrée.
J'ai assez vite identifié le problème : comme mon fichier journal.11tydata.js appliquait le tag "log-entry" sur toutes les pages du dossier "/journal/", ma page journal était elle aussi identifiée comme une entrée de journal.

Note : Il n'est pas possible d'écraser le tag appliqué par le Data file depuis le front matter de "journal.html" : les valeurs de la donnée "tags" s'ajoutent les unes aux autres, en cascade, sans s'écraser.

Heureusement la solution était assez simple : en déplaçant "journal.html", il n'était plus impacté par le Data file tout en gardant le même output.

Ma structure est donc la suivante :

/journal.html
/journal
  /journal.11tydata.js
  /20251222-init.md
  /20251223-journal.md
  /…

Un premier jet

Il me reste pleins de points à régler :

  • Mise en forme des entrées
  • Mise en forme des résumés dans la collection du journal (il va probablement falloir que j'ajoute des métadonnées pour affiner cet affichage)
  • Travailler sur la donnée excerpt (je ne suis pas très satisfait de son mécanisme actuel). Il faut que je trouve un mécanisme qui permette de saisir par défaut du texte simple (pour le partage sur les réseaux, entre autre) mais qui permette de surcharger avec du HTML pour certains affichage (genre des collections)
  • Affiner la nav de pagination :
    • ajouter de l'interface pour gérer beaucoup de pages et faciliter le passage d'une page à l'autre
    • trouver comment désindexer uniquement les pages 2 et plus.