Jekyll, ou comment gérer facilement son site - Partie 2
Nous revoilà donc sur Jekyll. Dans cette deuxième partie du pas-à-pas, on va décortiquer un peu le code que l’on a écrit la dernière fois, le comprendre, et voir un peu comment construire un blog simple mais suffisant pour une utilisation basique.
Quelques explications
dans un premier temps, on va revenir un peu sur la structure d’un dossier de travail Jekyll. Le dossier racine doit être organisé comme ça :
Comment Jekyll fonctionne, alors ? D’abord, il va regarder dans le dossier _posts/ si il y a des articles, au format MarkDown (.md). Si oui, pour chaque article, il regarde l’en tête:
l’en-tête de notre premier article
On y définit pas mal de chose, mais la plus importante est “layout: default”. Avec cette ligne, on indique à Jekyll quel modèle il va devoir utiliser pour cete article. Jekyll va donc convertir tout le texte en html, puis allez chercher le modèle indiqué, ici “default.html”, dans le dossier “_layouts”. Et c’est là que tout va se faire:
C’est, à priori, du bête code html, à quelques exceptions près. On deux blocs encadrés par des doubles accolades : “{{ page.title }}” et “{{ content }}”. Lorsque Jekyll voit ces codes, il va chercher l’information correspondante pour l’article qu’il est en train de traiter. page.title va par exemple devenir le titre de l’article en cours de traitement (défini dans l’en-tête par “title: ‘mon super titre’“), tandis que “content” va être remplacé par le contenu de l’article converti en html.
Jekyll fera exacement la même chose avec le fichier index.html, situé à la racine.
Ici, on utilise une boucle. Jekyll va executer tout ce qui est entre “for post in site.posts” et “endfor” autant de fois qu’il y a d’articles dans le dossier “_posts”. Pour chaque post, il va ensuite lire le titre et le contenu, que l’on avait déjà vu au dessus, mais aussi l’adresse de l’article.
On voit que la syntaxe est légèrement différente : “{{ post.url | uri_escape }}”. le code est séparé en deux parties: l’attribut “post.url” est transformé en l’URL de l’article, mais peut contenir des espaces, … que les navigateurs aprécient rarement. On rajoute donc un “pipe” (sur mac, ont peut l’avoir avec maj+alt+L) suivit de ce qu’on appelle un “formatter”. C’est une commande qui va appliquer une action sur ce qui précède juste. Ici, le formatter “uri_escape” va prendre ce qui vient avant, donc l’url, et remplacer les caractères spéciaux par des caractères valides.
Passons aux améliorations
Maintenant, nous avons donc un blog très basique : On peut créer un nouvel article, ils s’affichera sur la page d’accueil, et le visiteur peut cliquer sur le titre pour afficher l’article seulement sur une page. C’est déjà pas mal, mais vu que le but est d’obtenir un blog quand même un peut fonctionnel, on va implémenter quelques trucs en plus. En gros, à la fin de cette partie, on aura, sur la page d’accueil, les dix derniers articles, chacuns précédés de son titre et sa date de publication, ainsi que la catégorie à laquelle il appartient. Un clic sur le titre devra emmener le visiteur à la page de l’article.
En bas de la page d’accueil, on aura un lien pointant vers les archives du site internet. Cette page sera assez simple : uneliste chronologique de tous les articles du site, avec à chaque fois, juste le titre (servant de lien), la date et la catégorie.
Le YAML front-matter
À vos souhaits. Plus sérieusement, derrière ce nom barbare se cache un des outils les plus puissants de Jekyll. C’est ce bloc, délimité par des lignes de trois tirets, placé en en-tête de chaque fichier du site (sauf les modèles). Par exemple :
dans ce petit pavé, on va pouvoir définir pleins de propriétés pour chaque article ou page : Non-seulement des réglages intégrés à Jekyll, mais on va aussi pouvoir créer nos propres variables. Par exemple, si on rajoute la ligne “animal: chien” dans l’en-tête, on pourra afficher la valeur de “animal” dans un modèle, en utilisant
.
YAML, c’est aussi le format du fichier de configuration du site. Vous vous souvenez du fichier du fichier “_config.yml” à la racine du site ? On va pouvoir définir pleins d’options aussi, accessibles dans les modèles avec
.
Bref, comme première option, on va placer ça dans le fichier “_config.yml” :
D’abord, on a une variable standart de Jekyll : “permalink” défini la structure à utiliser pour pointer vers les articles. Avec cette valeur, on aura des url de type “http://mon-super-site.com/le_nom_de_\mon_article/”. On pourrait remplacer la valeur par “/:categories/:title” pour afficher une arborescence, ou encore demander la date de l’article, … Pour avoir toutes les valeurs, je vous conseille la documentation.
Implémenter les infos des articles
Pour l’instant, notre page d’accueil affiche le titre, l’article, et un lien. Premièrement, on va changer le titre, de façon à ce qu’il soit lié à la page de l’article (fichier “index.html”. On supprime aussi, du coup, le lien “Lire la suite” :
La prochaine étape va être de rajouter la date de publication : si vous commencez à comprendre la façon dont Jekyll fonctionne, vous devez vous douter que la date d’un article s’affiche avec {{ post.date }}. L’inconvénient, c’est que ça présente la date de façon… assez moche, soyons francs :
On va donc utiliser un “formatter”, qui va nous permettre de choisir le format à utiliser pour notre date. La encore, je vous porpose un exemple, mais la documentation indique tous les formats de date disponibles. Dans notre fichier “index.html”, on aura donc maintenant ceci :
Il nous manque donc la catégorie dans laquelle l’article a été publié. Allez, devinez comment on y accède… Avec {{ post.category }}. On a donc, au final, un fichier index.html qui ressemble à ça :
Si vous lancez Jekyll depuis le dossier racine et ouvrez http://localhost:4000
Vous devriez obtenir ceci : 
On repassera pour la mise enforme, mais le contenu arrive
Essayez de cliquer sur le titre de l’article, vous devriez aller à la page consacrée, avec l’adresse correspondant au modèle que vous avez choisi dans “_config.yml”. Maintenant que nous avons vu tout ça, vous devriez déjà être capable de modifier certains aspects de votre blog, toujours avec l’aide de la documentation. Je ne peux que vous conseiller d’expérimenter (après avoir fait une sauvegarde, bien sûr), c’est comme ça que vous integrerez les subtilités de Jekyll. Et puis, vous pouvez créer des articles en vrac, pour avoir une meilleure idée dce à quoi ressemble votre blog.
Voilà qui cloture la deuxième partie de ce tutoriel. Dans le troisième partie, on verra comment mettre en forme notre blog, et lui ajouter quelques fonctions avec les plugins Jekyll.
Bonnne programmation !
25/01/2012JekyllWeb