En tant que concepteurs de sites Web ou développeurs, nous devons probablement tous écrire notre juste part de HTML. Et bien que ce ne soit pas la tache la plus difficile, cela peut souvent être un peu ennuyeux ou répétitif. C'est là que le préprocesseur PUG HTML entre en jeu.
HTML est également statique, ce qui signifie que si vous souhaitez afficher des données dynamiques (récupérées à partir d'une API, par exemple), vous vous retrouvez invariablement avec un méli-mélo de piq?res HTML à l'intérieur de JavaScript. Cela peut être un cauchemar pour déboguer et maintenir. PUG est un moteur de modèle pour le n?ud et pour le navigateur. Il se compile en HTML et possède une syntaxe simplifiée, ce qui peut vous rendre plus productif et votre code plus lisible. PUG facilite l'écriture de HTML réutilisable, ainsi que de rendre les données tirées d'une base de données ou d'une API.
Dans ce guide, je vais montrer comment se mettre en marche avec PUG. Nous allons commencer par l'installer à partir de NPM, passer en revue sa syntaxe de base, puis examiner plusieurs exemples d'utilisation de JavaScript dans PUG. Enfin, nous explorerons quelques fonctionnalités les plus avancées de PUG en construisant un simple projet de n?ud / express qui utilise PUG comme moteur de modèle.
Les plats clés
- PUG, auparavant connu sous le nom de Jade, est un moteur de modèle qui compile en HTML et est utile pour écrire un code plus propre et plus lisible, en particulier lorsqu'il s'agit de contenu dynamique.
- Il simplifie l'intégration des données dynamiques dans le HTML, ce qui en fait un excellent choix pour les applications basées sur les données, bien qu'elle ne soit pas nécessaire pour les petits sites statiques ou le contenu dynamique minimal.
- L'installation consiste à configurer le n?ud, le NPM et le package PUG-CLI, avec une syntaxe mettant en évidence dans votre éditeur recommandé pour la facilité de développement.
- PUG utilise une syntaxe simplifiée sans balises de cl?ture et repose sur l'indentation pour structurer les documents HTML, ce qui peut réduire considérablement la quantité de code écrit.
- Il prend en charge l'intégration JavaScript pour les modèles dynamiques, permettant des variables, des itérations et des conditionnels directement dans les fichiers PUG.
- Le tutoriel se termine par une démonstration pratique utilisant PUG dans un projet de n?ud / express pour créer un répertoire du personnel, présentant des fonctionnalités avancées comme l'héritage du modèle et des mixins pour le code réutilisable.
à quoi sert le carlin?
Avant de commencer à regarder PUG, prenons une seconde pour comprendre les concepts impliqués.
Un moteur de modèle est un programme qui est responsable de la compilation d'un modèle (qui peut être écrit en utilisant l'une des plusieurs langues) en HTML. Le moteur de modèle recevra normalement des données d'une source externe, qu'elle injectera dans le modèle qu'il compilait. Ceci est illustré par le diagramme suivant.
Crédit: DrefTyMac, TempengWeb016, CC BY-SA 3.0
Cette approche vous permet de réutiliser des éléments de page Web statiques, tout en définissant des éléments dynamiques en fonction de vos données. Il facilite également une séparation des préoccupations, en gardant votre logique d'application isolée de votre logique d'affichage.
Vous êtes plus susceptible de bénéficier d'un moteur de modèle si votre site ou votre application Web est axé sur les données - comme un répertoire du personnel pour administrer des employés, une boutique en ligne qui répertorie divers produits à acheter, ou un site dynamique fonctionnalité de recherche.
Vous n'aurez pas besoin d'un moteur de modèle si vous récupérez une petite quantité de données d'une API (auquel cas vous pouvez 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 convient également de noter que Pug s'appelait Jade jusqu'à ce qu'il soit obligé de changer son nom en raison d'une réclamation de marque en 2015. Le changement de nom est entré en vigueur avec la version 2.0.
Il y a encore beaucoup de matériel lié à Jade disponible en ligne. Et bien que certains d'entre eux soient probablement encore assez valables, le fait que le changement de nom co?ncidait avec une version majeure de bosse signifie que la syntaxe de PUG a plusieurs différences, dépréciations et éliminations par rapport à son prédécesseur. Ceux-ci sont documentés ici.
Si vous souhaitez en savoir plus, vous pouvez lire l'annonce du changement de nom d'origine dans ce numéro GitHub. Sinon, assurez-vous simplement d'ajouter le mot ?modèle? à vos recherches Google liées à la carlin pour éviter que les résultats soient pleins de caca.
Installation de carlin
Avant de pouvoir écrire du carlin, nous devrons installer n?ud, npm (qui est livré avec un n?ud) et le package PUG-CLI.
Il existe quelques options pour installer le n?ud / npm. Rendez-vous sur la page d'accueil du projet et téléchargez les binaires corrects pour votre système, ou utilisez un gestionnaire de version tel que NVM. Je recommanderais d'utiliser un gestionnaire de version dans la mesure du possible, car cela vous permettra d'installer différentes versions de n?uds et de basculer entre eux à volonté. Il annulera également un tas d'erreurs d'autorisations potentielles.
Vous pouvez consulter notre tutoriel ?Installation de plusieurs versions de Node.js à l'aide de NVM? pour un guide plus approfondi.
Une fois que le n?ud et le npm sont installés sur votre système, vous pouvez installer le package PUG-CLI comme SO:
<span>npm i -g pug-cli </span>
Vous pouvez vérifier que le processus d'installation est correctement exécuté en tapant PUG - Version dans un terminal. Cela publiera la version de PUG et la version de la CLI que vous avez installée.
Au moment de la rédaction, c'était comme suit:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Syntaxe mise en évidence dans votre éditeur
Si votre éditeur n'offre pas de mise en évidence de syntaxe pour PUG, ce serait une bonne idée de chercher une extension pour ajouter cette fonctionnalité.
J'utilise actuellement SUBLIME Text 3 et, hors de la bo?te, c'est à quoi ressemble un fichier .pug:
Pour y remédier, on peut installer le package Sublime PUG:
La mise en évidence de la syntaxe rendra beaucoup plus facile de travailler avec les fichiers de carlin, en particulier ceux de toute longueur.
Essayez PUG HTML sans installer
Si vous souhaitez suivre les exemples plus simples de ce tutoriel, vous pouvez également les exécuter dans divers terrains de jeux de code en ligne.
Codepen, par exemple, a la prise en charge de PUG cuite à la cuisson. Créez simplement un nouveau stylo, puis sélectionnez Paramètres > html et choisissez PUG comme préprocesseur. Cela vous permettra d'entrer le code de pug dans le volet HTML et de voir le résultat appara?tre en temps réel.
En tant que bonus supplémentaire, vous pouvez cliquer sur la flèche vers le bas dans le volet HTML et sélectionner Afficher Html compilé compilé pour voir le balisage que PUG a généré.
PUG HTML Syntaxe de base
Maintenant que nous avons installé PUG, essayons-le. Créez un nouveau répertoire nommé PUG-Examples et changez-y. Créez ensuite un autre répertoire appelé HTML et un fichier appelé index.pug:
<span>npm i -g pug-cli </span>
Remarque: La commande tactile est spécifique à Linux / MacOS. Les utilisateurs de Windows feraient en écho> index.pug pour réaliser la même chose.
La fa?on dont cela va fonctionner est que nous rédigerons notre code de carburant dans index.pug et que le pug-Cli regarde ce fichier pour des modifications. Lorsqu'il en détecte, il prendra le contenu de l'index.pug et le rendra comme HTML dans le répertoire HTML.
Pour lancer ceci, ouvrez un terminal dans le répertoire de PUG-Examples et entrez ceci:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Vous devriez voir quelque chose comme les suivants:
<span>mkdir -p pug-examples/html </span><span>cd pug-examples </span><span>touch index.pug </span>
Note: in the above command, the -w option stands for watch, the dot tells Pug to watch everything in the current directory, -o ./html tells Pug to output its HTML in the html directory and the -P option pattetifie la sortie.
Créons maintenant la page à partir de la capture d'écran ci-dessus (celle se plaignant du manque de mise en évidence de syntaxe). Entrez ce qui suit dans index.pug:
pug <span>-w . -o ./html -P </span>
Enregistrez PUG.index puis inspectez le contenu de ./html/index.html. Vous devriez voir ce qui suit:
watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.html
pas mal, hein? Le PUG CLI a pris notre fichier PUG et l'a rendu comme HTML régulier
Cet exemple sert à mettre en évidence quelques points importants sur PUG. Premièrement, il est sensible aux espaces, ce qui signifie que PUG utilise l'indentation pour déterminer les balises imbriquées les unes dans les autres. Par exemple:
<span>doctype html </span><span>html<span><span>(lang=<span>'en'</span>)</span></span> </span> <span>head </span> <span>title Hello, World! </span> <span>body </span> <span>h1 Hello, World! </span> <span>div<span>.remark</span> </span> <span>p Pug rocks! </span>
Le code ci-dessus produit ceci:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span> </span> <span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
prenez maintenant ce code:
<span>div<span>.remark</span> </span> <span>p Pug rocks!! </span>
Cela produit ce qui suit:
<span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span><span><span><span></div</span>></span> </span>
Cela n'a pas vraiment d'importance quel niveau d'indentation que vous utilisez (vous pouvez même utiliser des onglets si vous le devez), mais il est fortement recommandé de garder le niveau d'indentation cohérent. Dans cet article, j'utiliserai deux espaces.
Deuxièmement, PUG n'a pas de balises de cl?ture. Cela vous fera évidemment vous éviter quelques coups de touche et offrira à Pug une syntaxe propre et facile à lire.
Maintenant que nous avons une poignée sur un carlin de base, passons rapidement en revue sa syntaxe. Si tout cela semble déroutant, ou si vous souhaitez aller plus en profondeur, 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 documents.
Par exemple, Doctype HTML compilera à , le standard HTML5 doctype, tandis que Doctype Strict nous donnera . PUG fera de son mieux pour s'assurer que sa sortie est valable pour le type de document.
Tags
Comme mentionné, PUG n'a pas de balises de cl?ture et s'appuie sur l'indentation pour la nidification. Cela peut prendre une petite quantité de s'y habituer, mais une fois que vous le faites, cela permet un code propre et lisible. à titre d'exemple:
<span>npm i -g pug-cli </span>
Le code ci-dessus compile à ceci:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Notez que PUG est suffisamment intelligent pour fermer toutes les balises d'auto-fermeture (comme l'élément
Classes, ID et attributs
Les classes et les ID sont exprimés en utilisant une notation .classname et #idname. Par exemple:
<span>mkdir -p pug-examples/html </span><span>cd pug-examples </span><span>touch index.pug </span>
PUG nous offre également un raccourci pratique. Si aucune balise n'est spécifiée, il supposera un élément
pug <span>-w . -o ./html -P </span>
ces deux compiles à:
watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.html
Les attributs sont ajoutés à l'aide de supports:
<span>doctype html </span><span>html<span><span>(lang=<span>'en'</span>)</span></span> </span> <span>head </span> <span>title Hello, World! </span> <span>body </span> <span>h1 Hello, World! </span> <span>div<span>.remark</span> </span> <span>p Pug rocks! </span>
Cela se traduit par ce qui suit:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span> </span> <span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Il y a beaucoup plus à dire sur les attributs. Par exemple, vous pouvez utiliser JavaScript pour inclure des variables dans vos attributs, ou attribuer un tableau de valeurs à un attribut. Nous allons utiliser JavaScript dans PUG dans la section suivante.
Blocs de texte brut et de texte
PUG fournit diverses méthodes pour ajouter du texte brut directement dans le HTML rendu.
Nous avons déjà vu comment ajouter du texte brut en ligne:
<span>div<span>.remark</span> </span> <span>p Pug rocks!! </span>
Une autre fa?on est de préfixer une ligne avec un caractère de tuyau (|):
<span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span><span><span><span></div</span>></span> </span>
Cela nous donne ce qui suit:
<span>div<span>.remark</span> </span><span>p Pug rocks!! </span>
Lorsque vous traitez de grands blocs de texte, vous pouvez simplement annoncer un point. Juste après le nom de la balise, ou après la parenthèse de cl?ture, si la balise a des attributs:
<span><span><span><div</span> class<span>="remark"</span>></span><span><span></div</span>></span> </span><span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span>
Cela se traduit:
<span>nav </span> <span>navbar-default div </span> <span>h1 My Website! </span> <span>ul </span> <span>li </span> <span>a Home </span> <span>li </span> <span>a Page 1 </span> <span>li </span> <span>a Page 2 </span> <span>input </span>
Commentaires
Enfin, des commentaires peuvent être ajoutés comme ainsi:
<span><span><span><nav</span>></span> </span> <span><span><span><div</span>></span> </span> <span><span><span><h1</span>></span>My Website!<span><span></h1</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span><ul</span>></span> </span> <span><span><span><li</span>></span><span><span><a</span>></span>Home<span><span></a</span>></span><span><span></li</span>></span> </span> <span><span><span><li</span>></span><span><span><a</span>></span>Page 1<span><span></a</span>></span><span><span></li</span>></span> </span> <span><span><span><li</span>></span><span><span><a</span>></span>Page 2<span><span></a</span>></span><span><span></li</span>></span> </span> <span><span><span></ul</span>></span> </span> <span><span><span><input</span>/></span> </span><span><span><span></nav</span>></span> </span>
Ce commentaire sera ajouté au HTML rendu:
<span>nav<span>#navbar-default</span> </span> <span>div<span>.container-fluid</span> </span> <span>h1<span>.navbar-header</span> My Website! </span>
Vous commencez un commentaire comme tel:
<span>nav<span>#navbar-default</span> </span> <span><span>.container-fluid</span> </span> <span>h1<span>.navbar-header</span> My Website! </span>
Lorsque vous faites cela, le commentaire restera dans le fichier PUG mais n'appara?tra pas dans le HTML.
Les commentaires doivent appara?tre sur leur propre ligne. Ici, le commentaire sera traité comme un texte brut:
<span><span><span><nav</span> id<span>="navbar-default"</span>></span> </span> <span><span><span><div</span> class<span>="container-fluid"</span>></span> </span> <span><span><span><h1</span> class<span>="navbar-header"</span>></span>My Website!<span><span></h1</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></nav</span>></span> </span>
Les commentaires multilines sont également possibles:
<span>npm i -g pug-cli </span>
Démo de syntaxe de base
Ci-dessous, vous pouvez trouver une démo d'une disposition de style bootstrap qui démontre les techniques dont nous avons discuté jusqu'à présent:
Voir le stylo
Demo de base de base de base par SitePoint (@SitePoint)
sur Codepen.
en utilisant JavaScript dans les modèles HTML 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, d'itérer sur les tableaux et les objets, rend conditionnellement le HTML, et bien plus encore.
Code tamponné vs non frappé
Il s'agit d'une distinction importante à conna?tre avant d'utiliser JavaScript dans Pug.
Le code non frappé commence par un moins (-). Il n'ajoute rien directement à la sortie, mais ses valeurs peuvent être utilisées à partir de l'intérieur:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Le code tamponné, en revanche, commence par un égal (=). Il évalue une expression JavaScript et produit le résultat.
<span>mkdir -p pug-examples/html </span><span>cd pug-examples </span><span>touch index.pug </span>
Le code ci-dessus compile à ceci:
pug <span>-w . -o ./html -P </span>
Pour des raisons de sécurité, le code tamponné est échappé à HTML.
watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.html
Le code ci-dessus compile à ceci:
<span>doctype html </span><span>html<span><span>(lang=<span>'en'</span>)</span></span> </span> <span>head </span> <span>title Hello, World! </span> <span>body </span> <span>h1 Hello, World! </span> <span>div<span>.remark</span> </span> <span>p Pug rocks! </span>
Interpolation
L'interpolation de cha?ne est le processus de remplacement d'un ou plusieurs espaces réservés dans un modèle par une valeur correspondante. Comme nous venons de le voir, Buffered Input offre une méthode pour le faire. Un autre utilise # {}. Ici, PUG évaluera tout code entre les supports bouclés, l'échappera et le rendra dans le modèle.
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span> </span> <span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Le code ci-dessus compile à ceci:
<span>div<span>.remark</span> </span> <span>p Pug rocks!! </span>
Comme les supports bouclés peuvent contenir n'importe quelle expression JavaScript valide, cela ouvre un tas de possibilités:
<span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span><span><span><span></div</span>></span> </span>
Cela compile à:
<span>div<span>.remark</span> </span><span>p Pug rocks!! </span>
Il est également possible de rendre des valeurs non réessé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 attribuer la valeur maintenue dans une variable à l'attribut d'un élément, vous pouvez omettre le # {}. Par exemple: img (alt = name).
itération
Le mot-clé de PUG facilite l'itération des tableaux:
<span><span><span><div</span> class<span>="remark"</span>></span><span><span></div</span>></span> </span><span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span>
Cela se traduit par ce qui suit:
<span>nav </span> <span>navbar-default div </span> <span>h1 My Website! </span> <span>ul </span> <span>li </span> <span>a Home </span> <span>li </span> <span>a Page 1 </span> <span>li </span> <span>a Page 2 </span> <span>input </span>
Vous pouvez également l'utiliser pour itérer les touches dans un objet:
<span><span><span><nav</span>></span> </span> <span><span><span><div</span>></span> </span> <span><span><span><h1</span>></span>My Website!<span><span></h1</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span><ul</span>></span> </span> <span><span><span><li</span>></span><span><span><a</span>></span>Home<span><span></a</span>></span><span><span></li</span>></span> </span> <span><span><span><li</span>></span><span><span><a</span>></span>Page 1<span><span></a</span>></span><span><span></li</span>></span> </span> <span><span><span><li</span>></span><span><span><a</span>></span>Page 2<span><span></a</span>></span><span><span></li</span>></span> </span> <span><span><span></ul</span>></span> </span> <span><span><span><input</span>/></span> </span><span><span><span></nav</span>></span> </span>
Cela se traduit:
<span>nav<span>#navbar-default</span> </span> <span>div<span>.container-fluid</span> </span> <span>h1<span>.navbar-header</span> My Website! </span>
PUG vous permet également de fournir un bloc Else qui sera exécuté si le tableau ou l'objet est vide:
<span>nav<span>#navbar-default</span> </span> <span><span>.container-fluid</span> </span> <span>h1<span>.navbar-header</span> My Website! </span>
Enfin, notez que vous pouvez utiliser comme alias pour chacun.
conditionnels
Les conditions offrent une fa?on très pratique de rendre différents HTML en fonction du résultat d'une expression JavaScript:
<span>npm i -g pug-cli </span>
Dans cet exemple, nous vérifions si l'objet employé a une propriété extn, puis en sortant la valeur de cette propriété (s'il existe), soit le texte ?N / A?.
JavaScript dans la démo de pug
Ci-dessous, vous pouvez trouver une démo de certaines des techniques dont nous avons discuté 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 devons faire pour ajouter d'autres employés est d'ajouter d'autres objets à notre tableau des employés SitePoint.
Voir le stylo
javascript dans la démo de pug par SitePoint (@SitePoint)
sur codepen.
un exemple pratique
Maintenant que nous avons une idée raisonnable de la syntaxe de PUG et de la fa?on dont cela fonctionne, terminons en construisant une petite application express.js pour démontrer quelques fonctionnalités les plus avancées de PUG.
Le code de cet exemple est disponible sur github.
Remarque: Si vous n'avez pas utilisé Express auparavant, pas de soucis. Il s'agit d'un framework Web pour Node.js qui fournit un ensemble robuste de fonctionnalités pour créer des applications Web. Si vous souhaitez en savoir plus, consultez notre démarrage avec le tutoriel express.
Tout d'abord, créons un nouveau projet et installez Express:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Ensuite, créez un fichier app.js dans le dossier PUG-Express:
<span>mkdir -p pug-examples/html </span><span>cd pug-examples </span><span>touch index.pug </span>
puis ajoutez ce qui suit:
pug <span>-w . -o ./html -P </span>
Ici, nous déclarons un itinéraire (/), qui répondra à une demande de GET avec le texte "Hello, World!" Nous pouvons tester cela dans nos navigateurs, en démarrant le serveur avec Node app.js, puis en visitant http: // localhost: 3000.
Si vous voyez quelque chose comme ?a, alors les choses se sont déroulées comme prévu:
Ajout de certaines données
Cette application express ne fera rien de trop spectaculaire. Nous allons construire un répertoire du personnel simple qui récupère une liste d'employés à partir d'une base de données et les affiche dans un tableau. Pour que cela se produise, nous aurons besoin d'une base de données et de certaines données.
Cependant… l'installation et la configuration d'une base de données est un peu lourde pour ce petit exemple, donc je vais utiliser un package appelé JSON-Server. Cela nous permettra de créer un fichier db.json qu'il va transformer en une API REST contre laquelle nous pouvons effectuer des opérations CRUD.
Installons-le:
watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.html
Créez maintenant le fichier db.json susmentionné dans la racine du projet:
<span>doctype html </span><span>html<span><span>(lang=<span>'en'</span>)</span></span> </span> <span>head </span> <span>title Hello, World! </span> <span>body </span> <span>h1 Hello, World! </span> <span>div<span>.remark</span> </span> <span>p Pug rocks! </span>
Enfin, nous avons besoin de JSON pour le remplir. Nous utiliserons le générateur d'utilisateurs aléatoires, qui est une API libre et open source pour générer des données utilisateur aléatoires. Vingt-cinq personnes devraient faire pour notre exemple, alors rendez-vous sur https://randomuser.me/api/?results=25 et copiez les résultats dans db.json.
Enfin, démarrez le serveur dans une deuxième fenêtre de terminal avec:
<span>npm i -g pug-cli </span>
Cela entra?nera le démarrage de JSON-Server sur le port 3001 et regardera notre fichier de base de données pour les modifications.
Configuration de PUG comme moteur de modèle
Express a un excellent support pour l'utilisation de carlin, donc très peu de configuration est nécessaire.
Tout d'abord, ajoutons Pug à notre projet:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Ensuite, dans app.js, nous devons dire à Express d'utiliser PUG:
<span>mkdir -p pug-examples/html </span><span>cd pug-examples </span><span>touch index.pug </span>
Ensuite, créez un répertoire de vues, puis dans le répertoire des vues, ajoutez un fichier index.pug:
pug <span>-w . -o ./html -P </span>
Ajoutez du contenu à ce fichier:
watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.html
puis modifiez app.js comme SO:
<span>doctype html </span><span>html<span><span>(lang=<span>'en'</span>)</span></span> </span> <span>head </span> <span>title Hello, World! </span> <span>body </span> <span>h1 Hello, World! </span> <span>div<span>.remark</span> </span> <span>p Pug rocks! </span>
Enfin, redémarrez le serveur de n?uds, puis actualisez votre navigateur et vous devriez voir ceci:
Et c'est tout. Vous êtes prêt à partir.
Construire le répertoire du personnel
La prochaine tache de la liste consiste à remettre certaines données au modèle de carlin à afficher. Pour ce faire, nous aurons besoin d'une méthode de récupération des données du serveur JSON. Malheureusement, l'API Fetch n'est pas implémentée dans Node, alors utilisons Axios, le client HTTP populaire à la place:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span> </span> <span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
puis modifiez app.js comme SO:
<span>div<span>.remark</span> </span> <span>p Pug rocks!! </span>
Il se passe quelques choses ici. Nous avons transformé notre gestionnaire d'itinéraire en une fonction asynchrone, afin que nous puissions attendre que les données des employés soient renvoyées de JSON-Server avant de la remettre au modèle.
Ensuite, nous rendons l'index comme auparavant, mais cette fois, nous le transmettons un objet littéral contenant toutes nos données.
Remarque: vous devez redémarrer le serveur de n?uds chaque fois que vous apportez une modification à app.js. Si cela commence à devenir ennuyeux, consultez Nodemon, qui le fera pour vous.
maintenant pour le carlin. Changez index.pug pour ressembler à ce qui suit:
<span><span><span><div</span> class<span>="remark"</span>></span> </span> <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span><span><span><span></div</span>></span> </span>
Il n'y a rien de surprenant ici. Nous utilisons SEMANTI-UI-CSS pour un style, ainsi que quelques styles à notre propre.
Ensuite, dans le corps de la table, nous itrions sur la gamme d'employés que nous passons de App.js et étendons leurs coordonnées à un tableau.
au bas de la page se trouve un pied de page avec notre réclamation en matière de droit d'auteur et l'année en cours.
Si vous actualisez la page maintenant, vous devriez voir ceci:
Héritage du modèle
C'est déjà assez agréable, mais pour compléter les choses, je vais montrer comment structurer nos vues pour offrir une flexibilité maximale à mesure que le projet se développe.
Commen?ons par créer un fichier Layout.pug dans le répertoire des vues:
<span>div<span>.remark</span> </span><span>p Pug rocks!! </span>
puis ajoutez ce qui suit:
<span><span><span><div</span> class<span>="remark"</span>></span><span><span></div</span>></span> </span><span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span> </span>
Ce que nous avons fait ici, c'est créer un fichier de mise en page que ce qui peut être étendu par d'autres fichiers PUG de notre projet. Lorsque vous avez un grand nombre de fichiers PUG, cela enregistre une quantité considérable de code.
La fa?on dont cela fonctionne est que nous avons défini deux blocs de contenu (contenu de bloc et pied de page de bloc) qu'un modèle enfant peut remplacer. Dans le cas du bloc de pied de page, nous avons également défini un contenu de secours qui sera rendu si le modèle enfant ne redéfinit pas ce bloc.
Maintenant, nous pouvons dire que notre fichier index.pug hériter de notre disposition:
<span>npm i -g pug-cli </span>
Le résultat est le même qu'auparavant, mais le code a maintenant une meilleure structure.
mixins
Les mixins vous permettent de créer des blocs de carlin réutilisables. Nous pouvons l'utiliser pour extraire notre ligne de table dans son propre fichier.
Créez un dossier appelé Mixins dans le dossier des vues et dans ce dossier, créez un fichier nommé _TableRow.pug:
$ pug <span>--version </span>pug version: <span>2.0.3 </span>pug-cli version: <span>1.0.0-alpha6 </span>
Les mélanges sont déclarés en utilisant le mot-clé de mixin. Ils sont compilés aux fonctions et peuvent prendre des arguments. Ajoutez ce qui suit aux vues / mixins / _TableRow.pug:
<span>mkdir -p pug-examples/html </span><span>cd pug-examples </span><span>touch index.pug </span>
alter maintenant index.pug comme:
pug <span>-w . -o ./html -P </span>
Comme vous pouvez le voir, nous importons le mixin en haut du fichier. Nous l'appelons ensuite en préfixant son nom avec un symbole plus et en le faisant notre objet employé pour afficher.
C'est exagéré pour notre petite application, mais il démontre une caractéristique très utile de PUG qui nous permet d'écrire du code réutilisable.
Conclusion
Bravo si vous êtes arrivé jusqu'ici! Nous avons couvert beaucoup de terrain dans ce tutoriel. Nous avons envisagé d'installer PUG, sa syntaxe de base, sa prise en charge JavaScript et ses constructions pour l'itération et le rendu conditionnel. Enfin, nous avons construit une application Express entièrement fonctionnelle qui tire les données d'une source distante et les alimente à un modèle de carlin.
Il y a encore beaucoup plus que PUG peut faire. Je vous encourage à consulter son excellent 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é porté vers plusieurs autres langues.
Si vous cherchez un défi, pourquoi ne pas essayer d'étendre le répertoire des employés pour ajouter la fonctionnalité CRUD manquante. Et si vous êtes coincé avec la syntaxe, n'oubliez pas que l'aide est toujours à portée de main.
FAQ sur le modèle de modèle HTML PUG PRéSCORDE
Voici quelques questions fréquemment posées sur Pug.
Qu'est-ce que le préprocesseur de modèle HTML PUG?
PUG, anciennement connu sous le nom de Jade, est un préprocesseur de modèle HTML haute performance. Il simplifie et améliore le processus d'écriture de HTML en fournissant une syntaxe plus concise et expressive.
Pourquoi utiliser PUG au lieu de HTML?
PUG offre une syntaxe plus compacte et lisible par rapport au HTML traditionnel. Il permet une structuration basée sur l'indentation, ce qui conduit souvent à un code plus propre et plus organisé. PUG prend également en charge les variables, les mixins et comprend, la création de modèles plus efficace.
à quoi sert HTML PUG utilisé?
La carlin est utilisée pour générer un balisage HTML de manière plus concise, organisée et efficace. PUG est souvent utilisé dans des projets de développement Web pour créer des modèles HTML qui sont plus faciles à lire, à écrire et à maintenir.
Y a-t-il des limitations ou des inconvénients à l'utilisation de PUG?
Bien que PUG offre de nombreux avantages, sa principale limitation est la courbe d'apprentissage si vous êtes habitué au HTML traditionnel. De plus, travailler dans des équipes où tout le monde n'est pas familier avec PUG peut nécessiter un certain ajustement.
Puis-je utiliser PUG avec des frameworks frontaux comme React ou Angular?
Bien que PUG soit principalement con?u pour générer du HTML, il peut être utilisé en conjonction avec divers cadres frontaux comme React, Angular ou Vue.js. Cependant, l'utilisation de PUG avec ces frameworks peut nécessiter une configuration et des outils supplémentaires.
Puis-je mélanger HTML régulier avec PUG dans le même projet?
Oui, vous pouvez facilement intégrer des modèles de carburant aux c?tés de fichiers HTML réguliers dans le même projet. Ceci est utile lors de la transition d'un format à l'autre ou lors de la collaboration avec les développeurs en utilisant différentes approches.
Comment installer et configurer PUG?
Pour utiliser PUG, vous devez installer le package Node.js nommé ?PUG?. Vous pouvez l'installer globalement ou localement dans votre projet. Après l'installation, vous pouvez commencer à créer des modèles de pug avec l'extension de fichier .pug.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Tutoriel CSS pour créer des filateurs et des animations de chargement
Jul 07, 2025 am 12:07 AM
Il existe trois fa?ons de créer un rotateur de chargement CSS: 1. Utilisez le rotateur de base des frontières pour obtenir une animation simple via HTML et CSS; 2. Utilisez un rotateur personnalisé de plusieurs points pour atteindre l'effet de saut à travers différents temps de retard; 3. Ajoutez un rotateur dans le bouton et basculez les classes via JavaScript pour afficher l'état de chargement. Chaque approche souligne l'importance des détails de conception tels que la couleur, la taille, l'accessibilité et l'optimisation des performances pour améliorer l'expérience utilisateur.
ATTENTION DES PROBLèMES ET PRéFIXES DE COMPATIBILITé DE BROWSER CSS
Jul 07, 2025 am 01:44 AM
Pour faire face à la compatibilité du navigateur CSS et aux problèmes de préfixe, vous devez comprendre les différences de prise en charge du navigateur et utiliser raisonnablement les préfixes des fournisseurs. 1. Comprendre les problèmes communs tels que Flexbox et le support de la grille, Position: Sticky Invalid et les performances d'animation sont différentes; 2. Vérifier l'état du support de la fonction de confirmation de Caniuse; 3. Utilisez correctement -webkit-, -moz-, -ms-, -o- et autres préfixes du fabricant; 4. Il est recommandé d'utiliser AutopRefixer pour ajouter automatiquement les préfixes; 5. Installez PostCSS et configurez le navigateur pour spécifier le navigateur cible; 6. Gérer automatiquement la compatibilité pendant la construction; 7. Les fonctionnalités de détection modernizr peuvent être utilisées pour les anciens projets; 8. Pas besoin de poursuivre la cohérence de tous les navigateurs,
Quelle est la différence entre l'affichage: en ligne, affichage: bloc et affichage: bloc en ligne?
Jul 11, 2025 am 03:25 AM
HEMAINDIFFERENCESBetweendisplay: Inline, Block, Andinline-BlockInhtml / CSSareLayoutBehavior, SpaceUsage et StylingControl.1.InlineElementsflowWithText, Don'tStartNewLines, Ignorewidth / Height, AndonlyApplyhorizontalPadding / Marges - IdealForninetLetetStyLinSing
Création de formes personnalisées avec CSS Clip Path
Jul 09, 2025 am 01:29 AM
Utilisez l'attribut Clip-Path de CSS pour recadrer des éléments en formes personnalisées, telles que les triangles, les encoches circulaires, les polygones, etc., sans compter sur des images ou des SVG. Ses avantages incluent: 1. Prend en charge une variété de formes de base telles que le cercle, l'ellipse, le polygone, etc.; 2. Ajustement réactif et adaptable aux terminaux mobiles; 3. Facile à l'animation, et peut être combiné avec le survol ou le javascript pour obtenir des effets dynamiques; 4. Il n'affecte pas le flux de disposition et ne culte que la zone d'affichage. Les usages communs sont tels que le chemin de clip circulaire: cercle (50pxatcenter) et trame de clip Triangle: polygone (50% 0%, 100 0%, 0 0%). Avis
Styling visité les liens différemment avec CSS
Jul 11, 2025 am 03:26 AM
La définition du style de liens que vous avez visité peut améliorer l'expérience utilisateur, en particulier dans les sites Web à forte intensité de contenu pour aider les utilisateurs à mieux naviguer. 1. Utilisez CSS: Pseudo-classe visité pour définir le style du lien visité, tels que les changements de couleur; 2. Notez que le navigateur permet uniquement la modification de certains attributs en raison des restrictions de confidentialité; 3. La sélection des couleurs doit être coordonnée avec le style global pour éviter la brutalité; 4. Le terminal mobile peut ne pas afficher cet effet et il est recommandé de le combiner avec d'autres invites visuelles telles que les logos auxiliaires ic?nes.
Comment créer des images réactives à l'aide de CSS?
Jul 15, 2025 am 01:10 AM
Pour créer des images réactives à l'aide de CSS, elle peut être principalement réalisée grace aux méthodes suivantes: 1. Utilisez la largeur maximale: 100% et hauteur: Auto pour permettre à l'image de s'adapter à la largeur du conteneur tout en maintenant la proportion; 2. Utilisez les attributs SRCSET et tailles de HTML pour charger intelligemment les sources d'image adaptées à différents écrans; 3. Utilisez l'objet-ajustement et la position d'objet pour contr?ler le recadrage d'images et l'affichage de la mise au point. Ensemble, ces méthodes garantissent que les images sont présentées clairement et magnifiquement sur différents appareils.
Démystifier les unités CSS: PX, EM, REM, VW, VH Comparaisons
Jul 08, 2025 am 02:16 AM
Le choix des unités CSS dépend des exigences de conception et des exigences réactives. 1.PX est utilisé pour la taille fixe, adaptée à un contr?le précis mais au manque d'élasticité; 2.EM est une unité relative, qui est facilement causée par l'influence de l'élément parent, tandis que REM est plus stable en fonction de l'élément racine et convient à la mise à l'échelle globale; 3.VW / VH est basé sur la taille de la fenêtre, adaptée à la conception réactive, mais l'attention doit être accordée aux performances sous des écrans extrêmes; 4. Lors du choix, il doit être déterminé en fonction de la question de savoir si les ajustements réactifs, les relations de hiérarchie d'éléments et la dépendance de la fenêtre. Une utilisation raisonnable peut améliorer la flexibilité et la maintenance de la disposition.
Quelles sont les incohérences courantes du navigateur CSS?
Jul 26, 2025 am 07:04 AM
Différents navigateurs ont des différences dans l'analyse CSS, ce qui entra?ne des effets d'affichage incohérents, y compris principalement la différence de style par défaut, la méthode de calcul du modèle de bo?te, le niveau de support Flexbox et la disposition de la grille et le comportement incohérent de certains attributs CSS. 1. Le traitement de style par défaut est incohérent. La solution consiste à utiliser cssreset ou normaliser.css pour unifier le style initial; 2. La méthode de calcul du modèle de bo?te de l'ancienne version de IE est différente. Il est recommandé d'utiliser la taille d'une bo?te: Border-Box de manière unifiée; 3. Flexbox et Grid fonctionnent différemment dans les cas de bord ou dans les anciennes versions. Plus de tests et utilisent Autoprefixer; 4. Certains comportements d'attribut CSS sont incohérents. Caniuse doit être consulté et rétrogradé.
