Un tutoriel de jade pour les débutants

assez soigné, non?

<span><span><span><div</span> class<span>="movie-card"</span> id<span>="oceans-11"</span>></span>
</span>  <span><span><span><h1</span> class<span>="movie-title"</span>></span>Ocean's 11<span><span></h1</span>></span>
</span>  <span><span><span><img</span> src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul</span> class<span>="genre-list"</span>></span>
</span>    <span><span><span><li</span>></span>Comedy<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Thriller<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

Affichez cet exemple sur Codepen

mais ça ne s'arrête pas ici. Jade fournit une sténographie spéciale pour les ID et les classes, simplifiant encore notre balisage en utilisant une notation familière:

div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster(src="/img/oceans-11.png")
  ul.genre-list
    li Comedy
    li Thriller

Affichez cet exemple sur Codepen

Comme vous pouvez le voir, Jade utilise la même syntaxe que celle que nous connaissons déjà lors de la rédaction de sélecteurs CSS, ce qui facilite encore plus les classes.

blocs de texte

Disons que vous avez une balise de paragraphe et que vous souhaitez y placer un grand bloc de texte. Jade traite le premier mot de chaque ligne comme une balise HTML - alors que faites-vous?

Vous avez peut-être remarqué une période innocente dans le premier exemple de code dans cet article. L'ajout d'une période (arrêt complet) après votre balise indique que tout ce qui est à l'intérieur de cette balise est du texte et Jade cesse de traiter le premier mot sur chaque ligne comme une balise HTML.

div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.

Affichez cet exemple sur Codepen

et juste pour ramener le point à la maison, si je devais supprimer la période après la balise P dans cet exemple, le HTML compilé traiterait le «je» dans le mot «Je suis» en tant que balise d'ouverture (dans ce cas, ce serait la balise ).

fonctionnalités puissantes

Maintenant que nous avons couvert les bases, jetons un coup d'œil à des fonctionnalités puissantes qui rendront votre balisage plus intelligent. Nous examinerons les fonctionnalités suivantes dans le reste de ce tutoriel:

• boucles
• javascript
• Interpolation
• mixins

en utilisant JavaScript dans Jade

Jade est implémenté avec JavaScript, il est donc super facile d'utiliser JavaScript dans Jade. Voici un exemple.

- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li Hello
    - }

que avons-nous fait ici ?! En démarrant une ligne avec un trait d'union, nous indiquons au compilateur Jade que nous voulons commencer à utiliser JavaScript et cela fonctionne simplement comme nous nous attendons. Voici ce que vous obtenez lorsque vous compilez le code de jade ci-dessus à HTML:

<span><span><span><div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

Affichez cet exemple sur Codepen

Nous utilisons un trait d'union lorsque le code n'ajoute pas directement la sortie. Si nous voulons utiliser JavaScript pour sortir quelque chose dans Jade, nous utilisons =. Ajustez le code ci-dessus pour afficher un numéro de série.

- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li= i + ". Hello"
    - }

et voilà, nous avons maintenant des numéros de série:

<span><span><span><div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>1. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>2. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>3. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>4. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>5. Hello<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

Affichez cet exemple sur Codepen

Bien sûr, dans ce cas, une liste ordonnée serait beaucoup plus appropriée, mais vous obtenez le point. Maintenant, si vous vous inquiétez pour les XS et les HTML, lisez les documents pour plus d'informations.

boucles

Jade fournit une excellente syntaxe en boucle afin que vous n'ayez pas besoin de recourir à JavaScript. Boucle sur un tableau:

- var droids = ["R2D2", "C3PO", "BB8"];
div
  h1 Famous Droids from Star Wars
  for name in droids
    div.card
      h2= name

et cela se compilera comme suit:

<span><span><span><div</span>></span>
</span>  <span><span><span><h1</span>></span>Famous Droids from Star Wars<span><span></h1</span>></span>
</span>  <span><span><span><div</span> class<span>="card"</span>></span>
</span>    <span><span><span><h2</span>></span>R2D2<span><span></h2</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="card"</span>></span>
</span>    <span><span><span><h2</span>></span>C3PO<span><span></h2</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="card"</span>></span>
</span>    <span><span><span><h2</span>></span>BB8<span><span></h2</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Affichez cet exemple sur Codepen

Vous pouvez itérer les objets et utiliser pendant les boucles également. Découvrez les documents pour en savoir plus.

Interpolation

Il peut devenir ennuyeux de mélanger JavaScript dans du texte comme ce p = "Salut," Profilename ". Comment vas-tu?". Jade a-t-il une solution élégante pour cela? Vous pariez.

<span><span><span><div</span> class<span>="movie-card"</span> id<span>="oceans-11"</span>></span>
</span>  <span><span><span><h1</span> class<span>="movie-title"</span>></span>Ocean's 11<span><span></h1</span>></span>
</span>  <span><span><span><img</span> src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul</span> class<span>="genre-list"</span>></span>
</span>    <span><span><span><li</span>></span>Comedy<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Thriller<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

Affichez cet exemple sur Codepen

n'est-ce pas bien?

mixins

Les mélanges sont comme des fonctions. Ils prennent des paramètres en entrée et donnent un balisage comme sortie. Les mixins sont définis à l'aide du mot-clé de mixin.

div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster(src="/img/oceans-11.png")
  ul.genre-list
    li Comedy
    li Thriller

Une fois le mélange défini, vous pouvez appeler le mixin avec la syntaxe.

div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.

qui sortira HTML comme ceci:

- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li Hello
    - }

Mettre tout cela ensemble

Amélions tout ce que nous avons appris jusqu'à présent. Disons que nous avons une belle gamme de films, avec chaque élément contenant le titre du film, le casting (un sous-tableau), la note, le genre, un lien vers la page IMDB et le chemin d'image de l'affiche du film. Le tableau ressemblera à ceci (espace blanc ajouté pour la lisibilité):

<span><span><span><div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

Nous avons 10 films et nous voulons construire de belles cartes de film pour chacune d'elles. Au départ, nous ne prévoyons pas d'utiliser le lien IMDB. Si un film est évalué au-dessus de 5, nous lui donnons un coup de pouce, sinon, nous lui donnons un coup de pouce. Nous utiliserons toutes les belles fonctionnalités de Jade pour écrire du code modulaire pour effectuer ce qui suit:

1. Créez un mixin pour une carte de cinéma
   
   • itérer dans la liste des acteurs et afficher les acteurs. Nous ferons de même avec les genres.
   • Vérifiez la note et décidez d'afficher un pouce vers le haut ou un coup de pouce.
2. itérer dans la liste des films et utiliser le mixin pour créer une carte par film.

Alors, créons d'abord le mixin.

- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li= i + ". Hello"
    - }

Il se passe beaucoup de choses là-haut, mais je suis sûr que cela semble familier - nous avons couvert tout cela dans ce tutoriel. Maintenant, nous avons juste besoin d'utiliser notre mixin dans une boucle:

<span><span><span><div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>1. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>2. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>3. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>4. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>5. Hello<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

c'est tout. Est-ce élégant ou quoi? Voici le code final.

- var droids = ["R2D2", "C3PO", "BB8"];
div
  h1 Famous Droids from Star Wars
  for name in droids
    div.card
      h2= name

Et voici le HTML compilé:

<span><span><span><div</span>></span>
</span>  <span><span><span><h1</span>></span>Famous Droids from Star Wars<span><span></h1</span>></span>
</span>  <span><span><span><div</span> class<span>="card"</span>></span>
</span>    <span><span><span><h2</span>></span>R2D2<span><span></h2</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="card"</span>></span>
</span>    <span><span><span><h2</span>></span>C3PO<span><span></h2</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="card"</span>></span>
</span>    <span><span><span><h2</span>></span>BB8<span><span></h2</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Mais attendez une minute. Et si nous voulons maintenant aller sur la page IMDB du film lorsque nous cliquons sur le titre d'un film? Nous pouvons ajouter une ligne: a (href = film.imdburl) au mixin.

- var profileName = "Danny Ocean";
div
  p Hi there, #{profileName}. How are you doing?

Affichez cet exemple sur Codepen

Conclusion

Nous sommes passés de ne rien savoir de Jade à la construction de belles cartes de film modulaires. Il y a beaucoup plus à Jade, mais j'ai sous-jacent des concepts pour garder les choses simples. J'espère donc que ce tutoriel a piqué votre curiosité pour en savoir plus.

Remarque importante: comme certains d'entre vous le savent peut-être déjà, Jade a été renommé PUG en raison d'une réclamation de marque logicielle. À l'avenir, les articles sur Jade utiliseront le nouveau nom «pug» ou «pugjs».

Questions fréquemment posées (FAQ) sur le tutoriel de jade pour les débutants

Qu'est-ce que Jade et pourquoi est-il important dans le développement Web?

Jade, également connu sous le nom de PUG, est un moteur de modèle haute performance fortement influencé par HAML et implémenté avec JavaScript pour node.js et navigateurs. Il fournit une syntaxe propre et élégante qui permet aux développeurs d'écrire des modèles HTML d'une manière beaucoup plus concise. Jade est important dans le développement Web car il réduit le temps passé à écrire du code HTML, ce qui rend le processus de développement plus efficace. Il prend également en charge le code dynamique, ce qui signifie que vous pouvez inclure des variables et des expressions qui sont évaluées tout en rendant le HTML.

Comment installer Jade?

Pour installer Jade, vous devez avoir un nœud. JS et NPM (Node Package Manager) installés sur votre ordinateur. Une fois que vous en avez, vous pouvez installer Jade globalement sur votre système en exécutant la commande NPM Installer Jade -g dans votre terminal ou votre invite de commande. Cela vous permettra d'utiliser Jade à partir de n'importe quel répertoire de votre ordinateur.

Comment convertir HTML en Jade?

La conversion de HTML en Jade peut être effectuée manuellement ou en utilisant des outils en ligne comme Html2jade.org . Pour le faire manuellement, vous devez comprendre la syntaxe de jade et comment il mappe à HTML. Par exemple, les balises HTML deviennent des éléments de jade, les attributs HTML deviennent des attributs de jade, etc. Les outils en ligne peuvent automatiser ce processus, mais il est toujours important de comprendre les règles de conversion sous-jacentes.

Quelles sont les principales différences entre le jade et le HTML?

Les principales différences entre Jade et HTML se trouvent dans leur résidence dans leur syntaxe. Jade utilise l'indentation pour représenter les éléments imbriqués et ne nécessite pas de balises de clôture, ce qui la rend plus concise que HTML. Cependant, le HTML est plus largement utilisé et compris, et certains développeurs trouvent ses balises de clôture explicites et le manque de règles d'indentation plus faciles à lire et à comprendre.

Comment utiliser les variables dans Jade?

Variables en jade peut être défini à l'aide de la syntaxe. Par exemple, - var title = 'home' définit une variable nommée titre avec la valeur «à domicile». Vous pouvez ensuite utiliser cette variable dans votre modèle de jade en le préfixant avec # {}. Par exemple, H1 = Title Rendu As

Home

dans HTML.

Puis-je utiliser JavaScript dans des modèles Jade?

Oui, vous pouvez utiliser JavaScript dans des modèles Jade. Jade prend en charge une variété de constructions JavaScript, y compris les variables, les expressions, les structures de contrôle (comme les instructions IF-Else et pour les boucles), et les fonctions. Pour inclure le code JavaScript dans votre modèle de jade, préfixez-le avec -.

Comment inclure des partiels dans Jade?

partiels, ou des morceaux réutilisables de code Jade, peut être inclus dans d'autres modèles Jade en utilisant le mot-clé inclue. Par exemple, l'inclusion d'en-tête inclurait le contenu du fichier en-tête.jade à ce stade du modèle.

Comment puis-je commenter dans Jade?

Les commentaires dans Jade peuvent être ajoutés en utilisant //. Par exemple, // Ceci est un commentaire ajouterait un commentaire à votre code de jade. Notez que ce commentaire ne sera pas inclus dans le HTML.

Rendu Html.

Comment formater le texte dans Jade?

Le texte en Jade peut être formaté à l'aide de balises de type HTML. Par exemple, P Il s'agit d'un texte rendu

Il s'agit d'un texte

dans HTML. Vous pouvez également utiliser la syntaxe de Markdown dans Jade en préfixant votre texte avec: markdown.

Comment gérer les erreurs dans Jade?

Les erreurs en jade peuvent être manipulées à l'aide de blocs de capture d'essai dans votre javascript code. Lorsqu'une erreur se produit lors du rendu d'un modèle de jade, Jade lancera une exception que vous pouvez attraper et gérer de manière appropriée.

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!