Débuter avec le jade

Syntaxe

Pug (l’ancien nom est Jade) est une syntaxe propre et sensible aux espaces pour écrire du HTML. Voici un exemple simple :

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

Produit la sortie suivante au format HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

Voici les règles pour afficher Pug en code HTML :

  1. En indentant le texte, l’arborescence HTML sera construite. l’indentation peut être utilisée avec des espaces ou des tabulations. Cela ne pouvait pas être mélangé!
  2. Les balises HTML sont écrites sans < et >. Les attributs sont des places entre parenthèses.
  3. Le commentaire peut être fait avec // ou <!-- -->. Les commentaires avec //- ne sont pas visibles dans le HTML rendu.
  4. Avec #{ } un modèle proposé sera généré : #{header} #{user.username}.
  5. Le # (hashtag) sans accolades sera un élément div créé avec le texte comme ID. Exemple #myID sera rendu comme <div id="myID"></div>.
  6. Avec un . (point) sera un div généré avec un attribut de classe. Exemple : .myClass sera affiché sous la forme <div class="myClass"></div>
  7. Avec (signe d’égalité suivi d’un espace), une variable sera récupérée. Exemple : h1= titre
  8. Un != (différent de) récupère une variable sans s’échapper.
  9. Un - (trait d’union) vous permet d’écrire du JavaScript. Exemple : - console.log("foo");
  10. Le lien vers un fichier externe peut être le suivant : script(src="/js/chat.js")
  11. Le script en ligne pourrait utiliser ce script..
  12. Une directive pour ajouter la mise en page de base : extends ../layout.
  13. À layout.pug se produit l’insertion en utilisant block content
  14. L’utilisation de partiels peut se faire de deux manières :
    1. by partial: != partial(template file name/options).
    2. By include: include ../includes/footer
  15. L’inverse de l’inclusion est “étendre”. Cela permet depuis une page “parties html block” d’envoyer vers une page de mise en page par exemple : extend layout
  16. La concaténation se produit avec le caractère + (plus) ou # (hashtag). Le plus est utilisé dans le code JavaScript. Le hashtag en HTML et affiche le contenu : `p Le nom est : #{myName}

Utilisation de carlin avec Node.js

var pug = require('pug');

// compile
var fn = pug.compile('string of pug', options);
var html = fn(locals);

// render
var html = pug.render('string of pug', merge(options, locals));

// renderFile
var html = pug.renderFile('filename.pug', merge(options, locals));

Options

  • filename Utilisé dans les exceptions, et requis lors de l’utilisation des inclusions
  • compileDebug Si false, aucune instrumentation de débogage n’est compilée
  • pretty Ajouter un espace blanc de jolie indentation à la sortie (false par défaut)

Installation ou configuration

Avant de vous lancer à coder avec Pug, vous devez avoir quelques prérequis.

Vous devrez installer :

  • [NodeJS][1] avec NPM * [ExpressJS][2] (facultatif)

Après avoir installé NodeJS, vous pouvez vérifier dans votre terminal la bonne installation en faisant :

$ nœud -v

En cas de succès, il imprimera le numéro de version de Node.

Pour installer Pug dans votre projet, la méthode préférée et simple consiste à utiliser NPM (Node Package Manager). Si vous êtes familier avec cela, exécutez simplement cette ligne de code dans votre terminal :

$ npm installer carlin

Si vous voulez installer globalement, vous pouvez taper :

$ npm installer pug-cli -g

et courir avec

$ pug --help

[1] : https://nodejs.org/ [2] : http://expressjs.com/