Objectifs
- Être capable d'utiliser le moteur de modèle Jade dans l'application Node.js
- Connaître les boucles et les instructions conditionnelles dans Jade
Présentation
- Jade est un moteur de création de modèles élégant, principalement utilisé pour la création de modèles côté serveur dans NodeJS.
- Autrement, Jade vous offre une nouvelle façon puissante d'écrire du balisage, avec un certain nombre d'avantages par rapport au HTML ordinaire .
- Étant donné que la plupart des éditeurs de texte conçus pour le Web suppriment l'indentation (et certains ne conservent que les caractères de nouvelle ligne), compressant ainsi le fichier et l'optimisant pour l'utilisation Web. Mais cela ne sert à rien pour écrire Jade. Parce que l'indentation est au cœur de la syntaxe Jade!
- Donc, dans ce tutoriel, nous utilisons une extension Chrome appelée Jade Editor pour illustrer les boucles et les instructions conditionnelles.
- Vous pouvez simplement tester votre code dans cette extension Google Chrome, puis copier le code dans votre fichier réel. Cela aiderait même à réduire les erreurs compliquées dans les fichiers longs.
Installation et Syntaxe de Jade
Installation
- Installez jade dans votre projet en utilisant la commande NPM suivante :
npm install jade --global
- Installez jade dans votre projet en utilisant la commande NPM suivante :
Syntaxe de Jade
- Jade utilise les espaces et l'indentation dans son langage. Par conséquent, nous devons faire attention à suivre la syntaxe appropriée.
- Tout texte au début d'une ligne (par défaut) est interprété comme une balise HTML.
- Le principal avantage de Jade est que ce texte rend à la fois les balises de fermeture et d'ouverture de l'élément HTML, ainsi que les symboles <> et </>.
- Par conséquent, nous enregistrons de nombreuses frappes au fur et à mesure que les développeurs écrivent en Jade!
- Si vous voulez essayer cela au fur et à mesure, vous pouvez utiliser CodePen et choisir Jade comme préprocesseur HTML ou utiliser le compilateur en ligne sur la page officielle de Jade pour compiler votre Jade en HTML.
Exemple
Soyez prudent lorsque vous donnez des espaces et des indentations en Jade. Une petite erreur peut modifier la sortie.
Fonctionnalités de Jade
Balises simples
- Comme vous l'avez peut-être remarqué précédemment, il n'y a pas de balises "fermantes" dans Jade. Au lieu de cela, Jade utilise l'indentation (c'est-à-dire un espace blanc) pour déterminer comment les balises sont imbriquées.
Jade Html doctype html html head title mon modèle de jade body h1 Bonjour #{name}<!DOCTYPE html> <html> <head> <title>mon modèle de jade</title> </head> <body> <h1>Bonjour Riadh</h1> </body> </html>Identifiant et classes
- Comment ajouter des attributs à nos balises? Très simple vraiment. Revenons à notre premier exemple et ajoutons quelques classes et identifiants.
Jade Html #content .block input#bar.foo1.foo2<div id="content"> <div class="block"> <input id="bar" class="foo1 foo2"/> </div> </div>Les listes
Jade Html h3 Utilisation des listes avec Jade ul Liste non ordonnée li Liste 01 li Liste 02 li Liste 03 ol Liste ordonnée li Liste 01 li Liste 02 li Liste 03<h3>Utilisation des listes avec Jade</h3> <ul> Liste non ordonnée <li>Liste 01</li> <li>Liste 02</li> <li>Liste 03</li> </ul> <ol> Liste ordonnée <li>Liste 01</li> <li>Liste 02</li> <li>Liste 03</li> </ol>Les attributs
- Les attributs sont ajoutés en les plaçant entre parenthèses juste après le nom de la balise. Ils suivent le format
name=value. De plus, plusieurs attributs doivent être séparés par une virgule. Par exemple,
Jade Html html head link(type='text/css', rel='stylesheet', href='/site.css') title Hello body form .mb-3 label.form-label Email address input#exampleInputEmail1.form-control(type='email', aria-describedby='emailHelp') #emailHelp.form-text We'll never share your email with anyone else. .mb-3 label.form-label(for='exampleInputPassword1') Password input#exampleInputPassword1.form-control(type='password') .mb-3.form-check input#exampleCheck1.form-check-input(type='checkbox') label.form-check-label Check me out button.btn.btn-primary(type='submit') Submit<!doctype html> <html> <head> <link type="text/css" rel="stylesheet" href="/site.css" /> <title>Hello</title> </head> <body> <form> <div class="mb-3"> <label class="form-label">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </body> </html>- Les attributs sont ajoutés en les plaçant entre parenthèses juste après le nom de la balise. Ils suivent le format
Les Boucles et conditions dans Jade
- Jade fournit une excellente syntaxe de boucle afin que vous n'ayez pas besoin de recourir à JavaScript. Passons en boucle sur un tableau:
boucle for
Jade Html - var droids = ["R2D2", "C3PO", "BB8"]; div h1 Famous Droids from Star Wars for name in droids div.card h2= name<div> <h1>Famous Droids from Star Wars</h1> <div class="card"> <h2>R2D2</h2> </div> <div class="card"> <h2>C3PO</h2> </div> <div class="card"> <h2>BB8</h2> </div> </div>ul each val in [1, 2, 3, 4, 5] li= val<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>ul each val, index in ['zero', 'one', 'two'] li= index + ': ' + val<ul> <li>0: zero</li> <li>1: one</li> <li>2: two</li> </ul>boucle while
Jade Html - var n = 0 ul while n < 4 li= n++<ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul>