Templating avec Jade

JADE est un langage de ‘templating’ puissant et facile à aborder. Il permet de s'affranchir de la répétition en html et de bénéficier d'opérateurs logiques et conditionnels.

La documentation en anglais n'étant pas très claire sur quelques fonctions, je propose dans cet article de revenir rapidement sur certaines d'entre elles.

Layout

Une page nommée layout.jade va contenir une structure de page web typique, mais sans le contenu principal.

Ensuite, toute nouvelle page qui dira “j'appartiens au modèle layout” se verra formatée sur ce modèle. Ainsi, pas besoin de répéter la structure.

Exemple de structure de page layout.jade :

    !!! 5
    html
    head
        meta ...
        title ...
        link ...
    body
        h1 Hello
        nav
            ul
                li
                    ...
        h1 Les news du jour
        block emplacement
        footer

Le but est de créer des pages dont le bloc principal viendra remplacer celui, vide, du layout.

Page index.jade :

    extends layout
    block emplacement
        h1 Titre
        p Contenu

Page archive.jade :

    extends layout
    block emplacement
        h1 Archive des posts
        p Bla bla

et ainsi de suite.

Chaque contenu qui suit le tag “block (nom)” sera inséré dans le layout à l'emplacement du même nom.

Includes

Basé sur la même idée que la fonction du même nom en PHP, le tag include permet d'insérer des blocs de jade dans une page jade.

Le classique étant de mettre le head et la navigation dans un fichier head.jade, et le footer dans un fichier foot.jade, dans un dossier nommé par exemple includes.

layout.jade
index.jade
archives.jade
includes/head.jade
includes/foot.jade

Ensuite, dans votre layout, vous importez les inclusions pour structurer votre page :

include includes/head
block emplacement
include includes/foot

Dans cet exemple, notre page index.jade sera formatée d'après layout.jade et incluera le contenu des fichiers head.jade, son propre contenu puis le contenu du fichier foot.jade.

Vos futures pages construites sur le même modèle commenceront par seulement deux lignes :

    extends layout
    block emplacement
        ...votre contenu...

Opérations logiques

Avec Jade on bénéficie pour la génération d'un site web statique de puissants opérateurs logiques tels que boucles, conditions, interpolation, etc.

Par exemple, au lieu d'empiler des centaines de tags li pour afficher de grandes listes, on peut faire générer la page à Jade en construisant un objet que l'on invoquera ensuite à chaque itération.

Ces objets sont de simples champs de données, un peu comme en JSON. On les formate par exemple comme ça :

objet =[{clé: 'valeur', clé: 'valeur'}, {clé: 'valeur', clé: 'valeur'}, ...]

Voici un exemple basique :

    album =[{url: 'pic1.jpg', auteur: 'John', date: '15/02/2013'}, {url: 'pic2.jpg', auteur: 'James', date: '11/02/2013'}, {url: 'pic3.jpg', auteur: 'Jenny', date: '09/02/2013'}]
    ul
        each photo in album
            li
                a(href=album.url)
                    img(src=album.url)
                h3 Photo de =album.auteur
                p Photo prise le =album.date
                p Emplacement de la photo :
                p= album.url

L'objet album contient 3 entités, contenant chacune 3 valeurs associées à une clé. J'ai fait court pour l'exemple afin de garder quelque chose de lisible.

On a ensuite un template de liste avec l'instruction de parcourir l'objet, et pour chaque entité trouvée, de créer un lien contenant l'image, un titre avec le nom de l'auteur et une ligne affichant la date de la photo. Puis on cite l'url.

En ajoutant le signe = devant le tag ou l'objet, on affiche le contenu de la valeur de l'objet en fonction de la clé.

De cette manière, non seulement on évite la répétition de lignes de tags html, mais on découple la logique du contenu, ce qui permet de faire toutes les modifications que l'on souhaite sans avoir à reformater le document source à chaque fois.

Vous pouvez avoir, par exemple, plusieurs layouts différents qui formateront à chaque fois le même objet de manière différente, sans avoir à recopier le contenu de l'objet lui-même dans des tags. Utile pour essayer plusieurs mises en pages, par exemple.

Voilà que l'on commence à voir la puissance de Jade pour le templating !

On améliorera au besoin avec des conditions :

    album =[{url: 'pic1.jpg', auteur: 'John', date: '15/02/2013'}, {url: 'pic2.jpg', auteur: 'James', date: '11/02/2013'}, {url: 'pic3.jpg', auteur: 'Jenny', date: '09/02/2013'}]
    ul
        each photo in album
            li
                a(href=album.url)
                    img(src=album.url)
                h3 Photo de =album.auteur
                p Photo prise le =album.date
                p Emplacement de la photo :
                p= album.url
                if album.auteur == 'Jenny'
                    p Jenny a un message pour vous.
                else
                    p #{album.auteur} n'a pas de message pour vous.

Conclusion

Je vous invite à visiter ma page KKStart pour comprendre comment mettre en place rapidement une système qui compile automatiquement vos fichiers, entre autres vos fichiers Jade. J'utilise également CodeKit qui est bien pratique et très performant.

Surtout ne ratez pas l'excellent tutoriel vidéo de Sayanee sur Build Podcast. Comme d'habitude elle explique très bien et va toujours à l'essentiel.

Si vous souhaitez aller plus loin, la documentation officielle sera utile même si pas toujours très bien rédigée.

Il n'y a pas beaucoup d'articles sur Jade sur le web, et quasiment aucun en français. J'espère que ça va changer, c'est vraiment un avantage de non seulement ne pas avoir à manipuler les lourds tags html directement, mais surtout de bénéficier d'opérateurs logiques et de modèles de cette puissance pour du site statique.

Auteur: Eric Dejonckheere