‫Instructeur : Dans cette conférence,
‫vous allez apprendre les bases mêmes de l'utilisation des modèles Pug.
‫Alors ouvrons notre modèle de base ici et commençons.
‫Donc, en substance, Pug est une syntaxe simple sensible aux espaces
‫blancs pour écrire du HTML, c'est donc vraiment l'essentiel de ce que c'est.
‫Maintenant, cela signifie que tout ce que
‫nous utilisons pour écrire des éléments html est leur nom et leur indentation
‫dans notre code.
‫Commençons donc par mettre
‫en place une structure html très simple ici,
‫alors laissez-nous un peu d'espace.
‫Et donc html commence généralement toujours par le doctype
‫et un html.
‫Donc, pour pouvoir travailler correctement avec Pug, vous devez bien sûr
‫avoir quelques connaissances en html ; sinon,
‫cela pourrait ne pas avoir beaucoup de sens pour vous.
‫Mais si vous ne connaissez pas le
‫html, ne vous inquiétez pas, vous pouvez toujours suivre ce que je fais ici
‫et peut-être simplement lire un
‫article sur les premiers pas avec le html
‫parce que c'est vraiment, vraiment simple.
‫Quoi qu'il en soit, nous commençons
‫toujours par doctype puis le premier élément, donc l'élément
‫primordial dans tous nos documents html est toujours le html, puis
‫à l'intérieur il y a généralement un élément head.
‫Et donc dans Pug pour
‫dire qu'un élément est à l'intérieur de l'autre, tout
‫ce que nous faisons est d'utiliser une balise.
‫Nous utilisons donc l'indentation, comme je l'ai mentionné au début,
‫et c'est tout.
‫C'est donc notre élément head, et donc à l'intérieur de cette
‫tête créons le titre de la page Web.
‫Et donc, encore une autre balise.
‫Alors
‫titre, et disons Natours.
‫Bon, encore une fois, juste l'indentation, puis le
‫nom de l'élément html, puis
‫le contenu lui-même.
‫Pas de balises d'ouverture, pas de balises
‫de fermeture et aucun de l'encombrement que nous avons habituellement en HTML.
‫Donc en fait, j'aime beaucoup cette syntaxe ici pour
‫écrire des documents html, donc
‫je la trouve vraiment incroyable, vraiment simple à utiliser et
‫à lire aussi.
‫Quoi qu'il en soit, c'est le contenu que nous voulons dans la
‫tête, et maintenant nous voulons aussi créer un corps.
‫Maintenant, ce corps n'est bien sûr pas à l'intérieur
‫de la tête, mais au même niveau
‫que la tête, donc fondamentalement aussi un enfant direct de html.
‫Et donc tout ce que nous avons à faire est de revenir en arrière
‫d'un niveau d'indentation, puis d'y créer l'élément.
‫Ensuite, nous voulons notre h1, et
‫nous devons maintenant utiliser un peu plus d'indentation.
‫Alors bien sûr pas ici, pas ici, mais ici, donc à
‫l'intérieur du corps.
‫Ajoutons également un paragraphe,
‫et donc pour cela nous utilisons l'élément p disant
‫quelque chose comme, ceci est juste du texte.
‫Alors essayons cela maintenant dans notre navigateur, alors
‫rechargez, et c'est parti.
‫Très bien, et donc ici vous voyez en
‫fait toute la structure que nous venons de créer avec le doctype, l'élément
‫html, et bien sûr la tête et le corps là-dedans.
‫Et vous voyez également ce titre apparaître ici.
‫Super, maintenant, incluons également un fichier CSS et
‫le favicon à afficher ici
‫au lieu de cette page générique là-bas.
‫Et donc si vous connaissez un
‫peu de HTML, vous savez que ce genre de choses appartient ici à la tête.
‫Alors, comment incluriez-vous réellement une feuille de style CSS avec du
‫code HTML normal ?
‫Vous feriez quelque chose comme ça.
‫Donc, vous créeriez un élément de lien,
‫puis définiriez qu'il s'agit d'une feuille de
‫style, puis également
‫la référence, donc comme ceci.
‫Donc style CSS. css, et donc
‫ce que nous avons ici, donc ceci et ceci sont des attributs.
‫Et donc avec Pug, nous écrivons des attributs comme celui-ci.
‫Donc, au lieu d'avoir
‫cet élément, nous écrivons simplement link, puis nous écrivons
‫ces attributs entre parenthèses, donc comme ça.
‫Donc, sans aucun espace et sans parenthèses ouvertes, et
‫puis c'est là que
‫nous écrivons ces attributs comme ceci.
‫Et nous devrions toujours les écrire avec des guillemets simples et
‫non des guillemets doubles,
‫et nous n'avons donc plus besoin de celui-ci ici.
‫Maintenant, une chose que je voulais également
‫vous dire, c'est que nous pouvons également utiliser du HTML normal dans Pug.
‫Donc, si vous le vouliez, vous pourriez laisser cette
‫ligne de code ici et Pug la comprendrait alors très bien.
‫Mais bien sûr, ici, je voulais
‫vous montrer comment nous pouvons définir des attributs avec Pug.
‫Et donc faisons maintenant la même chose pour le favicon, et donc
‫encore une fois nous avons besoin d'un élément de lien,
‫et là nous allons définir quelques attributs.
‫Nous avons donc défini qu'il s'agit d'une
‫icône de raccourci, nous spécifions également son type, donc image,
‫et dans ce cas
‫c'est un PNG, puis à nouveau sa
‫référence, et c'est une image favicon. png.
‫Et maintenant, allons de l'avant et testons cela,
‫et vous verrez que cela semble en fait un peu différent.
‫Nous avons donc notre favicon,
‫et notre texte est maintenant bien empilé.
‫Et en fait, vous voyez des propriétés CSS apparaître ici maintenant sur
‫le côté gauche.
‫Et c'est bien sûr parce que j'ai écrit
‫une tonne de CSS
‫en fait pour cette application, donc tout est en public, CSS et style.
‫Donc vous voyez que j'ai
‫comme, je ne sais pas, comme un millier de lignes ou même plus
‫de CSS que j'ai écrit juste pour que
‫cette application soit aussi belle qu'elle l'est.
‫Donc, en d'autres termes, pourquoi ce style. css est en
‫fait chargé automatiquement à partir du dossier CSS,
‫et le favicon est également chargé automatiquement
‫à partir du dossier image.
‫Eh bien, tout d'abord, gardez à l'esprit que chacun
‫de ces actifs déclenche en fait sa
‫propre requête http, confirmons-le donc ici dans les sources ou
‫dans le panneau réseau.
‫Et donc ici vous voyez ces trois
‫requêtes, donc une pour la page elle-même, l'autre pour notre style,
‫et pour notre favicon.
‫Et encore une fois, pourquoi cela
‫fonctionne-t-il ainsi, car nous n'avons évidemment pas de gestionnaire
‫de route pour l'un de ces fichiers ici.
‫Mais c'est toujours un itinéraire si vous y
‫réfléchissez, car c'est une demande d'obtention vers cette URL
‫et aussi vers cette URL.
‫Alors laissez-moi me rappeler pourquoi cela fonctionne réellement,
‫et c'est à cause de ce middleware
‫que nous avons défini quelque part ici, donc ceci ici.
‫Alors rappelez-vous cela en utilisant express. statique, nous définissons
‫essentiellement que tous les actifs statiques
‫seront toujours automatiquement servis
‫à partir d'un dossier appelé public, donc avec ce dossier ici.
‫Et c'est pourquoi quand on dit style slash css, cela
‫vient en fait du dossier public.
‫Et donc ce dossier CSS est le dossier à l'intérieur de public, et il en va
‫de même bien sûr pour les images.
‫Donc, si dans notre html nous avons une favicon de barre oblique
‫d'image, alors il ouvrira le dossier d'image
‫qui se trouve à l'intérieur de notre dossier public.
‫Encore une fois parce que nous l'avons défini ainsi dans notre application expresse.
‫Vous avez donc déjà appris à créer des éléments
‫dans Pug à l'aide de l'indentation
‫et vous avez également appris à utiliser les attributs.
‫Mais une autre
‫chose vraiment cool est d'utiliser des variables ici.
‫Alors laissez-moi maintenant vous montrer comment nous pouvons réellement transmettre
‫des données dans un modèle, puis comment nous pouvons utiliser ces données ici
‫même dans Pug.
‫Rappelez-vous donc que nous avons cette route
‫ici, que nous utilisons pour rendre notre modèle de base.
‫Et bien sûr, si
‫c'est plus tard, nous aurons en fait
‫un fichier séparé, où tous ces itinéraires vivront alors.
‫Mais pour l'instant, tout ce que je veux faire, c'est vraiment faire en sorte que cela fonctionne.
‫Quoi qu'il en soit, pour maintenant transmettre des données dans ce modèle ici,
‫tout ce que nous avons à faire est de
‫définir un objet ici, puis nous y mettrons simplement des données.
‫Et ces données seront ensuite disponibles dans le modèle Pug.
‫Créons donc simplement un objet ici
‫avec une propriété de visite et définissons-le sur The Forest Tiger,
‫puis...
‫créons également une propriété utilisateur
‫et définissons-la sur Jonas.
‫Et ces variables que nous avons transmises ici,
‫elles sont alors appelées locales dans le fichier Pug.
‫Alors maintenant, allons de l'avant et utilisons ces données.
‫Et ce que je veux faire
‫maintenant, c'est mettre cette variable de tournée sur notre h1.
‫Donc, en gros, je veux créer un élément h1, où
‫le contenu est le nom de la tournée.
‫Et la façon la
‫plus simple de le faire est d'utiliser simplement la syntaxe
‫égale comme celle-ci, donc h1 est égal à, puis un espace, puis un tour.
‫Et c'est tout, c'est vraiment tout ce que nous avons à faire.
‫Alors prenons celui-ci ici, et
‫donc en fait une autre chose que je
‫voulais vous montrer est que dans Pug, nous pouvons créer des
‫commentaires, et nous pouvons créer deux types de commentaires.
‫Donc, le plus simple est tout simplement comme en JavaScript,
‫donc comme ça.
‫Et cela créera ensuite
‫un commentaire qui sera visible dans le html.
‫Jetons donc maintenant un coup
‫d'œil à ceci,
‫et gardons à l'esprit que maintenant le h1 ne sera plus The Park
‫Camper, mais à la place ce devrait être The Forest Hiker
‫parce que c'est la variable de la
‫tournée, ou en d'autres termes la tournée locale,
‫qui il est maintenant passé dans ce modèle.
‫Et donc ici, j'ai ensuite
‫mis cela dans le h1 en utilisant la syntaxe égale.
‫Alors vérifions cela, jetez un œil
‫à ceci.
‫Et en effet, c'est maintenant The Forest Hiker.
‫Et voici également ce commentaire dont nous
‫venons de parler également.
‫Donc, comme je l'ai dit, cette double barre oblique
‫que nous avons faite là crée essentiellement un commentaire html.
‫Donc, cette syntaxe ici est la façon dont nous écrivons les commentaires
‫en html, mais si vous voulez vraiment que ce soit un commentaire pour le fichier
‫Pug mais pas vraiment sorti en html, vous
‫devez ajouter un tiret comme celui-ci.
‫Donc, si nous rechargeons maintenant ceci, alors ce commentaire devrait disparaître.
‫Donc, ce genre de code ici, que nous avons écrit
‫ici, est appelé code tamponné.
‫Et en fait, nous pourrions également écrire
‫du JavaScript ici, disons donc que h2 est égal à l'utilisateur,
‫puis nous pouvons également appeler toUppercase à ce sujet.
‫Du JavaScript si simple ici
‫car ici encore, dans ce code tamponné, c'est ainsi
‫que cela s'appelle, nous
‫pouvons exécuter du JavaScript simple comme nous l'avons fait ici.
‫Alors en effet, c'est parti, Jonas en majuscule.
‫Donc du code tamponné, et si nous avons du code tamponné,
‫alors nous devons également avoir du code non tamponné.
‫Et donc fondamentalement, le code sans tampon est du
‫code qui n'ajoutera rien à la sortie.
‫Et nous écrivons cela en écrivant dash, puis
‫faisons simplement du JavaScript ici,
‫par exemple en définissant simplement une variable.
‫Disons donc que const x est égal à neuf,
‫puis reprenons du code tamponné.
‫Donc encore une fois du code qui va ajouter quelque chose à la sortie.
‫Et encore une fois, nous pouvons utiliser JavaScript
‫ici, alors faisons simplement deux fois x.
‫Et donc ici, nous aurons alors accès à cette variable x.
‫Cela devrait donc être 18 et c'est effectivement le cas.
‫Voilà donc tous les petits morceaux de code
‫différents que nous pouvons utiliser dans Pug.
‫Maintenant, il existe également une troisième façon d'écrire du code, et permettez-moi
‫de le montrer ici.
‫C'est ce qu'on appelle l'interpolation, et
‫en fait, celle-ci
‫ressemble un peu aux chaînes du modèle ES6.
‫Donc, au lieu d'avoir juste Natours ici,
‫ajoutons également le nom de
‫la tournée, et ainsi nous pouvons le faire comme ceci.
‫Donc, avec la chaîne de modèle dans ES6, cela fonctionne comme ceci,
‫mais ici dans Pug, c'est avec ce
‫hachage, donc comme ça.
‫Et ici, nous devons procéder
‫comme ceci essentiellement parce que c'est du code, donc c'est variable, mais ce
‫n'est pas du code, c'est simplement du texte.
‫Et donc nous ne pouvons pas le faire parce que tout ce qui est
‫ici est alors traité comme du JavaScript,
‫et donc puisque ce n'est pas du JavaScript, cela ne fonctionnerait pas.
‫Et donc ce n'est ici qu'une chaîne,
‫et donc si nous voulons ajouter quelque chose à
‫cette chaîne, alors nous devons utiliser cette syntaxe d'interpolation.
‫D'accord, ça a du sens ?
‫Ajoutons simplement comme cette barre ici, qui fait
‫aussi simplement partie de la chaîne.
‫Et maintenant, nous nous attendons à
‫ce que Natours slash The
‫Forest Hiker, c'est donc exactement ce qu'ils ont obtenu.
‫Génial, ce sont donc les bases mêmes
‫du travail avec Pug.
‫Mais bien sûr, il y a beaucoup plus à apprendre
‫et continuons donc à le
‫faire au cours des deux prochaines conférences.