Le moteur de modèle Jade

Le moteur de modèle Jade

  1. 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
  2. Présentation

    • Jade Node Template Engine

    • 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.



  3. Installation et Syntaxe de Jade

    • Installation
      • Installez jade dans votre projet en utilisant la commande NPM suivante : npm install jade --global
    • 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
      • Jade Node Template Engine

      Soyez prudent lorsque vous donnez des espaces et des indentations en Jade. Une petite erreur peut modifier la sortie.

  4. Fonctionnalités de Jade

    1. 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>
    2. 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>
    3. 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>
    4. 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&apos;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>
                        
  5. 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:
    1. 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>
    2. 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>



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement