Cet article est la suite de l’article : Jekyll Partie 1 : Introduction

Dans cet article, nous allons explorer un peu plus les divers fichiers de base de Jekyll, l’arborescence, et le templating.

Le squelette de Jekyll

L’on a vu dans l’article précédant le squelette crée par jekyll lors de son premier lancement.
Attardons nous sur les différents fichiers présents.

_config.yml

Ce petit fichier est la colonne vertebrale de votre blog (un équivalent au wp_config.php de wordpress ) Il contient toute la configuration générale de celui ci. Ecrit en YAML, il est très facilement compréhensible.

Vous pouvez y définir de nombreux paramètres prédéfinis, comme la structure des permaliens, le titre, description du blog, mais aussi des options comme la prise en charge lors de la compilation de SASS, du dossier dans lequel il génère les fichiers et bien d’autres.

Chose très intéressante, il est possible de définir des variables globales à l’ensemble du site. Imaginons par exemple que vous souhaitiez afficher un peu partout votre email, vous pouvez définir une variable « email », qu’il est possible de réutiliser plus tard dans les templates, simplement via la balise :

{ { site.email } }

Le config.yml de ce blog

_includes

Dans ce dossier sont stockés de petits bouts de code regroupées par fichiers html. Le principe de _includes est similaire aux includes en php, cela permet de fractionner son code, et de l’inclure à plusieurs endroits. Avantage certain pour la maintenabilité du code et pour la réutilisation de celui-ci.

Utilisation typique des includes : le header, le footer, la navigation, les liens sociaux…

Pour includer du code dans un template ou autre endroit ( on peut includer des bouts de code dans des fichiers include aussi hein ) il suffit d’utiliser la syntaxe suivante dans ses templates :

{ % include nom-du-fichier-a-includer.html % }

Un exemple dans un fichier de template

_layouts

Layouts, comme son nom l’indique est l’ensemble des « layouts » de vos pages. Ce sont l’ensemble des templates de page.
Vous pouvez en créer une infinité, et les assigner à ce que bon vous semble.
Ils sont écrits en mélange d’HTML et de Liquid, et permettent une intégration rapide. En effet, le Liquid permet simplement de rendre « dynamiques » certaines zones ou textes.
Tout les tags et filtres classiques de Liquid sont supportés et Jekyll en propose même quelques exclusifs.

Voir les filtres sur le site de Jekyll

Il est possible de créer des boucles, pour par exemple afficher les 5 derniers posts d’une certaine catégorie etc…

C’est très flexible, très rapidement mis en place, un bonheur pour tout les intégrateurs !

_posts

Le nom laisse peu de place à l’imagination, il s’agit des posts, articles de votre blog.
Ecrits donc en markdown, rien de spécialement fou ici. Il est par contre obligatoire de nommer ses fichiers selon le modèle suivant :

YEAR-MONTH-DAY-title.MARKUP

Un point est néanmoins très intéressant. L’entête du fichier, (YAML Front Matter) recelant de nombreux possibles paramètres.

De base, il est nécessaire uniquement de préciser le layout et le title, sous cette forme :

—

layout: post

title: Blogging Like a Hacker

—

Mais il est possible de passer n’importe quels paramètres qui seront passés au template via cette entête.
L’on peut par exemple, définir le descriptif SEO, une image à la une, le permalien, les tags et diverses catégories… les possibilités sont longues, et se rapprochent des meta sur WordPress pour les connaisseurs.

En savoir plus sur les _posts et l’entête

_data

Il arrive desfois que l’on ai besoin d’une sorte de base de donnée.
Jekyll permet, grâce au dossier _data ( non présent de base ) d’obtenir un résultat similaire.
Pour ce faire, il faut créer un fichier, en yaml, portant le nom de l’objet que l’on souhaite.

Petit exemple, l’on souhaite créer un fichier comprennant un certain nombre de personnes pour les afficher sur une page d’équipe. L’on veut récupérer leurs noms et id twitter.

L’on crée dans ce cas un fichier membres.yml dans _data comprennant :

– name : Marty Mac Fly

  twitter : marty

– name : Cocolasticot

   twitter : coco

Ces données sont récupérables dans un layout par exemple de cette manière :

{ % for membre in site.data.membres % }


		{ { membre.name } }
	
{ % endfor % }

La prochaine fois

Voilà c’est la fin de cette deuxième partie, dans la dernière partie nous verrons les diverses méthodes de déploiement, les plugins et ressources utiles, et un peu de workflow.