jadeCommencer avec jade


Remarques

Pug (anciennement connu sous le nom de jade) est un moteur de modèle de haute performance fortement influencé par Haml et implémenté avec JavaScript pour Node.js et les navigateurs.

  1. Produit du HTML
  2. Prend en charge le code dynamique
  3. Prend en charge la réutilisabilité (DRY)

Page d'accueil

Dépôt sur GitHub

Versions

version date de sortie
0.0.2 2010-07-03
1.0.0 2013-12-22
1.11.0 2015-06-12

Installation ou configuration

Avant de vous lancer pour coder avec Pug, vous devez avoir des prérequis.

Vous devrez installer:

Après l'installation de NodeJS, vous pouvez vérifier l'installation correcte de votre terminal:

$ node -v
 

En cas de succès, le numéro de la version de Node sera imprimé.

Pour installer Pug dans votre projet, la méthode privilégié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 install pug
 

Si vous voulez installer globalement, vous pouvez taper:

$ npm install pug-cli -g
 

et courir avec

$ pug --help
 

Syntaxe

Pug (l'ancien nom est Jade) est une syntaxe propre et sensible aux espaces pour l'écriture 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 en 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 rendre Pug au code HTML:

  1. En indentant le texte, l'arborescence HTML sera créée. 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 espaces 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 rendu comme <div class="myClass"></div>
  7. Avec = (signe d'égalité suivi d'un espace), une variable sera récupérée. Exaple: h1= title
  8. Un != (Pas égal à) a récupéré une variable sans s'échapper.
  9. A - (trait d'union) vous permet d'écrire du JavaScript. Exemple: - console.log("foo");
  10. La liaison à un fichier externe peut se faire comme suit: script(src="/js/chat.js")
  11. Le script Inline pourrait utiliser ce script. .
  12. Une directive pour ajouter la mise en page de base: extends ../layout .
  13. À layout.pug l'insertion se fait en utilisant block content
  14. L’utilisation des partiels peut se faire de deux manières:
    1. par partiel != partial(template file name/options) .
    2. Par inclure: include ../includes/footer
  15. L'inverse de include est extend . Cela permet à partir d' une page « html block parties » pour envoyer à une page de mise en page par exemple: extend layout la extend layout en extend layout
  16. La concaténation se produit avec les caractères + (plus) ou # (hashtag). Le plus est utilisé pour le code JavaScript. Le hashtag en HTML et rend le contenu: `p Le nom est: # {myName}

Utiliser pug 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));
 

Les options

  • filename Utilisé dans les exceptions et requis lors de l'utilisation de includes
  • compileDebug Lorsque false, aucune instrumentation de débogage n'est compilée
  • pretty Ajoute des espaces blancs d'indentation à la sortie (false par défaut)