‫Instructeur : Dans cette conférence, je veux juste vous montrer
‫très rapidement une fonctionnalité que nous avons réellement dans
‫tous les langages de programmation.
‫Nous devons simplement inclure un fichier et dans ce
‫cas, un modèle dans un autre modèle.
‫Disons donc que nous voulions garder notre
‫mise en page de base ici
‫vraiment propre sans aucun contenu.
‫Et donc ce que nous allons faire, c'est mettre tout
‫le code de l'en-tête dans un seul fichier d'en-tête.
‫Et puis incluez ce fichier ici.
‫Et pareil aussi pour le pied de page.
‫Et donc, notre bloc de contenu,
‫donc fondamentalement, notre
‫corps ici devient cet élément très propre uniquement avec ces
‫inclusions, puis ce contenu ici pour le moment.
‫D'accord.
‫Encore une fois, créons ici un nouveau fichier pour l'en-tête.
‫dot pug
‫Et en fait j'aime préfixer ces fichiers qui ne servent qu'à
‫être inclus avec un trait de soulignement.
‫Et si vous connaissez quelque chose
‫comme Sass, cela vous sera également familier.
‫Bon, allons maintenant ajouter et coller ceci ici, et non ce
‫code, donc je suppose
‫que j'ai oublié de le copier ou de couper même.
‫Et puis collez-le ici.
‫Et maintenant, cette indentation est complètement fausse
‫ici, car maintenant nous avons trois niveaux, comme
‫vous pouvez le voir, donc un,
‫deux, trois niveaux où ce code devrait réellement être ici.
‫D'accord, et maintenant nous devons ajouter et corriger cela, mais ce que
‫nous pouvons réellement faire au lieu de le faire manuellement, c'est
‫d'utiliser une belle extension qui fait cela pour nous.
‫Alors ici, dans mon onglet
‫extension, laissez-moi vous montrer l'extension que je veux dire.
‫Et cela s'appelle Pug embellir.
‫D'accord, alors allez-y et installez ce paquet, très bien.
‫Et une fois cela
‫fait, vous pouvez simplement sélectionner
‫tout le code ici en appuyant sur la commande-A, puis
‫créer une commande VS Code en disant commande-shift-P.
‫Et puis ici, vous écrivez carlin.
‫Et donc cela embellira alors le carlin.
‫Et vous voyez que vous avez également le raccourci
‫ici et je ne sais pas s'il s'agit de celui par
‫défaut mais au moins dans mon cas, je peux également utiliser
‫le raccourci pour embellir ce code.
‫Mais de toute façon, en écrivant
‫carlin, vous devriez obtenir cette sélection ici maintenant.
‫Et si vous appuyez ensuite sur Entrée, cela corrigera,
‫comme vous le voyez, l'indentation qui n'était pas correcte dans ce fichier.
‫D'accord?
‫Alors sauvez-le, fermez-le et revenons
‫ici en fait.
‫Et maintenant, tout ce que nous avons à faire est de dire inclure _header.
‫Et idem pour le pied
‫de page, alors coupons-le ici, créons un nouveau modèle...
‫_footer
‫collez-le, sélectionnez-le,
‫commande-shift-P ou probablement dans Windows, c'est
‫control-shift-P, puis le dernier qui
‫a été utilisé apparaîtra ici
‫lors de la sélection.
‫Alors, appuyez sur retour et c'est parti.
‫C'est réglé maintenant aussi.
‫Comprendre...
‫bas de page.
‫Et remarquez que nous n'avons même pas besoin de
‫spécifier à nouveau l'extension dot pug.
‫Alors faites-lui une sauvegarde et lorsque nous le
‫rechargerons maintenant, cela devrait ressembler exactement à la même chose.
‫Eh bien, pas vraiment, parce que ces boutons ici, ils se
‫sont en quelque sorte déplacés vers le
‫bas, alors ils ont quitté cette barre de navigation.
‫Ou en fait, cet en-tête, donc ce n'est pas
‫correct, c'était peut-être
‫un problème avec cette indentation automatique ici dans l'en-tête.
‫Et oui, en fait, ce n'est pas
‫correct car tout cela devrait être à l'intérieur de l'en-tête.
‫Donc ce nav, ce div et ce nav devraient
‫tous être au même niveau.
‫Et maintenant c'est correct.
‫Juste pour être sûr, vérifions également le pied de page.
‫Mais ici, c'est en fait correct, donc je
‫ne suis pas sûr de ce qui s'est réellement passé dans cette situation.
‫Mais de toute façon, essayons à nouveau maintenant.
‫Et donc on y va.
‫Quoi qu'il en soit, cela inclut simplement certains fichiers, l'un
‫dans l'autre.
‫Dans la vidéo suivante, nous ferons
‫alors quelque chose d'un peu similaire, mais en même temps beaucoup plus complexe et aussi plus utile.
‫Donc, si vous êtes curieux de savoir ce
‫que c'est, rejoignez-moi juste dans le prochain.