nav # navbar-default
  .container-fluid
    h1.navbar-header Mon site web!

Ces deux éléments sont compilés dans:

Les attributs sont ajoutés entre crochets:

 ul
    li
      a (href = '/') Accueil
    li
      a (href = '/ page-1') Page 1
    li
      a (href = '/ page-2') Page 2

  input.search (
    type = 'text'
    name = 'search'
    placeholder = 'Entrez un terme de recherche ...'
  )

Il en résulte ce qui suit:

  
 Accueil 
  
 Page 1 
  
 Page 2  

Il y a beaucoup à dire sur les attributs. Par exemple, vous pouvez utiliser JavaScript pour inclure des variables dans vos attributs ou affecter un tableau de valeurs à un attribut. La section suivante décrit l'utilisation de JavaScript dans Pug.

Texte brut et blocs de texte

Pug propose différentes méthodes pour ajouter du texte brut directement dans le code HTML restitué.

Nous avons déjà vu comment procéder. ajouter du texte brut en ligne:

 h1.navbar-header My Website! Nous pouvons écrire tout ce que nous voulons ici…

Vous pouvez également préfixer une ligne avec un caractère de pipe ( | ):

 p
  | Vous êtes connecté en tant que
  | utilisateur@exemple.com

Cela nous donne les informations suivantes:

   Vous êtes connecté en tant que
  utilisateur@exemple.com

Lorsqu'il s'agit de gros blocs de texte, vous pouvez simplement ajouter un point . juste après le nom de la balise, ou après la parenthèse fermante, si la balise a des attributs:

 p.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  incididunt tempor ut labore et dolore magna aliqua. Ut enim ad minim
  vengeance, quis nostrud exercice ullamco laboris nisi ut aliquip ex ea
  commodo conséquat.

Il en résulte:

   Lorem ipsum dolor sit amet, consectetur elip adipiscing, sed do eiusmod
  incididunt tempor ut labore et dolore magna aliqua. Ut enim ad minim
  vengeance, quis nostrud exercice ullamco laboris nisi ut aliquip ex ea
  commodo conséquat.

Enfin, les commentaires peuvent être ajoutés comme suit:

 // My merveilleuse barre de navigation
nav # navbar-default

Ce commentaire sera ajouté au rendu HTML:

Vous commencez un commentaire comme ceci:

 // - Mon merveilleux navbar
nav # navbar-default

Dans ce cas, le commentaire reste dans le fichier Pug mais n’apparaît pas dans le code HTML.

Les commentaires doivent figurer sur leur propre ligne. Ici, le commentaire sera traité comme du texte brut:

 nav # navbar-default // Mon merveilleux navbar

Les commentaires multilignes sont également possibles:

 //
  Ma merveilleuse barre de navigation
  C'est juste, génial!
nav # navbar-default

Démonstration de base de la syntaxe

Vous trouverez ci-dessous une démonstration d'une présentation de style Bootstrap qui illustre les techniques dont nous avons discuté jusqu'à présent:

Voir le stylo
. Démo de base de Pug de SitePoint ( @SitePoint )
sur CodePen .

Utilisation de JavaScript dans Pug

L'une des grandes choses à propos de Pug est la possibilité d'exécuter JavaScript dans vos modèles. Cela facilite l'insertion de variables dans nos modèles, l'itération sur les tableaux et les objets, le rendu conditionnel du HTML et bien plus encore.

Code tamponné vs code non tampon

Il s'agit d'une distinction importante à prendre en compte avant d'utiliser JavaScript dans Pug.

Le code sans mémoire tampon commence par un signe moins ( - ). Il n’ajoute rien directement à la sortie, mais ses valeurs peuvent être utilisées depuis Pug:

 - const name = "Jim"
// - Je peux maintenant faire référence à une variable 'name' dans mon code Pug

Le code tamponné commence par un égal ( = ). Il évalue une expression JavaScript et affiche le résultat.

 p = 'Deux fois la puissance de dix:' + 2 ** 10

Le code ci-dessus se résume à ceci:

 Deux sur dix, la puissance est: 1024 

Pour des raisons de sécurité, le code mis en tampon est protégé par HTML.

 p = ' "

Le code ci-dessus compile ceci:

 & lt; script & gt; alerte (" Hi ") & lt; / script & gt; 
 p>

Interpolation

L'interpolation de chaîne est le processus consistant à remplacer un ou plusieurs espaces réservés dans un modèle par une valeur correspondante. Comme nous venons de le voir, l’entrée en mémoire tampon offre une méthode pour ce faire. Une autre utilise # {} . Ici, Pug évaluera tout code entre les accolades, y échappera et le traduira dans le modèle.

 - const name = "jim"
p Bonjour # {nom}

Le code ci-dessus compile ceci:

 Bonjour jim 

Comme les accolades peuvent contenir toute expression JavaScript valide, cela ouvre un tas de possibilités:

 - const name = "jim"
- // - Première lettre upcase
p Hi # {name.charAt (0) .toUpperCase () + name.slice (1)}

Ceci se compile pour:

 Bonjour Jim 

Il est également possible de rendre des valeurs non échappées dans vos modèles en utilisant ! {} . Mais ce n'est pas la meilleure idée si l'entrée provient d'une source non fiable.

Remarque: lorsque vous souhaitez affecter la valeur d'une variable à l'attribut d'un élément, vous pouvez omettre l'élément # {}. . Par exemple: img (alt = name) .

Itération

Le mot clé de Pug chaque facilite la répétition sur les tableaux:

 - const employés = ['Angela', 'Jim', 'Nilson', 'Simone']
ul
  chaque employé dans les employés
    li = employé

Il en résulte ce qui suit:

  
 Angela 
  
 Jim 
  
 Nilson 
  
 Simone 

Vous pouvez également l'utiliser pour parcourir les clés d'un objet:

 -
  const employé = {
    'Prénom': 'James',
    'Nom': 'Hibbard'
  }
ul
  chaque valeur, entrez l'employé
    li = `$ {clé}: $ {valeur}`

Il en résulte:

  
 Prénom: James 
  
 Nom: Hibbard 

Pug vous permet également de fournir un bloc else qui sera exécuté si le tableau ou l'objet est vide:

 - const employee = []
ul
  chaque employé dans les employés
    li = employé
  autre
    li La société n'a aucun employé. Peut-être en louer?

Enfin, notez que vous pouvez utiliser pour comme alias pour chacun .

Conditionals

Les conditionals offrent un moyen très pratique de restituer un code HTML différent en fonction du résultat. d'une expression JavaScript:

 -
  const employé = {
    prenom: 'James',
    nom: 'Hibbard',
    extn: '12345'
  }

#employé
  p = `$ {employee.firstName} $ {employee.lastName}`
  p extension:
    si employé.extn
      = employé.extn
    autre
      | n / a

Dans cet exemple, nous vérifions si l'objet employee a une propriété extn puis affiche la valeur de cette propriété (si elle existe) ou le texte “ n / a ”.

JavaScript dans la démonstration de Pug

Vous trouverez ci-dessous une démonstration de certaines des techniques dont nous avons parlé dans cette section. Cela présente les avantages de Pug un peu plus que la démo précédente, car tout ce que nous avons à faire pour ajouter d'autres employés consiste à ajouter d'autres objets à notre tableau sitePointEmployees .

Voir le stylo
JavaScript dans Pug Demo de SitePoint ( @SitePoint )
sur CodePen .

Un exemple pratique

Maintenant, nous avons une idée raisonnable de la syntaxe de Pug et de la façon dont cela fonctionne, finissons par construire une petite application Express.js pour illustrer quelques-unes des fonctionnalités les plus avancées de Pug.

Le code de cet exemple est disponible sur GitHub . 19659004] Remarque: ne vous inquiétez pas si vous n'avez pas utilisé Express auparavant. C’est un framework Web pour Node.js qui fournit un ensemble robuste de fonctionnalités permettant de créer des applications Web. Si vous souhaitez en savoir plus, consultez notre Initiation à Express .

Commençons par créer un nouveau projet et installer Express:

 mkdir pug-express
cd pug-express
npm init -y
npm j'exprime

Créez ensuite un fichier app.js dans le dossier de pug-express :

 touch app.js

Ajoutez ensuite le texte suivant:

 const express = require ('express');
const app = express ();

app.get ('/', (req, res) => {
  res.send ('Hello, World!');
});

app.listen (3000, () => {
  console.log ('Écoute sur le port 3000 ...');
});

Nous déclarons ici un itinéraire ( / ), qui répondra à une demande GET avec le texte «Hello, World!». Nous pouvons le tester dans nos navigateurs, en démarrant le serveur avec noeud app.js puis visite http: // localhost: 3000 .

Si vous voyez quelque chose comme cela, les choses se sont déroulées comme prévu:

Ajout de données

Cette application Express ne fera rien de trop spectaculaire. Nous allons créer un répertoire de personnel simple, qui extrait une liste d’employés d’une base de données et les affiche dans un tableau. Pour cela, nous aurons besoin d’une base de données et de quelques données.

Cependant… l’installation et la configuration d’une base de données est un peu lourde pour ce petit exemple, je vais donc utiliser un paquet nommé json- serveur . Cela nous permettra de créer un fichier db.json qu'il transformera en une API REST contre laquelle nous pouvons effectuer des opérations CRUD.

Installez-le:

 npm i -g serveur json

Créez maintenant le fichier db.json susmentionné à la racine du projet:

 touch db.json

Enfin, nous avons besoin de JSON pour le peupler. Nous allons utiliser le Random User Generator un API gratuit et à code source ouvert permettant de générer des données utilisateur aléatoires. Vingt-cinq personnes devraient faire de même pour notre exemple, alors dirigez-vous vers https://randomuser.me/api/?results=25 et copiez les résultats dans db.json . [19659004] Enfin, démarrez le serveur dans une deuxième fenêtre de terminal avec:

 json-server --watch db.json -p = 3001

Json-server démarrera donc sur le port 3001 et surveillera les modifications apportées à notre fichier de base de données.

Configuration de Pug en tant que modèle de moteur

Express prend en charge de manière optimale l'utilisation de Pug. .

Premièrement, ajoutons Pug à notre projet:

 npm i pug

Ensuite, dans app.js nous devons dire à Express d'utiliser Pug:

 app.set ('view engine', 'pug');

Créez ensuite un répertoire views puis dans le répertoire vues ajoutez un fichier index.pug :

 mkdir views
touchez vues / index.pug

Ajoutez du contenu à ce fichier:

 doctype html
html (lang = 'en')
 tête
   titre Bonjour le monde!
 corps
   h1 Bonjour le monde!

Puis modifiez app.js comme suit:

 const express = require ('express');
const app = express ();
app.set ('view engine', 'pug');

app.get ('/', (req, res) => {
  res.render ('index');
});

app.listen (3000, () => {
  console.log ('Écoute sur le port 3000 ...');
});

Enfin, redémarrez le serveur de nœud, puis actualisez votre navigateur et vous devriez voir ceci:

Et c’est tout. Vous êtes prêt à partir.

Création du répertoire du personnel

La tâche suivante de la liste consiste à transmettre des données au modèle Pug à afficher. Pour ce faire, nous aurons besoin d’une méthode permettant d’extraire les données du serveur JSON. Malheureusement, l’API de récupération n’est pas implémentée dans Node, utilisons donc axios le populaire client HTTP:

 npm i axios

Puis modifiez app.js comme suit:

 const express = require ('express');
const axios = require ('axios');
const app = express ();

app.set ('view engine', 'pug');

app.get ('/', async (req, res) => {
  const requête = wait axios.get ('http: // localhost: 3001 / results');
  res.render ('index', {employés: requête.data});
});

app.listen (3000, () => {
  console.log ('Écoute sur le port 3000 ...');
});

Il se passe quelques choses ici. Nous avons transformé notre gestionnaire de routage en une fonction asynchrone afin que nous puissions attendre que les données d'employé soient renvoyées par json-server avant de les transférer au modèle.

Ensuite, nous rendons l'index. comme auparavant, mais cette fois, nous lui transmettons un littéral d'objet contenant toutes nos données.

Remarque: vous devez redémarrer le serveur de nœud chaque fois que vous modifiez app.js . Si cela commence à vous gêner, jetez un œil à nodemon qui le fera pour vous.

Passons maintenant au Pug. Modifiez index.pug pour ressembler à ceci:

 doctype html
html (lang = 'en')
  tête
    title Annuaire du personnel
    lien (rel = 'stylesheet' href = 'https: //cdn.jsdelivr.net/npm/semantic-ui@2.3.3/dist/semantic.min.css')
    style.
      table.ui.celled img {display: inline-block; }
      pied de page {marge: 35px 0 15px 0; text-align: center}
  corps
    main # main
    h1.ui.center.aligned.header Annuaire du personnel
    .ui.conteneur
      table.ui.celled.table.center.aligned
        la tête
          tr
            Avatar
            e prénom
            nom de famille
            le courrier
            e téléphone
            e ville
        tbody
          chaque employé dans les employés
            tr
              td
                img.ui.mini.rounded.image (src = employee.picture.thumbnail)
              td # {employee.name.first}
              td # {employee.name.last}
              td # {employee.email}
              td # {employee.phone}
              td # {employee.location.city}
        pied
          tr
            th (colspan = '6')
    bas de page
      p © # {new Date (). getFullYear ()} Mon entreprise

Il n’ya heureusement rien d’étonnant à cela. Nous utilisons sémantique-ui-css pour certains styles, ainsi que pour quelques styles de notre choix.

Ensuite, dans le corps du tableau, nous parcourons le tableau de . employés que nous passons de app.js et en enregistrant leurs détails dans un tableau.

Au bas de la page se trouve un pied de page avec notre revendication de droits d'auteur et l'année en cours. [19659004] Si vous actualisez la page maintenant, vous devriez voir ceci:

Héritage des modèles

C’est déjà très joli, mais pour terminer, je vais vous montrer comment structurer nos vues pour offrir une flexibilité maximale au fur et à mesure de l'avancement du projet.

Commençons par créer un fichier layout.pug dans le répertoire views :

. /layout.pug

Ajoutez ensuite le texte suivant:

 doctype html
html
  tête
    title Annuaire du personnel
    lien (rel = 'stylesheet' href = 'https: //cdn.jsdelivr.net/npm/semantic-ui@2.3.3/dist/semantic.min.css')
    style.
      table.ui.celled img {display: inline-block; }
      pied de page {marge: 35px 0 15px 0; text-align: center}

  corps
    main # main
    h1.ui.center.aligned.header Annuaire du personnel
    .ui.conteneur

      bloquer le contenu

    bloquer le pied de page
      bas de page
        p © # {new Date (). getFullYear ()} Mon entreprise

Nous avons créé un fichier de présentation pouvant être étendu par d’autres fichiers Pug dans notre projet. Lorsque vous avez un grand nombre de fichiers Pug, cela économise une quantité considérable de code.

Voici comment cela fonctionne: nous avons défini deux blocs de contenu ( bloc content et bloc footer. ) qu'un modèle enfant peut remplacer. Dans le cas du bloc footer nous avons également défini un contenu de repli qui sera restitué si le modèle enfant ne redéfinit pas ce bloc.

Nous pouvons à présent indiquer notre index . pug fichier à hériter de notre mise en page:

 prolonge layout.pug

bloquer le contenu
  table.ui.celled.table.center.aligned
    la tête
      tr
        Avatar
        e prénom
        nom de famille
        le courrier
        e téléphone
        e ville
    tbody
      chaque employé dans les employés
        tr
          td
            img.ui.mini.rounded.image (src = employee.picture.thumbnail)
          td # {employee.name.first}
          td # {employee.name.last}
          td # {employee.email}
          td # {employee.phone}
          td # {employee.location.city}
    pied
      tr
        th (colspan = '6')

Le résultat est le même que précédemment, mais le code a maintenant une meilleure structure.

Mixins

Les mixins vous permettent de créer des blocs réutilisables de Pug. Nous pouvons utiliser ceci pour extraire notre ligne de table dans son propre fichier.

Créez un dossier appelé mixins dans le dossier views et créez-y un fichier nommé _tableRow. .pug :

 vues / mixins vues
touchez vues / mixins / _tableRow.pug

Les mixins sont déclarés à l'aide du mot clé mixin . Ils sont compilés en fonctions et peuvent prendre des arguments. Ajoutez ce qui suit à views / mixins / _tableRow.pug :

 mixin tableRow (employee)
  tr
    td
      img.ui.mini.rounded.image (src = employee.picture.thumbnail)
    td # {employee.name.first}
    td # {employee.name.last}
    td # {employee.email}
    td # {employee.phone}
    td # {employee.location.city}

Maintenant, modifiez index.pug comme suit:

 étend la mise en page.pug
inclure mixins / _tableRow

bloquer le contenu
  table.ui.celled.table.center.aligned
    la tête
      tr
        Avatar
        e prénom
        nom de famille
        le courrier
        e téléphone
        e ville
    tbody
      chaque employé dans les employés
        + tableRow (employé)
    pied
      tr
        th (colspan = '6')

Comme vous pouvez le constater, nous importons le mixin en haut du fichier. Nous l’appelons ensuite en préfixant son nom d’un symbole plus et en lui transmettant notre objet employé à afficher.

C’est exagéré pour notre petite application, mais il illustre une fonction très utile de Pug qui nous permet écrire un code réutilisable.

Conclusion

Bien joué si vous en êtes arrivé là! Nous avons couvert beaucoup de terrain dans ce tutoriel. Nous avons examiné l’installation de Pug, sa syntaxe de base, son support JavaScript et ses constructions pour l’itération et le rendu conditionnel. Enfin, nous avons créé une application Express entièrement fonctionnelle qui extrait les données d’une source distante et les transmet à un modèle Pug.

Pug peut en faire bien plus. Je vous encourage à consulter son excellente documentation et à commencer à l’utiliser dans vos projets. Vous pouvez également l'utiliser avec plusieurs frameworks JS modernes, tels que React ou Vue et il a même été transféré dans plusieurs autres langues .

Si

vous recherchez un défi, pourquoi ne pas essayer d'étendre le répertoire des employés pour ajouter la fonctionnalité CRUD manquante. Et si vous vous en tenez à la syntaxe, n'oubliez pas que de l'aide est toujours à portée de main .