Jekyll - Simple, blog-aware, static sites
Fonctionnement
Utilisation de Liquid
Pour améliorer le fonctionnement de votre site et vous faciliter la tâche au développement des pages, Jekyll vous offre la possibilités d'utiliser la syntaxe Liquid pour divers fonctionnement.
Tout d'abord, il faut retenir une régle pour écrire du Liquid : Tous les fichiers avec un bloc YAML (Front Matter) sont sujet au « Processing ».
Pour chacun de ces fichiers, Jekyll fabrique une grande variété de données disponibles via le système de templates Liquid.
Il faut retenir 4 variables :
- site : tout ce qui est relatif au site et configuré dans _config.yml (ex: site.title)
- page : tout ce qui est relatif à une page ou un article
- post : tout ce qui est relatif à un article
- paginator : tout ce qui est relatif à la pagination
Figure 1 - Liquid variables
De plus, cette syntaxe offre la possibilité de faire des opérations :
Figure 2 - Liquid operations
On peut retrouve la totalité des syntaxes Liquid ici : Wiki Liquid
Front Matter : YAML
Le bloc YAML nous permet de définir des variables (comme config yml) qui seront utilisables dans la page HTML de l'article mais aussi dans la page HTML qui inclus l'article !
- Layout : (Obligatoire) Template utilisé
- Title: Titre de l’article
- Categories: : Catégories de l'article (Pour itérer sur les articles d’une catégorie) :
{% for post in site.categories[‘maCategorie’] %}
- Date: Date de l’article
- myVariable: Variable personnalisée (Autant qu’on veux)
On peut voir ci-dessous un article écrit en Markdown et qui définit certaines variables YAML :
Figure 3 - Un article
Et maintenant un fichier index.html qui va afficher tous les articles contenus dans le dossier /_posts, en utilisant la syntaxe Liquid couplé avec les variables YAML !
Figure 4 - Une page html
On peut retrouve la totalité des syntaxes YAML ici : YAML syntaxe
Markdown
Le Markdown est le langage à utilisé pour l'écriture de nos articles. C'est un langage de balisage léger, qui offre une syntaxe facile à lire et à écrire. Il est convertible facilement en HTML (Jekyll s'en chargera)
On retrouve quelques syntaxe ci-dessous, mais on peut tout les retrouver sur cette page : Markdown syntaxe
Figure 5 - Exemple de syntaxes