‫-: D'accord.
‫Dans cette vidéo, je vais vous montrer
‫comment utiliser l'une des
‫fonctionnalités les plus importantes et les plus complexes de Pug.
‫Et ce sont des extensions.
‫Avec extend, nous pourrons
‫utiliser la même mise en page
‫de base pour chaque page que nous souhaitons rendre.
‫À l'heure actuelle, notre modèle de base est en quelque sorte terminé
‫avec un bel en-tête et un joli pied de page.
‫Alors maintenant, commençons à remplir son contenu.
‫Maintenant, bien sûr, nous
‫voulons charger un contenu différent pour différentes pages.
‫Et pour commencer, nous voulons avoir une page d'aperçu avec
‫toutes les visites, puis une page avec
‫tous les détails de la visite pour une visite spécifique.
‫Implémentons maintenant quelques routes pour
‫ces deux pages.
‫Et je vais le faire juste en dessous
‫du premier que nous avons déjà créé.
‫Donc, /overview Et
‫puis quelque chose de très similaire à avant.
‫Et encore une fois, un peu plus tard, dans la
‫vidéo suivante, nous mettrons ensuite
‫ces routes dans leur propre fichier séparé.
‫Alors, rendez-vous, et maintenant sur cette page de présentation,
‫nous voulons en
‫fait rendre un modèle appelé présentation.
‫Cela n'existe pas
‫encore, alors allons-y maintenant rapidement et créons-en un.
‫Alors, vue d'ensemble. pug Et
‫en fait, passons aussi quelques données.
‫Et on passera dans le titre de la page
‫qui dans ce cas, on va dire, Tous
‫les Tours.
‫Maintenant, récupérons ce code
‫et copions-le pour la visite.
‫Nous voulons donc à nouveau un itinéraire pour un circuit spécifique.
‫Et ici, nous
‫voudrons avoir un modèle qui s'appelle aussi tour.
‫Et puis le titre de celui-ci, pour
‫l'instant, faisons-le à
‫nouveau, The Forest Hiker Tour.
‫Donc, pour l'instant, ce n'est qu'un espace réservé, et
‫bien sûr, un peu plus
‫tard, nous allons ensuite créer cette dynamique.
‫Parce qu'à ce stade, nous
‫sommes encore en train d'apprendre comment Pug fonctionne vraiment.
‫Créons maintenant également ce modèle de visite.
‫Et c'est tout.
‫Bon, maintenant que ces deux nouveaux modèles sont terminés, c'est
‫ce que nous allons faire.
‫Dans chacun de ces modèles, et dans ce
‫cas ici la vue d'ensemble,
‫nous souhaitons uniquement mettre le contenu de cette page spécifique.
‫Nous ne voulons donc ni pied de page ni
‫en-tête ni aucun des éléments que nous avons dans la base.
‫Donc, encore une fois, vraiment juste
‫le contenu de la page de présentation.
‫C'est donc exactement ce que nous allons mettre dans
‫ce fichier, puis nous injecterons essentiellement ce contenu dans
‫le modèle de base, que nous
‫pouvons appeler le modèle parent.
‫Ce processus est alors appelé extension.
‫Ainsi, chaque fois que le modèle de vue d'ensemble est
‫rendu, nous prenons le modèle de
‫base et le remplissons avec le contenu de ce fichier,
‫et nous l'étendons donc.
‫Voici comment nous mettons cela en œuvre.
‫Tout d'abord, dans la base, nous devons mettre un bloc.
‫Je vais le faire ici.
‫Alors supprimons tout ça,
‫et ici, mettons un bloc.
‫Et ce bloc, je vais l'appeler contenu.
‫Ensuite, à l'intérieur de ce bloc, nous pouvons
‫également avoir du contenu.
‫Mettons donc simplement un h1 ici.
‫Mais ce contenu sera ensuite écrasé par la suite.
‫Mais de toute façon, mettons-le
‫ici juste comme un espace réservé, en gros.
‫Il s'agit donc d'un en-tête d'espace réservé.
‫D'accord, nous avons donc notre bloc ici, et maintenant nous
‫pouvons aller sur notre page de présentation
‫et dire que nous voulons étendre notre modèle de base.
‫Alors, étendez la base.
‫Ou en fait, cela s'appelle s'étend.
‫Ce fichier étend donc le fichier de base.
‫Et bien sûr, si celui-ci ici
‫s'appellerait, par exemple, index. carlin, alors
‫nous dirions ici étend l'index.
‫Maintenant, quel est exactement le contenu
‫qui va être étendu dans le modèle de base ?
‫Eh bien, c'est tout ce que nous mettons dans le bloc de contenu.
‫Donc, également ici, nous créons un bloc appelé contenu.
‫Et puis là-dedans, on peut comme toujours mettre notre contenu.
‫Disons simplement, ceci est la vue d'ensemble de la tournée.
‫Ici, nous redéfinissons essentiellement le bloc de contenu qui
‫se trouve dans la base.
‫Donc, encore une fois,
‫nous avons ce bloc ici qui s'appelle contenu,
‫et maintenant en mettant le même bloc de contenu
‫ici même dans cette page, qui
‫étend ensuite la base, nous redéfinissons fondamentalement ce bloc.
‫Chaque fichier ne peut étendre qu'un autre fichier.
‫Nous ne pouvons donc étendre que
‫la base ici, mais nous pouvons avoir des blocs différents dans chacun des fichiers.
‫Donc, nous pourrions également avoir un bloc pour la tête ici.
‫Et puis nous pourrions étendre cela également
‫dans le modèle de vue d'ensemble.
‫Et, en fait, nous le ferons un peu plus tard.
‫Mais pour l'instant, bien sûr, restons simples.
‫D'accord, cela a-t-il un sens ?
‫Allons de l'avant et faisons la même chose ici.
‫Cela étend donc la mise en page de base.
‫Et qu'est-ce que ça prolonge exactement ?
‫Eh bien, cela étendra le bloc de contenu.
‫Et donc celle-ci, nous la mettrons
‫sur le h1, C'est la page de détail de la tournée.
‫Alors, avant de tester cela, récapitulons rapidement ce que
‫nous venons de faire.
‫Nous voulons donc utiliser ce modèle de base ici en
‫quelque sorte comme point de départ.
‫Donc, en tant que squelette qui a tout le
‫contenu HTML,
‫comme cet en-tête, ainsi que l'en-tête et le pied de
‫page, mais pas le contenu spécifique pour chaque page.
‫Ensuite, dans chacune de ces pages
‫ici, nous n'avons que le contenu de cette page elle-même.
‫Et nous pouvons le
‫faire parce que nous pouvons essentiellement injecter
‫ce contenu ici dans le modèle de base parent en utilisant extend.
‫Donc, fondamentalement, pensez à cela comme le contraire de l'inclusion.
‫Ici, ce modèle comprenait deux modèles parents.
‫Ce modèle comprenait ici deux modèles enfants, l'en-tête
‫et le pied de page.
‫Donc, encore une fois, la base est
‫le parent, et l'en-tête et le pied de page sont les enfants.
‫Donc ici, le parent a inclus les enfants.
‫Mais avec les extensions, c'est l'inverse, où les enfants,
‫comme nous pouvons le dire, nous pouvons donc en quelque
‫sorte dire que la vue
‫d'ensemble est également un enfant de la
‫base, mais ici, c'est l'enfant qui inclut en quelque sorte la base.
‫Donc, en gros, tout ce qui entoure ce contenu de bloc.
‫Vous pouvez imaginer que tout ce
‫code ici, tout ce qui n'est pas le
‫contenu du bloc est ensuite copié directement dans ce fichier.
‫C'est une belle façon d'imaginer comment cela fonctionne.
‫Cela nous permet ensuite d'utiliser ici dans notre itinéraire la
‫vue d'ensemble et les modèles de tournée au lieu d'utiliser la base.
‫Mais toujours, bien sûr, en utilisant tout ce HTML
‫que nous avons ici.
‫Bon, j'espère que ça a du sens maintenant.
‫Allons de l'avant et essayons cela.
‫Je vais juste copier l'URL.
‫Alors maintenant, écrivons un aperçu.
‫Et donc, en effet, nous obtenons le h1 qui dit Ceci est
‫la vue d'ensemble de la tournée.
‫Et en fait, utilisons également la variable de titre que nous
‫avons transmise à ces modèles.
‫N'oubliez pas qu'ici nous avons le titre
‫All Tours sur la vue d'ensemble, puis sur la tournée,
‫nous avons The Forest Hiker.
‫Mettons donc cela dans le titre.
‫En fait, nous pouvons le faire ici
‫même dans le modèle de base.
‫Donc, quand ici dans
‫la vue d'ensemble nous étendons le modèle
‫de base, le modèle de base a toujours accès aux locaux, donc,
‫aux variables, que nous avons passées dans le modèle.
‫Ici, on peut faire ce qu'on a fait
‫avant, donc, interpolation avec la variable, donc avec le local.
‫Donc, tout ce que nous avons à faire est de mettre le titre ici, comme ceci.
‫Et si nous rechargeons maintenant, alors
‫vous voyez Toutes les visites ici en haut.
‫Essayons maintenant la tournée.
‫Et c'est donc la page de détail de la visite,
‫et ici vous voyez The Forest Hiker Tour.
‫Maintenant, si nous chargeons celui-ci, nous devrions
‫obtenir cet espace réservé que nous
‫avons mis dans le bloc.
‫Vous vous en souvenez ?
‫Et, en effet, Ceci est le titre de l'espace réservé.
‫Super.
‫Il s'agit d'un mécanisme puissant et très important que nous
‫devons comprendre et utiliser pour tous les modèles que
‫nous allons créer dans le reste
‫de la section.
‫Dans la vidéo suivante, nous allons
‫enfin nettoyer un peu ce désordre que nous avons ici
‫et refactoriser tout ce
‫code ici dans des fichiers différents.