Jade est un moteur de template inspiré par le HAML et implémenté en Javascript. Il propose une approche différente de ce que l'on peut avoir l'habitude de voir en se basant sur un code tabulé et sans "balises"
Un petit exemple du site :
doctype html
html(lang="en")
head
title hello jade
body
h1 hello world
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia rerum, libero repudiandae? Et voici le HTML généré
<!DOCTYPE html>
<html lang="en">
<head>
<title>hello jade</title>
</head>
<body>
<h1>hello world</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia rerum, libero repudiandae? </p>
</body>
</html>On va continuer à voir quelques fonctionnalités du language, mais pour ceux qui veulent pas se taper toute la configuration à faire sur nodejs, sachez que prepros reconnait la syntaxe .jade et fait la compilation tout seul, un simple glisser-déposer du dossier suffit à tout configurer.
Les variables
On peut insérer des variables dans le code
- var boolean = true
if boolean
p boolean is #{boolean}En HTML :
<p>boolean is true</p>Les boucles
On peut faire des boucles comme on le ferait en d'autres languages :
h2 loop for
ul
- for (var i = 0; i < 4; i++)
li item #{i}
h2 loop each
- list = ['bob', 'max', 'toto']
each name in list
p hello #{name}
h2 loop while
- var n = 0
ul
while n < 3
li = n++Le code si dessus génère le html suivant :
<h2>loop for</h2>
<ul>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<h2>loop each</h2>
<p>hello bob </p>
<p>hello max </p>
<p>hello toto </p>
<h2>loop while</h2>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>Les attributs
Je reprends quelques exemples de la documentations :
#myId ceci est un id
.class ceci est une class
input(type='checkbox', checked)
form(#form action="action.php" method="post")
input(type="text" name="name" id="name")
button(type="submit") send en HTML
<div id="myId">ceci est un id</div>
<div class="class">ceci est une class</div>
<input type="checkbox" checked="checked"/>
<form #form="#form" action="action.php" method="post">
<input type="text" name="name" id="name"/>
<button type="submit">send </button>
</form>Voilà pour les bases, il y a aussi un système d'héritage et d'inclusion à la manière de twig ou blade, un système de filtre et plein de choses utiles quand on a envie d'aller vite dans l'écriture du HTML.
