Fermer

mai 16, 2019

Guide du débutant pour Pug –

3 conseils pour accélérer votre site Web Bootstrap - SitePoint


SitePoint Premium vous propose une collection complète de livres couvrant les éléments essentiels pour les développeurs, tels que Pug, Gulp, Git, etc. Inscrivez-vous maintenant .

En tant que concepteurs ou développeurs Web, nous devons probablement tous écrire notre juste part de HTML. Et bien que ce ne soit pas la tâche la plus difficile, cela peut sembler un peu ennuyeux ou répétitif. Le format HTML est également statique, ce qui signifie que si vous souhaitez afficher des données dynamiques (extraites d'une API, par exemple), vous vous retrouvez toujours avec un méli-mélo de balises HTML dans JavaScript. Cela peut être un cauchemar à déboguer et à maintenir.

C’est là que Pug entre en jeu. Pug est un moteur de modèle pour Node et pour le navigateur. Il compile au format HTML et a une syntaxe simplifiée, ce qui peut vous rendre plus productif et votre code plus lisible. Pug facilite à la fois l'écriture de code HTML réutilisable et le rendu de données extraites d'une base de données ou d'une API.

Dans ce guide, je vais vous montrer comment utiliser Pug. Nous allons commencer par l’installer à partir de npm, passer en revue sa syntaxe de base, puis quelques exemples d’utilisation de JavaScript dans Pug. Enfin, nous allons explorer quelques fonctionnalités plus avancées de Pug en créant un simple projet Node / Express utilisant Pug comme moteur de gabarit.

Qu'est-ce qu'un moteur de gabarit et pourquoi en ai-je besoin?

Avant de commencer à chercher à Pug, prenons une seconde pour comprendre les concepts en jeu.

Un moteur de gabarit est un programme chargé de compiler un gabarit (qui peut être écrit à l'aide de plusieurs langues) en HTML. Le moteur de gabarit recevra normalement les données d’une source externe, qu’il injectera dans le gabarit qu’il compile. Ceci est illustré par le diagramme suivant:

Cette approche vous permet de réutiliser des éléments de page Web statiques tout en définissant des éléments dynamiques basés sur vos données. Cela facilite également la séparation des problèmes en gardant la logique de votre application isolée de votre logique d'affichage.

Vous bénéficierez probablement d'un moteur de modèle si votre site ou votre application Web utilise des données, comme un répertoire du personnel pour l'administration des employés. , une boutique en ligne répertoriant divers produits que les utilisateurs peuvent acheter ou un site doté d’une fonctionnalité de recherche dynamique.

Vous n’avez pas besoin d’un moteur de modèle si vous récupérez une petite quantité de données à partir d’une API (auquel peut simplement utiliser les chaînes de modèle natives de JavaScript ), ou si vous créez un petit site statique.

Un peu d'histoire

Il est également intéressant de noter que Pug s'appelait Jade jusqu'à ce qu'il soit forcé. changer de nom en raison d'une revendication de marque déposée en 2015. Le changement de nom est entré en vigueur avec la version 2.0

Il existe encore de nombreux documents relatifs à Jade disponibles en ligne. Et même si certaines d’entre elles sont probablement encore valables, le fait que le changement de nom ait coïncidé avec un changement de version majeur signifie que la syntaxe de Pug présente plusieurs différences, déprécations et suppressions par rapport à son prédécesseur. Ceux-ci sont documentés ici .

Si vous souhaitez en savoir plus, vous pouvez lire l’annonce originale de changement de nom dans de ce numéro de GitHub . Dans le cas contraire, veillez simplement à ajouter le mot "modèle" dans vos recherches Google relatives à Pug afin d'éviter que les résultats ne soient saturés.

Installation de Pug

Avant de pouvoir écrire du Pug, nous devons d'abord install Node, npm (qui est fourni avec Node) et le paquetage pug-cli .

Il existe plusieurs options pour installer Node / npm. Rendez-vous sur la page d’accueil du projet et téléchargez les fichiers binaires appropriés pour votre système, ou utilisez un gestionnaire de version tel que nvm . Je recommanderais si possible d'utiliser un gestionnaire de versions, car cela vous permettra d'installer différentes versions de nœuds et de basculer entre elles à volonté. Cela éliminera également un tas d'erreurs potentielles d'autorisations.

Vous pouvez consulter notre didacticiel « Installation de plusieurs versions de Node.js à l'aide de nvm » pour un guide plus détaillé.

Once Node et npm sont installés sur votre système, vous pouvez installer le paquet pug-cli comme suit:

 npm i -g pug-cli

Vous pouvez vérifier que le processus d'installation s'est déroulé correctement en tapant pug --version dans un terminal. Cela produira la version de Pug et la version de la CLI que vous avez installées.

Au moment de la rédaction du présent document, il était libellé comme suit:

 $ pug --version
version carlin: 2.0.3
version pug-cli: 1.0.0-alpha6

Mise en évidence de la syntaxe dans votre éditeur

Si votre éditeur n'offre pas de mise en évidence de la syntaxe pour Pug, il serait judicieux de rechercher une extension pour ajouter cette fonctionnalité.

J'utilise actuellement Sublime Text. 3 et voici comment se présente un fichier .pug :

 Un fichier Pug sans mise en évidence syntaxique

Pour remédier à cela, il est possible d'installer le . ] Paquet Sublime Pug :

 Pug avec mise en évidence de la syntaxe

La mise en évidence de la syntaxe facilitera grandement l'utilisation des fichiers Pug, notamment ceux de toute longueur.

Essayez Pug sans installation.

Si vous souhaitez suivre les exemples les plus simples de ce didacticiel, vous pouvez également les exécuter dans différents types de code en ligne.

CodePen par exemple, prend en charge le support Pug. Créez simplement un nouveau stylo, puis sélectionnez Paramètres > HTML et choisissez Pug comme votre pré-processeur. Cela vous permettra d'entrer du code Pug dans le volet HTML et de voir le résultat apparaître en temps réel.

En prime, vous pouvez cliquer sur la flèche vers le bas dans le volet HTML et sélectionner Voir compilé HTML pour afficher le balisage généré par Pug.

Syntaxe de base de Pug

Maintenant que Pug est installé, essayons-le. Créez un nouveau répertoire nommé pug-examples et modifiez-le. Créez ensuite un autre répertoire appelé html et un fichier nommé index.pug :

 mkdir -p pug-examples / html
exemples de cd
touchez index.pug

Remarque: la commande touch est spécifique à Linux / macOS. Les utilisateurs de Windows feraient écho.> Index.pug pour obtenir le même résultat.

Pour que cela fonctionne, nous allons écrire notre code Pug dans index. pug et demandez au pug-cli de regarder ce fichier pour connaître les modifications. Lorsqu'il en détecte un, il récupère le contenu de index.pug et l'affiche au format HTML dans le répertoire html .

Pour lancer ceci, ouvrez un terminal dans le répertoire . répertoire pug-examples et entrez ceci:

 pug -w. -o ./html -P

Vous devriez voir quelque chose comme ce qui suit:

 regardant index.pug
rendu /home/jim/Desktop/pug-examples/html/index.html

Remarque: dans la commande ci-dessus, l'option -w indique watch, le point indique à Pug de tout regarder dans le répertoire actuel, -o ./html indique à Pug de générer son code HTML dans le répertoire html et l'option -P ce qui rend le résultat plus esthétique.

Créons maintenant la page à partir de la capture d'écran ci-dessus (celle qui se plaint sur le manque de coloration syntaxique). Entrez ce qui suit dans index.pug :

 doctype html
html (lang = 'en')
 tête
   titre Bonjour le monde!
 corps
   h1 Bonjour le monde!
   marque de commerce
     p roches roquet!

Save pug.index puis inspectez le contenu de ./ html / index.html . Vous devriez voir ce qui suit:



  
     Bonjour, monde! 
  
  
    

Bonjour, monde!

Le rocher carlin !!

    
  %MINIFYHTML21192694b3b528d21d67f71a02f8ed7a14%

Pas mal, hein? La CLI Pug a pris notre fichier Pug et l'a rendu au format HTML standard.

Cet exemple permet de mettre en évidence quelques points importants concernant Pug. Tout d'abord, il s'agit de sensible aux espaces ce qui signifie que Pug utilise l'indentation pour déterminer quelles balises sont imbriquées les unes dans les autres. Par exemple:

 div.remark
  p roches roches !!

Le code ci-dessus produit ceci:

Le rocher du rocher !!

Maintenant, prenons ce code:

 div.remark
p roches roches !!

Ceci produit:

Un rocher de rocher !!

Le niveau d’indentation utilisé n’importe pas vraiment (vous pouvez même utiliser des tabulations si nécessaire), mais il est vivement recommandé de conserver un niveau d’indentation constant. Dans cet article, je vais utiliser deux espaces.

Deuxièmement, Pug n’a pas de balises de fermeture . Cela vous évitera évidemment quelques frappes au clavier et donnera à Pug une syntaxe propre et facile à lire.

Maintenant que nous avons quelques notions de base sur Pug, examinons rapidement sa syntaxe. Si cela vous semble déroutant ou si vous souhaitez approfondir, assurez-vous de consulter l'excellente documentation du projet .

DOCTYPE

Vous pouvez utiliser Pug pour générer un certain nombre de déclarations de type de document.

Par exemple, le doctype html compilera le le doctype standard au format HTML5, alors que le doctype strict nous le donnera . Pug fera de son mieux pour que sa sortie soit valide pour le type de document.

Balises

Comme indiqué, Pug n’a pas de balises de fermeture et repose sur l’indentation pour l’imbrication. Cela peut prendre un peu de temps pour s'y habituer, mais une fois que vous le faites, cela crée un code propre et lisible. À titre d'exemple:

 nav
  navbar-default div
    h1 Mon site web!
  ul
    li
      une maison
    li
      a Page 1
    li
      a Page 2
  contribution

Le code ci-dessus compile ceci:


Notez que Pug est suffisamment intelligent pour fermer les étiquettes à fermeture automatique (telles que l'élément ) pour nous.

Classes, ID et attributs

Les classes et les ID sont exprimés à l'aide d'un . className et Notation #IDname . Par exemple:

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

Pug nous offre également un raccourci pratique. Si aucune balise n'est spécifiée, cela suppose un élément

:

 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:



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 = '%MINIFYHTML21192694b3b528d21d67f71a02f8ed7a15%"

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:

 Bonjour. , Monde!

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:

 Hello, World! from Pug

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:

 Le répertoire du personnel

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 .



Source link