Créez des sites Web rapides avec le générateur de sites statiques Hugo et le générateur de sites statiques 5 (Introduction)

1. Intro: Bonjour, je m'appelle Shawn, et j'enseigne le design Web et développement de sites Web depuis plus de 10 ans. Et ces dernières années, je me suis spécialisé dans la conception de sites Web statiques. Beaucoup de personnes qui débutent dans la conception Web pour elles-mêmes se familiarisent les bases des systèmes de gestion de contenu tels que WordPress et Joomla. Je vais devoir trouver qu' ils doivent payer pour des plugins et des thèmes coûteux. En empruntant cette voie, vous aurez également du mal à développer des thèmes et des modèles. Vous vous retrouverez également avec un site Web lent et de nombreuses vulnérabilités potentielles de sécurité. Cela créera une expérience client médiocre, mais vous obtiendrez également classement des moteurs de recherche en raison de la lenteur des vitesses de chargement des pages. sites Web statiques et Hugo vous proposent des sites Web rapides et sécurisés, faciles à créer, peu coûteux à héberger et qui offrent le potentiel de bons classements dans les moteurs de recherche. Puisque les algorithmes SEO préfèrent les sites Web qui se chargent rapidement, ce cours facilite la mise en route avec la conception de sites Web statiques. Il vous guide dans le processus de configuration de votre premier site américain et vous présente également le HTML et le CSS à l'aide de Bootstrap, vous devriez suivre cette classe si vous débutez dans la conception Web statique. Nous examinerons également les bases de Bootstrap. Vous n'avez donc pas besoin d'avoir beaucoup d' expérience avec le HTML ou le CSS. Le projet de cette classe consiste à construire un site Web statique de base à l'aide de Hugo et Bootstrap ainsi que du JavaScript de base. J'espère que ce cours vous plaira autant que j'ai aimé le créer. voit dans la première leçon. 2. Pour commencer: Je vais vous montrer tous les logiciels dont vous avez besoin pour ce cours dans la vidéo suivante, cette vidéo vise à vous montrer comment accéder aux fichiers dont vous aurez besoin. La première chose dont vous aurez besoin pour quelques leçons est donc besoin pour quelques leçons est quelques images et vous pouvez les télécharger ici à partir d'un fichier zip dans la section Ressources. La seule chose dont vous avez besoin, c'est une copie des fichiers terminés pour chaque leçon. J'ai laissé un lien ici vers le dépôt GitHub. Et une fois que vous êtes dans le référentiel GitHub, vous devez choisir la branche dont vous avez besoin pour la leçon sur laquelle vous travaillez. Et toutes les leçons ont des branches associées à eux. Une fois que vous avez choisi la succursale, un bouton de code s' affiche et vous pouvez télécharger un fichier zip. C'est la façon la plus simple de le faire. Si vous choisissez de cloner avec un utilitaire get CLI ou un bureau GitHub, assurez-vous de supprimer le dossier dot git. Mais je vous recommande fortement de cliquer sur Download Zip, de saisir ce dossier, puis vous pouvez vérifier ma version du code pour résoudre les problèmes qui pourraient survenir autrement, déposez-moi un message dans le section de discussion. 3. Installez HUGO et le logiciel requis: Bienvenue dans la première leçon. Nous allons non seulement installer Hugo, mais aussi tous les logiciels jaunes dont vous avez besoin pour développer des sites Web avec Hugo. À la fin de cette leçon, vous pourrez installer le logiciel suivant sur Windows, Mac ou Linux. Tout d'abord, NodeJS. Et vous installerez également Chocolate même temps si vous utilisez Windows. Surveillez donc attentivement cela. L'interface de ligne de commande Git. Vous allez installer Homebrew si vous utilisez Mac ou Linux, puis installerez Hugo et allez Lang via chocolat ou homebrew, selon le système que vous utilisez. Code Visual Studio. Et aussi GitHub Desktop, qui est un logiciel optionnel que vous pouvez installer et qui n'est pas disponible sous Linux rend beaucoup plus facile pour les débutants. Tous les liens de ces progiciels se trouvent dans la section Ressources ci-dessous. La première chose à faire est installer Visual Studio Code. Et la raison pour laquelle nous le faisons d'abord, c'est parce qu'à l'étape suivante, nous allons installer la porte. Et dans le programme d'installation de git, nous allons choisir Visual Studio Code comme éditeur de code préféré. Qui a trouvé ce lien ci-dessous dans la section Ressources de la page de téléchargement de Visual Studio Code. Il existe des téléchargements pour Windows, Linux et Mac. Et Linux. Vous devez vous assurer de traiter le bon type d'installateur. Je vais maintenant passer par les étapes de l' installation de Visual Studio Code sur Windows, mais les options sont pratiquement les mêmes sur Linux et Mac. J'aime avoir l'action Ouvrir avec du code pour le menu contextuel du répertoire. Je peux donc ouvrir tout un dossier de code et aussi le code de largeur ouverte pour les menus contextuels d'automne. Vous pouvez ouvrir un fichier individuel dans VS Code. Nous devons maintenant installer l'interface de ligne de commande Git. Accédez au système de validation ou de téléchargement votre progression lorsque vous écrivez du code sur un serveur distant. Et il suit chaque changement que vous apportez tant que vous validez vos modifications au fur et à mesure que vous les apportez. Si vous utilisez Linux ou Mac, il est vraiment important que vous installiez correctement à ce stade car il est nécessaire pour Homebrew ou Brew. Lien ci-dessous pour la page de téléchargement l'interface de ligne de commande Git, commençons par Linux. Maintenant. Chaque distribution de Linux possède son propre programme d'installation de paquets. Le plus courant est le gestionnaire de paquets Debian Ubuntu. Nous avons le code ici. Vous devrez probablement écrire un pseudo avant ces commandes que vous avez l'autorisation d' installer le logiciel. La plupart des comptes utilisateur ne vous permettent pas d'installer le logiciel. Il y a ici un tas d'exemples différents de systèmes et de code particulier afin que vous puissiez l' code particulier afin que vous puissiez installer avec leur gestionnaire de paquets. Si vous êtes sur Mac, c'est un peu plus facile. Il est dit ici d'utiliser le breuvage, le brassage, le brassage maison tous brassés a tendance à dépendre de Git lui-même. Et si vous n' avez pas été stocké, vous pourriez avoir des difficultés installer Homebrew à ce stade. Je peux donc le recommander. Et j'ai laissé le lien vers cette page ci-dessous. Cependant, c'est assez simple. Si vous utilisez Mac OS 10.9 ou supérieur, ce qui est un ajout de Maverik. Nous devrions exécuter la commande GIT dans le terminal. Si vous n'avez pas été installé, il s'installera automatiquement lorsque vous avez fini de l'installer pour vérifier qu'il a été installé tapant GIT space dash, version dash. Et s'il a été installé, il vous indiquera quelle version vous avez. Si vous utilisez Windows, il s'agit du téléchargement du programme d'installation et de l'exécution manuelle du processus. Liens ci-dessous. Et maintenant, je vais passer par le processus d'installation de Windows. Je vais décocher, obtenir une interface graphique et obtenir une intégration timidide Windows Explorer. Choisissez Visual Studio Code. L'éditeur de texte par défaut. Je vais laisser prendre, décider du nom de la branche par défaut. Je vais autoriser l' exécution à partir de la ligne de commande, mais aussi à partir de logiciels tiers. Je vais choisir l'option pour utiliser son propre OpenSSH groupé. Nous utilisons la bibliothèque OpenSSL. Je vais vérifier comme 0 et engager des terminaisons de pelouse de style unique. Certaines personnes préfèrent passer la commande sous forme de style Windows. Consacrez un style unique. Je préfère commander aussi facilement, ce qui est généralement le style unique. Je n'ai eu aucun conflit dans VSCode. Utilisez la console par défaut Windows, laissez le comportement par défaut git pull et utilisez le noyau Git Credential Manager. Et je laisserai le paramètre par défaut à l'écran pour la mode automnale et les liens symboliques. Afin d'activer n'importe laquelle des fonctionnalités. Si vous êtes Windows, vous pouvez ignorer cette étape. Mais maintenant, nous allons installer Homebrew, et c'est pour Mac ou Linux. Et Homebrew est un gestionnaire de paquets qui vous permet d'installer d'autres logiciels que nous allons utiliser dans ce tutoriel. Faisons un lien vers le site web du brasseur. C'est brew.sh TSH. Une fois que vous êtes sur la page d'accueil, ils ont un script ici, et il fonctionne à la fois sur Linux et Mac. Vous devez donc tout d'abord copier ce script. Et puis je vais vous montrer l'installation sous Linux si vous êtes Mac, c'est exactement le même processus. Ma machine Linux, je vais coller cette commande. Vous vous souvenez que vous avez dû être stocké, ce que nous avons fait à l'étape précédente. Puis appuyez sur Entrée. Ensuite, vous devez confirmer. Vérifiez que les brasseurs sont correctement installés. Vous pouvez utiliser la commande breuvage. Docteur. Comme vous pouvez le voir, on dirait que le breuvage n'est pas sur le chemin. J'ai réparé ça. Je vais copier et coller une commande et je la laisserai dans la section des résultats ci-dessous. Et ceux-ci devraient ajouter une infusion au fichier de chemin des coques. Donnons-lui un gars maintenant. Va travailler Bruce. Maintenant que vous avez installé Brew, si vous êtes un utilisateur Linux ou Mac, vous êtes maintenant prêt à installer Node.js. Si votre utilisateur Windows, vous n'avez pas besoin de breuvage, mais vous installerez trochlear dans le cadre de ce processus. Assurez-vous donc d'être très attentif aux étapes. Le lien ci-dessous vers cette adresse. Et c'est pour installer Node.js avec les gestionnaires de paquets. Si vous passez à macOS, il y a deux options que vous pouvez utiliser curl, qui est un script assez long. Vous voulez le copier et le coller, c'est très bien. Mais l'autre option consiste à utiliser Homebrew, que vous auriez déjà dû installer. Et nous devons le faire est de taper dans Brew install Node. Et il vous guidera tout au long du processus. Si vous êtes sous Linux, il existe de nombreuses options différentes He, selon la distribution que vous utilisez, vous devrez soigneusement accéder au bon lien et l'installer spécifiquement pour votre distribution. Je vais maintenant passer par le processus d'installation de Node.js avec Windows à partir de l'écran de téléchargement principal. Je vais télécharger le programme d'installation Windows. Vous pouvez cliquer sur le bouton Windows ou sous Windows Installer MSI, nous pouvons télécharger la version 64 bits. Il peut y en avoir quelques-uns qui utilisent 32 bits. L'EBIT, il est plus probable que vous ayez besoin de la version 64 bits. Pour cette raison, vous pouvez simplement cliquer sur le bouton Windows Installer. Je vais maintenant vous montrer les options que vous devez sélectionner tout au long du processus d'installation. Très bien. Acceptez donc le contrat de licence. Je vais choisir le dossier d'installation par défaut, composants par défaut. Et puis je dois cocher cette case ici, et c'est vraiment important. Nous allons également installer de la chocolaterie. Nous allons cliquer sur n'importe quelle touche pour continuer avec ce script d'installation. Chaque fois que c'est toujours Hugo et allez poser et c'est pour Linux, Mac et Windows. Le curling sera nécessaire ultérieurement si vous utilisez des modules Hugo. Et les modèles Hugo sont en fait requis par de nombreux thèmes. Il est vraiment important que vous installiez Go Laying en ce moment, en même temps que vous installez Hugo. Si vous êtes sous Mac OS, vous pouvez utiliser la commande brew install Linux, vous pouvez utiliser la même commande car vous auriez dû également installer brew. Mais la fenêtre est légèrement différente. Nous allons utiliser du chocolat et c'est quelque chose que vous auriez dû installer dans les étapes d'installation de Node.js à travers Windows pour commencer, ce serait assez rapide, et ensuite je vais exécutez ensuite l' option Linux ou Mac. La commande du thé au chocolat est donc le chocolat. Et de cette manière instantanée, l'installation. Nous lançons donc l'installation et l' application est étendue Hugo. Tu pourrais juste réinstaller le gars. Il y a d'autres fonctionnalités dont vous avez probablement besoin ultérieurement et qui sont étendues dans Hugo, telles que le support SAS vous donnera une confirmation et vous pouvez le faire pour tous. La prochaine chose que vous devrez décrocher est le langage Go, ce qui est utile pour les modules Hagen. Nous sommes donc sur l' installation de Chaco Go Lang. Encore une fois, vous devrez faire un 44 sauf tous les Go Line ont fini de vous installer. Il y a un message expliquant que les variables d'environnement, y compris le chemin d'accès ont changé au fur et à mesure que nous avons installé le logiciel et qu'il y a une commande pour actualiser, mais j'ai détecté fréquemment des problèmes avec ça. Je vais donc ouvrir un nouveau PowerShell. Ensuite, le nouveau PowerShell, nous allons vérifier que Hugo étendu et la pose d'or ont été installés. Nous avons installé étendu avec la commande est toujours Hugo. Et nous pouvons faire la version Hugo pour vérifier la version. Comme vous pouvez le voir, nous avons installé Huo étendu et pour ceinturer la commande ces versions go then. Et nous pouvons voir que nous avons installé le langage Go le plus léger. Linux ou Mac. Les instructions suivantes seront identiques pour vous. Sous Linux et Mac, la commande que nous allons utiliser est l' installation de breuvage. Très bien, vous avez été installés à travers Grew. Allons maintenant installer Go. Et la commande pour cela est l'installation de breuvage go. Et c'est le langage Go dont nous avons besoin pour exécuter les modules Hugo, qui sont utilisés par les thèmes de quantité et vous l'utiliserez probablement vous-même. Les gars sont installés. Maintenant, nous allons vérifier nos installations Hugo et Go. Nous pouvons utiliser la version Hugo. Vous pouvez le dire par défaut. Sur Linux et Mac, il a étendu ces installations. C'est donc légèrement différent de l'installation de Windows. Ensuite, allez dans la version pour vérifier la langue Go. Nous avons, pour le moment, j' ai installé le langage Go actuel. La dernière étape consiste à installer GitHub Desktop. Il est facultatif, mais il est fortement recommandé, bien qu'il soit uniquement disponible pour Mac et Windows, cela facilite grandement le processus d'utilisation. Et c'est quelque chose dont nous ferons référence dans les prochaines vidéos, où j'utilise la démarche comme tous les progiciels. Dans cette leçon, j'ai laissé le lien vers le site Web, la page de téléchargements dans la section Ressources ci-dessous. Une fois GitHub Desktop installé, vous devez vous connecter avec votre compte GitHub.com. Vous serez redirigé vers le navigateur de largeur pour vous connecter à votre compte GitHub, que vous pouvez vous inscrire gratuitement. Une chose que vous devez vérifier est que Visual Studio Code est configuré en tant qu'éditeur de code, puis dans Fichier, puis Options. Dans l'onglet Intégrations, assurez-vous d'avoir choisi Visual Studio Code comme éditeur externe et que vous avez choisi le shell de votre choix. Donnons la première leçon. Félicitations d'être arrivés jusqu'ici. J'ai hâte de vous voir dans la prochaine leçon où nous allons commencer avec Hugo et réaliser votre premier projet Hugo. Vous avez eu des problèmes avec les étapes de cette leçon, veuillez revenir en arrière et vérifier. Réussir. Il y a une section de discussion ci-dessous et je reviendrai vers vous et je vous aiderai dès que possible. 4. Configurer le projet HUGO dans VS Code: Dans cette leçon, nous allons envisager de mettre en place un projet Hugo à partir de zéro. Vous êtes très personnalisable, mais malheureusement prêt à l'emploi, cela ne vous donne pas grand-chose à travailler. Une fois cette leçon terminée, vous pourrez configurer un projet Hugo sans compter sur un thème. Et vous pourrez générer du texte de base via notre fichier HTML. La première chose que nous allons regarder est la commande Hugo nouveau site. La première chose à faire est de commencer par un dossier vide. Et à l'intérieur de ce dossier, si vous configurez Visual Studio Code, comme je l'ai indiqué dans la leçon précédente, vous pourrez cliquer avec le bouton droit de la souris, puis ouvrir avec du code. Vous pouvez recevoir un message vous demandant si vous faites confiance à l'auteur des chutes et que vous deviez cliquer sur Oui, sinon vous n' obtiendrez pas toutes les fonctionnalités de Visual Studio Code. Nous allons ensuite gérer un nouveau terminal à l'intérieur de ce terminal. Tout d'abord, nous allons vérifier que Hugo a été correctement installé. Et nous pouvons faire la version Hugo. Comme vous pouvez le voir, j'ai installé la version 0.89 étendue sur Windows. Pour créer un nouveau site, nous devons utiliser le nouveau site Kingo et vous devez spécifier le répertoire que je souhaite créditer dans le dossier ou le répertoire actuel. Je vais donc utiliser une barre oblique pour l'indiquer. Nous pouvons maintenant voir que nous sommes prêts. Vous nous demandez si nous aimerions télécharger le thème et le placer dans le dossier thèmes, ou ajouter du contenu. Et cela nous donne un indice que nous pouvons utiliser une nouvelle commande Hugo pour créer du contenu. Et je vais vous le montrer sous peu. Nous devons ensuite créer des modèles de mise en page. Maintenant malheureusement, il ne vient pas avec aucun de ceux-ci hors du livre, pour créer nos modèles de mise en page. Ce que nous allons faire, nous en ferons un nouveau terminal et aurons une nouvelle renommée. Et on va juste appeler ça Temp, fermer le terminal. Et si vous regardez dans votre dossier thèmes, vous verrez que nous avons un dossier temporaire et qu'il a créé un thème de base pour nous. Nous ne pouvons pas faire tout ce qui se trouve dans le dossier Mises en page. Cliquez dessus et nous allons le faire glisser dans notre dossier Mises en page. Ensuite, nous allons y aller et nous supprimerons ce dossier Temp. Jetons un coup d'œil à ce sujet. Nous verrons comment ils fonctionnent. Je vais donc commencer par le HTML de base off dot. C'est notre mise en page HTML de base. C'est le plus haut de la hiérarchie. C'est là que tout commence. À la tête partielle. Ce que cela fait, c'est que nous regardons les partiels. Il va extraire le header.html, cette unité de comptage, rien là-dedans, mais ils seront retirés dans notre base. Nous allons ensuite tirer notre en-tête. Et puis nous avons le bloc principal, que nous avons configuré dans notre liste, seul ou un index dont nous avons parlé dans un instant. Et ensuite, notre pied de page est maintenant marqué pour apporter quelques modifications à cela afin de le rendre conforme aux normes. Donc, si nous mettons un point d' exclamation, nous dirons qu'il s'agit d'un m et d'une abréviation, nous pouvons appuyer sur Tab. Vous remarquerez que nous avons nos balises Meta, nous avons notre jeu de caractères, UTF-8. Et c'est vraiment important car cela signifie que vous pouvez accéder à n'importe quel personnage dans une langue. Vous n'auriez personne à repérer les erreurs. Nous pensons ce que notre balise de compatibilité Internet Explorer et Edge, quelle est notre balise de largeur de fenêtre par défaut, ce qui est très important pour les sites Web réactifs. Ce que nous allons faire, c'est que nous allons saisir toutes ces balises Meta. Nous allons les mettre dans la tête pour aller de l'avant. stupide de l'antigène. Je vais attraper le titre, le faire apparaître ci-dessous. Vous remarquerez que nous avons notre langue par défaut. Nous allons le couper et le coller dans la balise HTML pour le moment et nous y reviendrons un peu plus tard. Ensuite, nous supprimerons tous mes détracteurs. Je vais le sauver. Je vais retirer ces div autour du bloc principal. Ensuite, nous allons récupérer tout le contenu, couper, et nous le placerons dans le fichier header.html. Nous allons nous débarrasser de cet espace. Nous pouvons supprimer cette double indentation. Gardez ça. Regardez comment notre page d'accueil, notre code HTML sera inséré dans le bloc principal. Ouvrez le fichier index.html, en mettant des accolades doubles et nous allons définir principal, obtenant des virgules doubles inversées. Ensuite, nous allons mettre une étiquette de fin. La première chose que nous allons afficher est un site de points avec un titre majuscule en S dot. Et il saisira le titre du site Web. Ensuite, nous referons quelques accolades doubles et nous ferons du contenu de points avec une majuscule C. Ce que cela fera c'est que lorsque nous créerons du contenu dans un instant, cela va générer cette démarque et il le convertira en HTML pour nous. La nouvelle commande Hugo crée du contenu pour nous et utilise des modèles de sorte que de nouveaux contenus. Voyons donc comment cela fonctionne. À l'époque où nous avons créé le nouveau site. Vous allez nous donner les indications que nous pouvons créer un nouveau contenu avec la nouvelle commande Hugo. Maintenant, c'est la façon dont cela fonctionne. Recherche dans le dossier archétypes, et il utilisera ce fichier, le point de défaut MD comme modèle pour créer notre nouveau contenu. Avant d'aller de l'avant, il y a une chose que j' aime changer et c' est que je devrai changer de brouillon de vrai à faux pour que chaque page que nous créons soit en ligne. Sinon, vous devrez le changer manuellement de brouillon true à dessiner, false pour qu'il s'affiche. J'ai donc enregistré cela dans les archétypes par défaut. Mais le dossier MD, je vais courir, Hugo savait. Je vais suivre sur la caisse est slash underscore index.html et c'est MD de markdown. Alors, lancez ça. Nous allons ensuite jeter un coup d'œil dans notre dossier de contenu et vous verrez que nous avons un index MD. Malheureusement, comme c'est le fichier d'index dans le répertoire racine, peu de gars ne savent pas quel est le titre. Pour l'instant, nous allons juste appeler ça chez nous. Allons ajouter du contenu. Nous devons maintenant créer du contenu. Je vais vous donner du contenu réservé et une version très populaire du contenu de texte réservé. Il s'appelle Lorem Ipsum est intégré, mais malheureusement, par défaut, la version actuelle de Visual Studio Code Emit n'est pas activée pour les baisses de marquage. Maintenant, nous pouvons résoudre ce problème. Si nous allons dans le menu Fichier, nous accédons aux préférences et aux paramètres. Vous pouvez donc voir que le raccourci est Control plus virgule ou sur Mac serait une virgule du Poste de commande. Ouvrez cela, allez dans Extensions. Et la première chose que vous devez faire est si vous regardez sous Exclure les langues par défaut, émettez exclut le markdown. Nous allons donc choisir les règles supplémentaires que nous devons définir quelques options supplémentaires, car nous aurons quelques problèmes. Faites simplement défiler vers le bas. Il est dit montrer une abréviation élargie. Nous devons changer cela en maquette et en feuilles de style. Je dis seulement qu'il n'y aura que des abréviations étendues en HTML, Hamel, Jade slim XML, excellent, CSS, SCSS, SCSS moins installations. Mais il ne fera aucun décompte et c'est le comportement après. L'autre chose que nous devons faire est déclencher l'extension sur onglet. Sauvons-les sur le plan médical pour que nous puissions le fermer. Et maintenant, dans le fichier R Markdown, nous pouvons tester cela s'il appuie sur les cotisations, puis tabulation, vous verrez les émettre en marche. Ce qu'on va faire, c'est qu' on va se réveiller. Et ensuite 100. Et tabulation. Vous verrez que c'est un crédit de 100 mots pour nous. Au lieu de cela, ce que nous pourrions faire, c'est que nous allons essayer Lorem 50 et nous allons le faire deux fois. Placer un espace entre les deux pour créer un paragraphe, supprimerait cet espace supplémentaire à la fin. Bien qu'il soit recommandé d'avoir une nouvelle ligne dans le fichier. Nous allons sauver ça. Je vais maintenant voir comment activer le contenu HTML dans Markdown. Par défaut, il ne vous permet pas de mettre HTML dans votre bouche en tant que fonctionnalité de sécurité, mais de temps en temps, vous ne pourrez pas réaliser ce que vous voulez juste nous avons la syntaxe Markdown, qui nous allons regarder dans un instant. Cela vous permettra également de mettre du contenu HTML, en mélangeant votre markdown. Par conséquent, si vous regardez votre projet en bas, vous verrez un fichier de configuration. Maintenant, l'opéra FAT est YAML. C'est beaucoup plus facile pour les débutants. Nous allons donc renommer ce fichier YAML à deux points. Ensuite, il va falloir modifier le format de celui-ci. Le moyen le plus simple de le faire est donc de mettre en évidence le signe égal et l'espace devant lui. Cliquez dessus avec le bouton droit de la souris, modifiez toutes les occurrences. arrière, et changez cela en deux-points. Désormais, dans YAML, vous n'avez pas besoin d'entourer les chaînes guillemets et de les détecter automatiquement pour que nous puissions supprimer ces guillemets. C'est là que le gars, Allons maintenant activer Markdown. C'est un peu compliqué. La première entrée que nous devons mettre est Mockup. Appuyez ensuite sur Entrée et insérez un onglet en retrait. Nous n'avons pas eu à le mettre dans une entrée pour Goldmark. Goldmark est le moteur de rendu de marquage par défaut actuel utilisé par Hugo. Ensuite, nous mettons dans le rendu le deux-points, puis une indentation de plus. Et c'est l' important, c'est dangereux. Vrai. Très bien, alors sauvegardez-le, revenez à votre index.html et mettons un peu de marquage. Markdown vous permet de créer des en-têtes et de modifier vos textes. Par exemple, en gras, en italique, créez des listes et ainsi de suite vraiment simplement et sans HTML. Je vais fournir ce lien. Pourquoi le cours aurait-il des ressources ? Nous allons nous en occuper quelques-uns maintenant. Par exemple, essayer de faire quelques en-têtes utilisera contenu Abeba en gras ou en italique. Et nous avons déjà le titre du site. Nous allons donc faire un en-tête H trois, faire un piment sur les hachages T3, puis nous appellerons simplement le texte de l'espace réservé. Vous devez interrompre cette frappe. Ensuite, ce que nous allons regarder en gras et en italique. Il faut être prudent. Vous n'êtes pas censé utiliser le gras pour les titres. Personnellement, j'ai activé un dictionnaire en code VS et j'ai créé un en-tête en gras. Il me dira que c'est un problème. Si, par exemple, j'ai du texte en gras, un arrêt de ligne, c'est très bien. Et puis pour l'italique, on ne fait qu'une étoile. Soyez en gras avec des astérisques doubles. Ensuite, nous allons jeter un coup d'œil. On peut dire qu'ils vont simplement faire une inspection. Nous pouvons voir que nous avons un CH3. Nous avons fait les 3.5 chansons et il a créé automatiquement des identifiants pour vos titres pour vous. Il enlève un petit ****** et minuscule tout pour vous et mettez des tirets au cas où dans le prix du ******. Vous avez créé automatiquement un paragraphe pour nous et il est crédité un texte fort ou gras, puis il est crédité le texte italique avec la balise BEM. Ce sont des balises de paragraphe incroyablement pour nous encore, pour toutes les sections de textes, et c'est tout au long du markdown dans Hugo. Maintenant que nous avons la configuration de base, lançons le serveur de rechargement en direct intégré pour vérifier que tout fonctionne comme prévu. Allez dans votre terminal et tapez serveur Hugo, appuyez sur Entrée. Et jetons un coup d'œil à ce qu'il dit. On peut donc dire qu' il a été construit pour le voir. Il y a quatre pages qu'il a construit. Un plan du site, que nous allons entrer dans une autre leçon et attendre des changements. Il est donc activé en direct rechargé. Il y a notre fichier de configuration que nous venons de modifier. Vous voulez un environnement de développement qui fonctionne rapidement et aléatoirement. Et si vous utilisez la commande, vous avez le drapeau de rendu rapide désactivé. Il va reconstruire chaque fichier lorsqu'il détecte une modification. Donc, si vous le contrôlez, cliquez sur ce lien. Vous pouvez ouvrir la page dans un navigateur. Voici notre page dans le navigateur qui aurait rendu le nom du site. Nous avons impliqué notre texte de deux espaces réservés, incliné et sorti Lorem Ipsum. Si nous cliquons et inspectons avec le bouton droit de la souris, jetons un coup d'œil au HTML que vous avez généré. Nous avons donc notre frappe deux et un tag h2. Et vous avez généré automatiquement des identifiants pour nous afin que nous puissions les cibler avec des liens. Il se trouve dans les paragraphes de crédit pour chaque partie de la délimitation et il est utilisé pour cette phrase. Je vais mettre en place des partials et des tags sémantiques pour les envelopper. De retour essentiel au HTML. Notre top de bloc principal dans le Maine et tabulation et qui vous donnera la balise sémantique principale et ce que cela fait, il indique aux moteurs de recherche et éventuellement aux scénaristes qu' ils regardent Contenu principal de l'ISI dans la page. Nous allons le faire pour notre en-tête, nous mettons une balise cachée et cela permet au moteur de recherche de noter que c'est l'en-tête et que c'est totalement les en-têtes et éventuellement quelques liens en mai. Ensuite, pour la photo, nous allons mettre une balise de pied de page. On va traîner ça là-haut. Ouvrez ensuite l'en-tête et le fichier footer.html. Pour l'instant, nous allons juste mettre un peu de textes près de ce qui dit que texte d' en-tête dans le pied indique qu'il s'adapterait pour identifier cela. Oui, il fonctionne réellement. Enregistrez tout cela et revenez sur votre site. Jetons un coup d'œil. Comme vous pouvez le voir, nous avons notre en-tête et notre pied de page. De toute évidence, le formatage n'est pas là où nous le souhaiterions, mais c' est pour les vidéos suivantes. De retour dans la base de HTML, nous allons réparer cette balise de langue. Ce que nous allons faire, nous allons retirer l'EN, mettre des accolades doubles bouclées et nous ferons le langage des points. Dot lang et qui va extraire le code de langue configuré comme ça. Et pour modifier la configuration de votre langue, je pompe votre config.xml. La configuration est le contenu par défaut avec la langue C majuscule. Par exemple, un site au en anglais australien doit être en minuscules le code de langue, vous ne pouvez pas utiliser les majuscules des deux derniers caractères. Ensuite, ouvrez la hanche partielle en termes de titre. Si nous faisons un titre de point avec un T majuscule, le titre de la page apparaîtra. Jetons un coup d'œil. Vous voyez là-haut dans l'onglet « Home qui apparaît maintenant, nous pouvons faire beaucoup mieux que cela. Nous allons faire des points, des points, des titres, puis un tiret, puis le titre. Vous pouvez en voir d'autres. Une autre étape que nous pouvons faire, et s'il s'agit de la page d'accueil, nous supprimerons le tableau de bord de la maison. Si le titre du point, du point, du point. Elle a un espace là-dedans. Nous mettrons nos bretelles bouclées et nous le ferons, sinon c'est chez nous. Ensuite, nous avons ce qui est affiché. Si nous ne sommes pas sur la page d'accueil et nous ajouterons le marquage. Le retour à la maison est-il vrai ? Si nous sommes sur la page d'accueil. Vous y allez. Nous n' affichons pas le titre de la page. Si nous sommes sur la page d'accueil, il suffit d'inspecter notre code HTML. On dira que c' est la langue par défaut de l' anglais américain, de l'anglais. Adhérer au fichier config.xml. Vous pouvez changer cela. Par exemple, je suis en Australie, donc je vais changer cela personnellement en E dans AU ou je pourrais utiliser ENG pour la Grande-Bretagne. Vous pouvez voir que vous avez mis à jour le code HTML. Et il y a une dernière chose que nous devons faire et c'est exact. Certains fichiers CSS et JavaScript externes. Et la raison pour laquelle nous le faisons est qu'il est beaucoup plus facile déboguer votre code s' il s'agit d'un fichier externe. Si vous utilisez des fichiers externes pour CSS et JS, par exemple, si vous utilisez Chrome, il vous indiquera la ligne exacte du fichier où se trouve votre sélecteur CSS ou le bogue de votre fichier JS est glissé. à travers ça. Maintenant, nous allons entrer dans le dossier statique. J'ai pensé à la photo statique, ou peut créer un nouveau dossier appelé JS. À l'intérieur de cela, nous allons créer un fichier appelé main.js. Nous revenons au dossier statique et créons un autre dossier à l'intérieur de celui appelé CSS. À l'intérieur de cela, nous appellerons ça le point principal CSS. Il peut donc être faux. Nous n'allons rien y mettre pour l'instant. Nous devons les importer, aller dans Layouts, puis partials, puis header.html. Nous devons utiliser la balise de lien pour importer la feuille de style. Si nous saisissons un lien et qu'il arrivera avec ses abréviations et la ses abréviations et la meilleure pour nous, nous pouvons faire pour utiliser Lincoln light. Mais si nous utilisons le CSS deux-points de lien, il inclura automatiquement le rail de la feuille de style et inclut également un nom par défaut pour la feuille de style. Maintenant, nous n'allons pas utiliser ça. Nous allons revenir en arrière et utiliser la barre oblique CSS, slash main.css. Et c'est là que se fixe notre fichier. Le dossier statique n'est pas exposé sur le site compilé. Je n'ai besoin que des chutes dans le dossier statique. Merci. Merci. Nous devons importer le fichier JavaScript. Vous pouvez le mettre sur la photo. Mais le problème est que si vous regardez dans la base de ce code HTML, nous verrons que notre pied de page est partiellement placé dans les balises de pied de page. Nous ne voulons pas que notre importation JavaScript existe dans ce domaine. Ce que nous allons faire, nous allons créer une nouvelle partie, nous appellerons cette nouvelle photo de script partielle. Et nous utiliserons cette vidéo uniquement pour les scripts. À l'intérieur de ce script, nous allons faire notre script important. Donc, si nous saisissons un script puis tabulation, ce n'est pas tout à fait là que nous devons définir le type de source par la suite . Vous avez mis une colonie. Vous pouvez même cliquer sur Tab maintenant car il n'y a qu'une seule option disponible, nous pourrions taper SRC ou une partie de celui-ci finira avec une source pour le script peut être slash js slash main.js. Et nous allons sauver ça. Maintenant, nous devons importer cette partie, donc je retournerai à notre base sous le pied de page. Nous ferons nos doubles accolades bouclées et une fonction partielle. Et puis le pied de page Script. Vous devez fournir l'arrêt complet pour pouvoir accéder à l'ensemble des contextes du site. Marshall. Lançons le serveur et vérifions que tout fonctionne. Donc, nous allons taper le serveur do you gars. Ensuite, nous contrôlerons. Cliquez sur le lien. Revenons à une mise en page de site vraiment basique. Cliquez avec le bouton droit et inspectez. Tout d'abord, allez dans la tête. Vous pouvez ignorer ce premier script car c'est la bibliothèque qui charge le serveur Hugo. Mais ensuite, nous allons faire défiler vers le bas et vous verrez que nous avons le lien vers notre fichier CSS. Et si nous continuons à faire défiler vers le bas, vous verrez ci-dessous le pied de page, nous avons notre fichier JS. Si nous allons dans les sources, vous direz les deux fichiers, ils sont tous les deux insérés dans le site, ils sont actuellement vides, mais nous leur ajouterons insérés dans le site, ils sont actuellement vides, du contenu dans les leçons ultérieures. C'est vraiment important. Vous avez réussi à chaque étape de ce projet. Avant de passer à autre chose, si vous n'êtes pas sûr, veuillez revenir en arrière et vérifier. Sinon, il y a un lien ci-dessous. En cas de discussion, je ferai de mon mieux pour vous aider dès que je pourrai vous voir dans la prochaine leçon. 5. Ajouter Bootstrap 5: Bienvenue dans la prochaine leçon. Ce champ, il sera beaucoup plus court que la dernière classe. Maintenant, il est important que vous compreniez tout ce qui se passe dans la dernière classe si vous avez encore des questions et que vous ne pouvez pas résoudre le problème. Il y a une section de discussion ci-dessous et je ferai de mon mieux pour revenir vers vous dès que possible. cette classe terminée, vous pourrez ajouter des importations Bootstrap, CSS et JS à votre projet Hugo. La première chose que nous allons faire est d'aller le site Web Bootstrap cinq et de trouver les informations. Ils doivent être très prudents car si vous utilisez une recherche Google, vous pouvez vous retrouver sur le site Web Bootstrap quatre ou trois. Et lorsque vous travaillez avec bootstrap cinq, qui est une version actuelle, nous avons un document et l'introduction, vous verrez qu'il y a un code CSS ici que vous pouvez retirer de leur CDN, ce qui est le moyen le plus simple de le faire fonctionner. Même chose avec le SIG. Vous pouvez y accéder depuis leur CDN. Maintenant, si nous continuons à faire défiler vers le bas, vous verrez cela comme un modèle et cela explique comment toutes ces importations s'intègrent dans le fichier HTML plus large. Nous avons déjà configuré ce fichier. Nous prenons simplement le composant CSS et le mettons à l'intérieur de la tête. Ensuite, nous allons prendre le composant GPS et le placer dans le pied de page. Nous allons commencer par le composant CSS copiera également le commentaire. C'est un rappel de ce que c'est. Nous allons copier ça. Ensuite, nous allons dans le dossier Mises en page et les partiels, et nous irons dans notre tête. Ensuite, ci-dessous notre lien vers notre feuille de style. Les styles personnalisés colleront dans le lien le CD Bootstrap CSS phi there. Et nous allons sauver ça. Copiera ensuite tout leur code JavaScript, y compris les commentaires. Ensuite, nous allons dans notre nourriture de script ou en dessous de notre fichier JavaScript personnalisé. Nous allons coller leur code et nous pourrons le mettre en surbrillance et utiliser l'onglet Maj pour supprimer ce retrait. Il existe deux options. Nous allons juste choisir la première option pour l'instant. Je vais enlever toute cette épice supplémentaire. Et si le serveur Hugo n'est pas déjà exécuté à partir de la dernière vidéo, le terminal pompant le serveur Hago et exécute ce contrôle. Cliquez sur le lien. Ensuite, nous vérifierons que tout fonctionne. Nous allons donc cliquer avec le bouton droit de la souris et inspecter la tête. Vous pouvez voir que nous avons mis notre lien vers le fichier CSS, puis nous allons faire défiler vers le bas du pied de page, et vous verrez que nous avons également le fichier JS. C'est tout pour cette vidéo. J'ai promis que ce sera court. N'oubliez pas que si vous avez des questions, il y a une section de discussion ci-dessous. Sinon, je vous verrai dans la prochaine leçon. 6. Page d'accueil avec grille, boutons et design responsive: Bienvenue dans la prochaine leçon. C'est ici que nous commençons à créer du contenu avec Hugo et bootstrap. Vous devrez télécharger les fichiers de cette leçon dans la section Ressources, vous pouvez accéder à l'image que nous allons utiliser à partir de la photo statique. J'y reviendrai plus tard. Si vous rencontrez des problèmes, vous pouvez toujours regarder mon code dans les fichiers que vous allez télécharger. Une fois cette vidéo terminée, vous pourrez utiliser le bootstrap suivant, cinq classes, la grille, les boutons, classes d'images réactives et l'espacement. Vous pourrez également combiner ces éléments pour créer du contenu pour des sites Web. Vous pourrez également utiliser instructions conditionnelles si nous l'avons fait. Ici. La première étape, bootstrap cinq grilles. Bootstrap utilise un système de conteneur, ligne et de colonne, et vous devez utiliser ces éléments dans cet ordre. Parlons donc de notre projet qui va mettre en place ces trois éléments ? Et nous allons commencer. Ouvrez le dossier Mises en page et l'index ou le code HTML. Et vous verrez d'après les leçons précédentes le titre du site Web et le contenu du fichier de markdown. Nous allons laisser ça pour l'instant. Je vais travailler en dessous. Nous allons commencer par notre conteneur. Nous tapons donc div dot container et appuyez sur tab, et cela créera le div pour vous avec cette classe automatiquement appuyez sur Entrée, puis div dot rho dans. Maintenant, nous devons les appeler. Donc, si vous tapez div dot col, nous pouvons obtenir cela, mais nous ne voulons pas seulement une seule colonne, nous voulons deux colonnes espacées de manière égale. Maintenant, pour que nous fassions le Col Dash Six. Mais sur les petits écrans, nous ne voulons pas diviser l'écran en deux. Nous voulons le diviser uniquement sur un écran aussi grand, défini comme grand ou plus grand. Et je vais vous montrer ce que signifie grand dans une seconde. Je vais donc appeler Dash, Dash Six. Nous en voulons deux. Vous pouvez répéter vous-même ou vous pouvez utiliser star t2 et c'est pour l'image. Il est ensuite installé par défaut dans Visual Studio Code. Je vais toucher Tab. Ensuite, anti, et je peux ensuite insérer mon contenu là-dedans. Et puis la même chose pour la seconde. L'Internet vers notre contenu va disparaître. Nous avons maintenant une rangée et nous avons deux colonnes et une largeur uniformément égale. Mais seulement à l'écran que la classe est plus grande ou plus grande. Jetons un coup d'œil aux points d'arrêt dans Bootstrap. Je suis ici sur la page des points d'arrêt Bootstrap sous mise en page. Si vous faites défiler vers le bas, vous verrez des points d'arrêt de SAM pour XT Excel petit, moyen, grand et excellent. Ainsi, à l'écran sur l'écran non ligne deux pixels de large ou plus grand sera divisé en deux avec deux colonnes. Si c'est plus petit que ça. Nous n'aurons qu'une seule colonne. Laissez-moi donc empiler verticalement. La prochaine chose que nous allons faire est de placer une image. Vous vouliez cette chronique. Nous allons utiliser la classe d'images réactives bootstrap cinq pour cela. Je suis sous, sous la section contenu des documents Bootstrap, je veux dire images. Et il enregistre si nous utilisons la classe de l'unité de fluide de tiret IMG a besoin d'un point qui indique que si vous utilisez un fichier CSS CSS, il attribuera automatiquement il attribuera automatiquement les propriétés de la largeur maximale à 100%. C'est votre image qui changera sa largeur en fonction de l'espace disponible. Et la hauteur sera automatique et elle sera par rapport à la largeur. Allons y aller. Dans la première colonne, je vais taper dans IMG. Puis Tab. Vous nous donnerez une source, ce que nous ferons dans un instant et un texte alternatif dans un instant. Tout d'abord, nous allons regarder la classe. La classe est égale à des virgules inversées. Et si nous enseignons avec IMG Dash Fluid, cela redimensionnera automatiquement l'image pour nous. Maintenant, en ce qui concerne la source, vous pouvez télécharger ci-dessous les fichiers de cette vidéo, mais terminés. Sinon, il y a le lien vers l'image elle-même. Dans le dossier statique. Créez un nouveau dossier appelé IMG. Ensuite, à l'intérieur de ce dossier, vous devrez coller dans l'image que vous pouvez coller à partir de votre code Studio individuel de l'Explorateur de fichiers ou du Finder. Vous devez cliquer avec le bouton droit de la souris sur l'image et aller chercher dans le dossier et la coller là-dedans. J'ai mon image, je la colle. Je ne vais pas retourner à la source. Comme nous l'avons indiqué dans la vidéo précédente avec les importations CSS et JS, nous ne faisons pas référence à un dossier statique. Ce sont les dossiers à l'intérieur de l' statique qui apparaîtront dans votre site Web compilé et annuleront barre oblique IMG barre oblique Bootstrap thèmes point PNG. Pour le texte alternatif, je vais le nommer des thèmes Bootstrap. Je vais ajouter quelques autres cours. Tout d'abord, je vais ajouter une classe du bloc, qui signifie bloc d'affichage. Je vais utiliser la commande de tiret MX. Ce qui fait, c'est qu'il crée une marge de chaque côté, x, c'est-à-dire le plan horizontal. Imaginez de chaque côté de votre image et qu'elle est égale à celle qui centre votre image, mais vous devez également utiliser la classe de blocs d'affichage. Tout cela ne fonctionnera pas. Nous arrivons à présent à créer des résultats et du contenu dans notre deuxième colonne. Deuxième colonne. Je vais taper la hauteur 1. Puis tabulez. Et à l'intérieur, je vais importer le titre de cette page. À l'intérieur de cette frappe plutôt que d'importer le titre du site ou le titre de la page, je vais essayer de personnaliser le paramètre, que nous définissons des paramètres pour les paramètres personnalisés. Et ça va frapper. Et puis je vais fermer mes crochets et je vais vous montrer comment l' insérer dans vos pages avant dans un instant. Ensuite, sous le H1, je vais créer un paragraphe avec P. Et à l'intérieur, nous allons mettre notre contenu pour pouvoir simplement couper et coller du contenu dans ce paragraphe. Et je vais supprimer ce titre de point, de point, de point en haut. Que va-t-il se passer ici ? Nous avons divisé notre page en deux avec nos deux colonnes. Nous allons avoir notre image à gauche et maintenant cocher à droite. Si nous sommes sur un écran de petite et de grande taille, qu'il soit très petit, petit ou moyen. Nous allons avoir l'image en haut, le texte ci-dessous dans l'ordre du HTML qui définira qu'avec Bootstrap, nous devons toujours écrire du HTML et CSS sans appareils mobiles d'abord, c'est comme ça qu'il est aligné ici. Nous avons notre photo en premier et nous prenons la deuxième. Ensuite, nous pouvons ajuster la mise en page pour les écrans plus grands, allumer. Cela aide au référencement, optimisation des moteurs de recherche et vous obtiendrez un bien meilleur classement sur Google si vous concevez votre site Web pour qu'il convienne aux appareils mobiles appareils d'abord, ce que je veux que la deuxième colonne affiche en premier sur les écrans que LIGO est plus grand. Et la façon dont nous faisons ça, son cours de musique de Bora, dash, LG, dash, d'abord, un écran au l-o-g ou plus grand. Cette colonne apparaîtra en premier. Jetons un coup d'œil à l'insertion de quelques boutons. Maintenant. Sous le paragraphe que nous venons d'insérer, nous allons créer un blanc. Stephen va caler cette lumière, appuyer sur Entrée, puis nous allons créer un bouton. Maintenant. Il n'est pas nécessaire de le faire, mais il est facile de spécifier l'ID de requête pour spécifier le type de bouton pour être un bouton standard. Cela n'a pas vraiment d'importance pour le moment. Mais s'il s'agissait d'un formulaire qui serait soumis par défaut dans mon bouton de mise en haut, nous nous débarrassons de ces comportements ne sont pas obligatoires, mais il a écrit toute la journée pour le faire. Maintenant, par défaut, ce bouton ne s' affiche pas comme nous le voulons. Nous devons donc ajouter la classe égale à la classe bootstrap pour le bouton btn. Je vais copier et coller tout ce que nous venons de faire ci-dessous. Maintenant, le premier bouton, nous allons en faire un bouton principal par défaut, sera bleu, donc nous n'avons pas eu à ajouter BTN primaire. Celui ci-dessous, je vais en faire un bouton secondaire, mais aussi décrit par défaut qui sera gris. Nous avons donc mis btn dash secondaire parce que je voulais que ce soit un bouton contour, pas un bouton solide. Je dois commencer par mettre le mot décrit en premier. La prochaine chose que je vais faire, c'est que je vais faire ces gros boutons. Maintenez le bouton Alt enfoncé et cliquez sur les deux boutons et placez BT dans, tiret, LG et une épice. Pour le texte du bouton et le lien. Je vais faire référence à certains paramètres personnalisés dans le markdown des pages. Donc pour faire ça, comme nous l'avons fait référence, point params dot Hitting, il a commencé à mettre quelques accolades bouclées et ce sera des params de points avec un point P point BTN majuscule un pour bouton, un point txt. Je vais vous montrer comment nous l'avons mis en place dans une minute. Ensuite, copiez-le et collez-le dans le bouton ci-dessous. Et je le change pour qu'il y ait des coups. Ensuite, copiez-le et collez-le à nouveau. Et nous allons mettre un lien, donc HREF équivaut à des commentaires intégrés. Ensuite, je le change en URL. Je vais copier et coller. Tout ce lot sera battu en URL à deux points. C'est génial. Nous devons maintenant configurer le bouton de contenu, un bouton txt point pour pointer le bouton txt, un bouton URL vers URL, entrer dans le contenu, puis ouvrir index dot md. J'ai déjà du contenu ici. On va changer ça dans une seconde. Tout d'abord, nous allons mettre notre guérison en place et avoir des paramètres personnalisés. Tout ce que vous avez à faire, c'est tout simplement en haut et à marquer cette position. Le titre de cette page. On va commencer par Bootstrap. Et recherché. Ensuite, je vais supprimer un de ces paragraphes parce que c'est un peu trop de texte pour ce que nous faisons. Et je vais me débarrasser de ce partenariat métallique audacieux. Débarrassez-vous de cette marque là-bas aussi. Les boutons sous le titre, nous allons insérer d' autres paramètres personnalisés et nous allons faire un deux-points BTN puis un onglet. Et nous ne voudrions pas envoyer de SMS, je pense que pour le premier bouton, il y aura un lien vers l'URL Bootstrap cinq documents. Nous allons coller ça dedans. Et pour les battements aussi, nous publions un texte qui sera lié aux documents et à l'ARRA. Nous allons coller ça dedans. Nous allons le sauver. Nous allons d'abord nous débarrasser de cette ligne supplémentaire en bas, vous ne devriez avoir qu' une seule ligne blanche et innover, marquer et tomber. Et puis nous irons au terminal, le nouveau terminal et le serveur crétin contrôleront le clic sur le fichier. Et nous parlerons du serveur ego, puis nous contrôlerons le clic sur l'URL. Vous pouvez voir que nous avons toujours un en-tête et un pied de page fictifs, mais nous les laisserons pour plus tard. Et pour l'instant, nous avons notre frappeur qui va juste inspecter. Et comme vous pouvez le constater, maintenant que la page est rétrécie, l'image est en haut, le contenu en bas. Et au fur et à mesure que nous l'élargissons au point où il devient plus grand que le grand point de rupture vous pouvez le voir, puis place l'image à droite, qui est l'inverse de ce qu' est le HTML et vous met un texte. et ascenseur. Donc, si nous regardons dans le HTML, nous avons notre H1. Ensuite, en dessous, le paragraphe que nous avons fait, hé les gars, plutôt ce contenu pour nous à partir du fichier markdown. Ensuite, allez dans notre div et nous avons nos deux boutons. Le premier est bleu et solide, qui est le BTN primaire, également grand, et le second est un gris creux et c'est ce qu'on appelle BTN, détour secondaire et secondaire par défaut, couleur grise. Et c'est aussi un gros bouton. Les étapes suivantes, ajouter des marges et des marges aux boutons, revenir à l'index ou fichier HTML et aller au premier bouton. Ensuite, nous allons maintenir la touche Alt enfoncée et cliquer dans une seconde Kusto pour appliquer la même classe aux deux. Et nous ferons PX pour ce que ça va faire. P pour le rembourrage x correspond à l'axe horizontal, à gauche et à droite. Et c'est le montant que nous allons appliquer. Le rembourrage sera à l'intérieur du bouton à gauche et à droite des tics. Plus d'espace là-bas. La dernière classe que je vais ajouter est d'ajouter une marge à la fin du premier bouton. Et cela signifiera qu'il y a un peu d'espace entre eux. Pour ce faire, nous faisons une maîtrise pour la fin de la marge. L'opposé de la marge dans ces marges est MS pour margin stop. Je vais sauver ça. Ensuite, nous allons consulter le site. Nous allons cliquer avec le bouton droit sur le premier bouton et l'inspecter. Vous pouvez voir que nous avons notre px pour lequel il est rembourré de chaque côté du texte. Et si vous faites défiler cette partie des outils de développement vers le bas, vous pouvez constater que notre rembourrage est de 24 et le côté qui augmente la taille du bouton. Nous avons également obtenu un peu de fin de huit, puis nous ajoutons un peu d'espace supplémentaire entre eux. Je vais ensuite inspecter le bouton par seconde. Vous verrez également ce que cette marge de 24 pour allonger légèrement le bouton. Cette dernière étape est très importante et c'est l' affichage conditionnel des boutons. Jetons un coup d'œil. À l'intérieur de ces deux boutons, ils s'appuient sur l' URL du point de terminaison PBT pour les boutons un et deux, et sur le point txt pour les boutons un et deux. Encore une fois, passons à index dot md, essayons de désactiver l'un de ces paramètres et de voir ce qui se passe. Vous ne verrez pas de texte à l'intérieur du bouton 1 et cela semble assez moche. C'est vraiment une erreur. Nous ne le voudrions pas sur notre site s'il n'y avait pas de texte. Je ne vais pas désactiver l'URL du deuxième bouton ici avec la clé de hachage parce que nous travaillons dans YAML. Vous pouvez voir sur le second sous H ref, il est dit inconnu, c'est aussi un peu une erreur. Ce que nous allons faire, c'est que nous allons configurer Hugo, que si l'un de ces paramètres est manquant, le bouton ne s'affiche pas ou si vous désactivez l'ensemble du lot, le bouton est blanc. Tout d'abord, je vais utiliser la commande width. Et nous avons pensé que c'était conditionnel. Il recherche le paramètre que vous avez inséré. On va donc mettre des paramètres de points, un point BTN. Donc, si des tiques entre les deux sont prévues dans un. Cela signifie alors vrai. Et il va afficher ce qu'il y a à l'intérieur des supports. Nous allons donc entrer dans un bouton et nous mettrons une balise de fin, si quelque chose est présent dans BT et un. Et actuellement, nous avons une URL présente, qui retournera true. Et ça va maintenant mettre ces données en fonction de cette information dans le contexte de sens. Nous pouvons effacer ce texte ici, params dot BTN one parce que nous l'avons déjà fourni ici en blé. En fait, cette partie, cela ne fonctionnera pas que params dot btn un point txt parce que cela n'existe pas à l'intérieur de points params point BTN un, mais dot txt existe là-dedans et dot URL le fait. Sauvons ça. Et nous ne devrions pas vraiment voir de changement. Jetons un coup d'œil. Rien n'a changé, tout fonctionne, mais nous avons toujours le problème de l' absence de texte et c'est parce que nous avons désactivé le texte. Revenons en arrière et mettons une déclaration conditionnelle. Et c'est si point txt, si c'est fini. Nous avons donc deux choses qui se passent IV et point txt, URL. Ensuite, cela se produira et nous devrons y mettre un apport. Et après cela, si a, le point txt n'est pas présent ou l'URL du point n'est pas présente, alors ce bouton ne s' affichera pas. Jetons un coup d'œil. Comme vous pouvez le constater, ce bouton a disparu. Réactivons les paramètres et le bouton doit réapparaître. Retournez dans le fichier Markdown et je réactiverai le texte. Je vais réactiver le bouton en URL. Nous allons sauver ça. Maintenant, nous avons les deux textes et vous êtes tous présents. C'est à l'intérieur entre un. Je vais jeter un coup d'œil. Vous y allez. Nous avons notre bouton, nous corrigerons notre code HTML pour le deuxième bouton, puis nous ferons un autre test. Je vais copier ce code. En bas, ici. Je vais mettre mon marquage. Je vais changer ça pour devenir TM2. Je vais supprimer le code que nous avons déjà spécifié. La largeur. Nous avons mis un marquage N pour l'instruction if. Sauvegardons cela et consultons le site Web. Nous avons les deux boutons qui fonctionnent juste pour le test final, nous allons désactiver l'un des paramètres du deuxième bouton. Et puis je vais vous montrer comment on peut juste éteindre complètement les boutons correctement. Donc, en passant au markdown, je vais simplement désactiver l' URL du deuxième bouton. Vous pouvez le voir disparaître. Et voyons comment désactiver correctement le bouton. Désactivez correctement le bouton. Tout ce que vous avez à faire si nous mettons simplement en évidence toutes ces primitives et c'est la bonne voie. Le raccourci et Visual Studio Code sont Control K, C. Ensuite, commandez ces trois lignes une fois pour vous. Comme vous pouvez le voir, pour retirer le bouton. Et c'est probablement la façon intentionnelle de désactiver les boutons. Contrôlez KU pour décommenter. Décommentez le bouton. Il est donc de nouveau activé, et nous allons l'enregistrer et nous sommes prêts pour le prochain tutoriel où nous cherchons à personnaliser l'affichage de ce bloc que nous venons de créer en Birmanie. Vous avez eu des problèmes avec n'importe quelle partie de cette leçon, rembobinez et réessayez. Et si vous rencontrez toujours des problèmes, il y a un lien ci-dessous pour les discussions et je ferai de mon mieux pour vous aider dès que possible est vraiment important. Vous comprenez tout ce qui fait la leçon avant de continuer avec la suivante. voit dans la prochaine leçon. 7. Personnaliser la page d'accueil avec Bootstrap 5: Bienvenue dans la prochaine leçon. Dans cette leçon, nous allons personnaliser le contenu que nous créditons auparavant à l'aide des classes Bootstrap. Une fois cette leçon terminée, vous serez en mesure de limiter largeur du conteneur bootstrap à cinq. Être capable d'utiliser les classes de gouttières, de rembourrage et de marge Bootstrap. Pour justifier le centre du contenu en ligne, nous avons dû utiliser les classes Grid et GAP. La première étape consiste à limiter la largeur du conteneur, mais uniquement pour de très grands écrans. Il faut revenir dans le point d'index, le fichier HTML de la leçon précédente. Et à l'intérieur de la classe de conteneurs nous allons ajouter la classe du Col Dash XX L. Ce que cela va faire sur les écrans de largeur XX L, cela va limiter le conteneur à la largeur de huit. Maintenant, bootstrap utilise 12 unités. Nous utilisons huit sur 12 de ces unités. Jetons un coup d' œil à ce que signifie XX L. Si notre écran est composé de 1400 cornichons ou d'eau, la largeur sera de 1 12e. La prochaine étape consiste à justifier et à apprendre le contenu. Nous allons le faire sur notre rangée afin que les deux colonnes soient alignées sur le Père Noël et justifient les centres centrés dans les directions horizontale et verticale. Si vous regardez les documents Bootstrap en quelques clics dans les utilitaires, vous verrez que pour justifier le contenu, vous devez activer le cours d flex ou display flex. De plus, si vous faites défiler vers le bas pour aligner les éléments, vous verrez également que vous devez activer d flex. Revenons donc au projet et examinons quelques éléments justificatifs et alignés. Nous voulons que notre image soit affichée à la fois centrée sur l'axe vertical et horizontal. Maintenant, vous n'avez pas besoin de mettre d flex dans la ligne, car la ligne est déjà activée. Ce que nous utilisons alignez les éléments au centre et justifiez. Centre de tableau de bord de contenu. Je vais mettre le sel sur un écran plus grand. Vous pourriez avoir du mal à voir Lacey si vous êtes sur un appareil mobile comme sa résolution assez grande. Mais actuellement, la largeur est inférieure à 1400 pixels. Et c'est l'affichage original prévu du site. Vous pouvez voir un peu de rembourrage à gauche et à droite lorsque nous augmentons et diminuons la taille. Mais c'est le comportement Bootstrap par défaut si vous utilisez le conteneur par défaut, si nous augmentons la largeur à plus de 1400 pixels, vous verrez qu'il s'accroche soudainement dans cet espace ici, sur le côté, et cela contraint notre conteneur pour que le contenu ne devienne pas trop gros car nous ne voulons pas que ce bloc soit la largeur totale de la page s'il s'agit d'un grand écran et si nous survolons le conteneur, vous verrez qu'il y a une grande quantité de rembourrage de chaque côté. Si nous passons au CSS, vous verrez que nous avons une largeur minimale à 1400. C'est la requête média et vous avez dépassé 1400, utilise des clics pour limiter la largeur à 66%, soit huit douzièmes, j'ajouterais 12 colonnes. Les villes ont un comportement étrange après, parce que nous ne voulons pas que ce bloc que nous avons créé soit trop large sur grand écran, comme vous pouvez le constater, il a l'air plutôt bien sur grand écran. Et si nous diminuons à moins de 4800, cela a l'air plutôt bien sur un écran plus petit. Nous allons maintenant envisager d' ajouter du rembourrage et des gouttières. Et c'est le rembourrage. Nous allons créer un espace au-dessus et au-dessous la rangée et les gouttières constituent un espace générique complet. En allant dans votre fichier index.html sur la div pour la ligne à la fin de celui-ci, ajoutez P dash f5. Cela va ajouter un peu de marge au-dessus et au-dessous de la ligne, aura un peu d'espace dans la ligne et potentiellement la page de barre de navigation et un peu d'espace sous la ligne et potentiellement tout contenu futur. Nous allons également ajouter g dash f5 pour ajouter une gouttière tout autour. Si nous regardons notre rangée, vous direz que nous avons notre rembourrage P Y5 en haut et en bas, et nous avons spécifié G5. Nous descendons dans la colonne, vous verrez que nous avons la Gatorade, le côté en vert. Cela se traduit par des vents rembourrés, la façon la plus simple de travailler avec bootstrap. Regardez maintenant la création différentes tailles de colonnes à différents points de rupture. C'est pour notre image spécifiée appeler LG G6 au grand point d'arrêt, la colonne de l'image sera six. Regardons la taille initiale sous la recherche. On va donc faire une boîte Col Dash. Maintenant, c'est pour le point d'arrêt très petit. Nous ne spécifions jamais l'excès, nous le laissons de côté et c'est la valeur par défaut dont le bootstrap, facile mobile d'abord. S'il s'agit d'un petit appareil, appelez SAM. Nous voulons que ce soit à l'échelle de l'État, soit huit sur 1012. Colonnes larges sur un petit écran. Ensuite, pour beaucoup jusqu'à grand, puis pour Lodge et plus gros, ce sera six sur 12, donc la moitié de l'écran. Alors, gardons ça. Jetons un coup d'œil, cliquez avec le bouton droit et inspectons. Nous allons le ramener à la plus petite taille. Et nous allons cliquer sur la première colonne, qui correspond à notre image. Et vous verrez qu'il utilise la colonne dix, qui représente 83 % de la largeur de l'écran. Vous avez ces barres vertes de chaque côté. Nous allons ensuite le faire glisser plus gros et nous verrons qu'il a changé. Nous avons maintenant atteint le petit point de rupture et il affiche maintenant 66 % car sur ce grand point d'arrêt, nous ne voulons pas que l'image soit trop grande. Ensuite, nous atteindrons le grand point d'arrêt. Vous verrez qu'il est passé à six, soit la moitié de la largeur de l'écran. Vous avez aidé à la rangée ? Vous verrez que nous avons le PY cinq, qui a un rembourrage au-dessus et en dessous en vert. Et si vous allez dans la colonne, vous verrez qu'il y a du rembourrage à gauche et à droite, et cela provient de la gouttière. Le prochain ABG utilise la grille et l'écart pour afficher les boutons sur un appareil mobile. Maintenant, à l'origine dans Bootstrap, si vous vouliez afficher un bouton comme toute la largeur de son conteneur, c' est-à-dire dans Bootstrap quatre, vous utiliseriez un bouton, une classe de boutons de bloc. Mais dans Bootstrap cinq, nous devons utiliser la grille D pour la grille d'affichage, puis l'écart pour spécifier l'espace entre eux. Allons donc y aller. Il y a une div qui s' enroule autour des boutons au lieu d' avant à l'intérieur qui spécifiera la classe. Ensuite, nous utiliserons d dash grid pour la grille d'affichage. Ensuite, nous utiliserons un écart de deux. Donc Gap Dash T2. Maintenant, ça va bootstrap à partir de l'absence d'offre. Il s'agit donc d' afficher un mobile, mais nous ne voulons pas que cela se produise. Plus les points d'arrêt sont grands. Comme vous pouvez le constater, cela change le point d'arrêt du lodge. Nous allons donc faire d dash, LG, Dash, Flux. Au grand point de rupture. Il va passer de la grille d'affichage à l'affichage flexible au-dessus du grand point d' arrêt et tout s' affiche comme d'habitude, et c'est avec le flux. Mais si nous descendons en dessous de grande taille, vous verrez que nous avons notre disposition en grille avec un bouton de pleine largeur, mais nous avons un problème ici et c'est la marge à la fin de ce bouton. Donc, si je survole ce bouton, vous verrez qu'il y a cette marge orange à droite du bouton. Et c'est parce que nous avons le cours dans un tableau de bord T2. Nous pouvons arranger ça. Nous pouvons faire un aperçu de Carlo si vous le souhaitez. Nous pouvons faire MOI Dash LG, Dash T2. Comme vous pouvez le voir ci-dessous LG, il n'y a pas de marge, mais si nous augmentons au-dessus de LJ, nous avons cette marge. Revenons à Hugo et résolvons ça. Nous allons donc entrer dans notre premier bouton. Nous voulons obtenir notre marge, donc nous ferons un tableau de bord LG réparé. Maintenant, il y a de l'espace sur ce point d'arrêt moyen pour avoir les boutons côte à côte. Nous allons donc le régler de manière à ce que les boutons soient alignés verticalement uniquement sur un plus petit plus bas . Retournez ici et nous allons régler le flex pour qu'il se produise à MD et plus haut. Ensuite, nous définirons notre marge pour qu'elle ne s'applique qu' à MD ou plus. Nous allons sauver ça. Comme vous pouvez le constater, nous sommes actuellement chez MD. Nous sommes verticaux sans image et sans textes, mais nos boutons sont côte à côte. Nous allons descendre au petit point d'arrêt. Vous verrez qu'ils sont verticaux, tout est vertical. Et ensuite, nous allons atteindre le grand point de rupture. Vous verrez que nous avons la mise en page côte à côte pour tout. C'est tout pour cette vidéo. Si vous avez de nouveaux problèmes, rembobinez-le et faites de votre mieux. Sinon, il y a la discussion ci-dessous et j'essaierai d'y revenir le plus rapidement possible. Sinon, vous pouvez accéder à la section Ressources et télécharger le code de cette leçon et faire de votre mieux pour déboguer ce que vous avez fait. Et je vous verrai dans la prochaine leçon. 8. Bootstrap 5 Cartes et Itération (boucle) avec gamme: Bienvenue dans la prochaine leçon. Nous allons créer cinq cartes bootstrap, et nous allons générer des membres en itératant sur les données avec la fonction plage de Hugo, vous aurez besoin de quelques images pour cette leçon. Si vous accédez à la section Ressources, vous verrez un dossier zip pour cette leçon. Si vous l'extrayez, vous trouverez les images requises dans le dossier statique. Une fois cette leçon terminée, vous serez en mesure de créer une carte à l'aide de fichiers Bootstrap, de classes utilitaires. Vous seriez en mesure de créer des données pour différentes cartes dans la première page. Et vous seriez en mesure de générer plusieurs cartes en itératant sur les métadonnées avant des pages à l'aide de la fonction range de gars. La première chose que nous allons faire est de créer une carte en utilisant Bootstrap cinq classes utilitaires. La première chose que nous devons faire est d' ouvrir notre fichier index.html. Nous allons créer quelques sections et ces HTML, cinq balises sémantiques. Nous avons donc enseigné dans une section et un onglet. Ensuite, nous allons couper et coller l'intégralité du contenu de ce que nous avons créé lors de la dernière leçon. Nous allons couper cela avec Control ou Command X et le coller dans. Et nous allons ajouter une classe juste au cas où je devrais cibler cela à l'avenir avec CSS, nous voulons modifier cette section particulière pour qu' elle ne soit pas une classe, et nous l'appellerons héros. Utilisez ensuite le raccourci Alt Shift F to Formater. La mise en forme est correcte. Ensuite, nous allons créer une nouvelle section pour cette vidéo. Encore une fois dans une autre section, les tags. Nous allons donc saisir la section et l'onglet. Ensuite, nous devons créer le conteneur, la ligne et la colonne. Faites ce conteneur. Tab, tabulation div dot tab. Cette colonne particulière. À ce stade de la vidéo, nous allons diviser l'écran en trois, afin d'avoir trois cartes. Maintenant, si vous divisez 12 par trois, vous en obtenez quatre. Si nous ne voulions avoir lieu que si l'écran est moyen, le point de rupture moyen ou plus grand, nous ne voulons pas essayer d'en écraser trois dans un petit écran. Ajouter Dash, MD, tiret quatre. Jetons un coup d'œil au code de la carte sur le site Web Bootstrap docs sous les composants que nous avons de la carte. Il suffit de faire défiler vers le bas et à partir du premier exemple ici, c'est ce que nous essayons de créer. Nous allons copier ce code, le coller dans notre colonne. Et nous utilisons Shift Alt F pour corriger le formatage. Maintenant, cette partie est la balise de style. Nous ne voulions pas cela parce que nous allons commencer par purement nous avons classes CSS plutôt que des remplacements de style. J'aimerais également appeler des styles en ligne. Dans la classe de l' image, nous allons ajouter du liquide IMG pour tableau de bord dit que l'image sera redimensionnée pour nous en fonction de l'espace disponible. Nous n'allons pas nous inquiéter du texte alternatif pour l'instant. Nous allons mettre la source de l'imagerie. Vous devez maintenant télécharger les fichiers de cette leçon et extraire les images de l'espace réservé complet de ce fichier zip. Ensuite, collez dans une pièce où vous ne pouvez pas coller directement du code Visual Studio. Vous devez ouvrir le dossier d'images avec l'explorateur de fichiers, découvrir et le coller. Il y a mes quatre images réservées. Je vais revenir sur la source et mettre la barre oblique IMG slash place holder un point JPEG pour correspondre à ce fichier. Je laisserai tout le texte par défaut et le lien par défaut pour le bouton. Mettons un titre en première place et nous nous réveillons aussi copiez-les et collez ces trois fois, deux fois de plus. Mettons un en-tête et nous copierons et collerons la colonne deux fois de plus. Nous avions donc un total de trois colonnes. Et puis au-dessus de la ligne et en dessous du conteneur, nous parlerons de vous, et div dot col fera notre cap, notre H2, mais nous utiliserons une taille de police d'un, donc nous utiliserons la taille de notre H1, mais nous allons utiliser la taille de notre H1, mais nous Je vais utiliser une balise H2 car c'est la deuxième plus importante frappe sur la page. Pour ce faire, nous faisons un point FS Dash One. Il s'agit d'une classe Bootstrap pour la taille de police 1, qui est un en-tête une taille de police placera également un peu de rembourrage en dessous. Donc, on va faire le point p, b tiret trois. Pour l'instant, nous allons mettre un en-tête manuel et ce sera hors service. Sauvons-le et jetons un coup d'œil. C'est superbe, mais je pense que nous devrions envoyer à la rubrique et nous devrions placer un peu de rembourrage sous cette rangée pour ne pas conflit avec la photo que nous allons faire dans une future leçon. Sauvegarde dans notre colonne ici, nous allons utiliser le tiret de texte. Le Père Noël a tout envoyé, tout le texte à l'intérieur de cette colonne. Ensuite, sur notre rangée, nous allons faire PB Dash trois. C'est beaucoup mieux. La prochaine étape consiste à créer des données pour générer plusieurs cartes. Ouvrez le dossier de contenu et le fichier index.html. Ensuite, sous les données du bouton, nous allons entrer une entrée pour le titre de la carte. Nous appellerons cela nos services comme nous l'avons déjà nommé. Ensuite, nous allons mettre l'entrée des cartes et ils frappent la tabulation, frapper le tableau de bord. Et ensuite, nous allons mettre en titre. Nous appellerons la première carte intitulée « nous » pour rester simple, cet onglet non muet. Et nous allons spécifier l'image de cette carte en particulier. Ce sera donc IMG ce que nous allons utiliser. Ensuite, l'adresse sera un espace réservé oblique IMG barre oblique. Un point JPEG fera ensuite nos textes. La colonne. Nous pouvons utiliser Lorem Ipsum pour cela, mais cela ne fonctionnera pas dans la section métallique avant que nous ayons jusqu' à notre contenu ici, nous pouvons taper lorem et nous allons essayer 20. C'est probablement un bon lien. Nous allons donc couper ça. Retirez la ligne supplémentaire. Nous allons coller cela dans notre texte. Ensuite, nous devons faire le bouton, donc nous allons faire ce deux-points BTN. Ils entrent et tabulation feraient du texte. Nous allons extraire cette boîte et une prise , puis l'URL et nous en ferons un hachage pour l'instant. Sortons tout cela dans et utilisons le retour arrière pour atteindre le début de cette ligne et le coller, puis entrez à nouveau dans l'espace arrière, collez-le à nouveau. Le second cliquera sur carte réseau sur le pilote numéro un, nous allons maintenir Alt enfoncée et cliquer à droite de l'autre numéro un et les changer en deux et bleus, même chose avec la touche Alt pour le troisième entrée. Enfin, les gens utilisent généralement un hachage s'ils ne veulent pas spécifier d'URL, ce que nous utilisons Markdown et Markdown et les hachages pour les commentaires. Nous allons donc devoir mettre des virgules inversées autour ces hachages pour les faire fonctionner. Maintenant, nous allons parcourir le Dato, il suffit de créditer trois cartes à l'aide de la fonction plage. Nous mettons nos données le premier élément qui est important pour nous car les cartes totales portée au cours de l'automne lui-même cartes demandant à environ trois cartes à trouver ici. Et une fois que nous serons à l'intérieur des cartes, vous aurez accès à des points, points IMG, des points txt, points BTN dot txt et des points BTN dot URL. Tout d'abord, les cartes totales suppriment les ticks des services EL, en mettant deux accolades et parce qu'il pas de paramètres de page Hugo standard, nous devons commencer par utiliser des paramètres de points. Et puis le titre des cartes , puis fermez les deux crochets bouclés. Retrouvez ensuite les trois colonnes différentes pour les cartes. Et nous supprimerons les deux derniers. Ensuite, au-dessus de la colonne. Nouvelle ligne. Et nous utiliserons la gamme. Et on va aller au-delà des paramètres de points, des cartes à points. Ensuite, sous la colonne, vous devrez mettre un élément intact. Passons par étape à la fois. La première chose que nous allons faire, c'est l'image. Nous allons supprimer cela. Et ça va être un point. Img sera le paramètre car nous sommes à l'intérieur de l'objet cards. Et puis nous allons mettre le titre en bas HE dot title. Et nous allons copier et coller le titre dans le texte alternatif de l'image. Et c'est juste si l'utilisateur maintient la souris sur l'image ou si l'utilisateur dispose d'une technologie de lecture d'écran, supprimera le texte du paragraphe et insérera un point txt. Ensuite, pour le bouton parce que nous avons battu ce point BTN txt. Url utilisera une instruction width et il s'agira d'un point de largeur btn. Ensuite, il aura l'URL du point, la dérive de hauteur, le lien. Ensuite, nous aurons des prises de points pour le texte des boutons. Ensuite, nous devrons le faire. Comme vous l'avez vu dans la vidéo précédente, si vous ne placez pas de texte dans l'URL, tous les champs de texte, vous rencontrerez un problème avec l'affichage ou la balise a. Maintenant, corrigez ça. Nous pouvons utiliser une déclaration if. Donc, si nous avons besoin d'URL et de ticks, trois sont présents. Donc, si l'URL du point de fin coche, puis nous mettrons la balise de fin en dessous. Parce que nous avons affiché trois cartes et elles ne seront que côte à côte. Au point d'arrêt médian, dans l'Ohio. Nous devons ajouter une marge sous les cartes pour que lorsqu' elles sont empilées verticalement dans points d'arrêt très petits et petits, il y aura un peu d' espace entre elles. Donc, nous allons le faire, tirez trois la carte. Sauvons-le et voyons à quoi ça ressemble. Il s'affiche très bien. Nous avons nos images uniques pour chaque carte. Nous avons tiré le cap avant de la marque. Nous avons également des boutons uniques. Examinons-le et voyons ce qui se passe lorsque nous abaissons les points lumineux. Nous sommes donc maintenant à notre plus petit point lumineux. Comme vous pouvez le voir, nous avons l'espace entre les cartes et je vais juste en parler dans le CSS. Si vous survolez, vous pouvez dire ceci, le rembourrage orange sous la carte. Et au fur et à mesure que nous le présenterons, nous le mettrons au point d'arrêt MD et vous verrez qu'il s'agira de trois. s'écrase en trois là. C'est tout pour la leçon. avez des problèmes, vérifiez la vidéo et si vous ne parvenez toujours pas à faire fonctionner les choses, il y a une discussion ci-dessous et j' essaierai de revenir vers vous dès que possible. Vous pouvez également télécharger les fichiers de cette leçon dans la section Ressources. Vous pouvez ensuite déboguer votre code à partir de là. Merci d'avoir regardé. On se voit dans la prochaine leçon. 9. Bootstrap 5 Navbar avec Hugo: Dans cette leçon, nous envisageons intégrer la barre de navigation bootstrap cinq dans le site Web et de générer des éléments de menu avec le système de menu vous les gars. cette vidéo terminée, vous pourrez créer un menu à l'aide des cinq classes utilitaires Bootstrap. Vous seriez en mesure de générer des éléments de menu à l'aide des paramètres de menu de vous. Il serait en mesure de configurer les éléments de menu qui seront affichés en utilisant des barrières aux pages avant pour chaque page individuelle et également à l'aide d'un fichier de configuration. la première partie de cette vidéo, nous allons créer la barre de navigation bootstrap cinq à l'aide des classes utilitaires de Bootstrap. Un moment de la section Navbar des composants faisant partie du site web bootstrap five Docs. Si vous faites défiler jusqu' au premier exemple, nous allons le copier et coller directement tout le projet. Nous allons aller dans le dossier Mises puis dans les partials, et nous allons aller dans header.html. Nous allons supprimer le texte de l' en-tête et nous allons coller ce que nous venons de copier sur le site Web Bootstrap. Nous allons sauver ça. Assurez-vous que vous êtes en train de courir et nous allons jeter un coup d'œil. Nice et la barre de navigation apparaissent maintenant, mais il y a une différence dans la couleur d'arrière-plan. Si nous inspectons la barre de navigation, nous remarquons qu'il y a de la lumière BG comme couleur d'arrière-plan. C'est donc la première chose que nous allons régler. C'est très bien. Cela signifie que les couleurs du texte conviennent beaucoup à l'arrière-plan. Nous allons changer la lumière de fond et le changer en corps BG. Bg body est-il à l' arrière-plan avec la couleur du corps ? Je suis dans la section utilitaires et arrière-plan du site Web Bootstrap Docs. Et vous verrez avant que nous utilisions bg light, qui est un blanc très clair. Vous pouvez également choisir bg white, mais le plus utile pour nous car nous voulons spécifiquement que la barre de navigation corresponde à la couleur d'arrière-plan du corps, changera en corps BG. By body peut être modifié. Mais ce n'est pas le but de ce tutoriel. Comme vous pouvez le constater, la barre de navigation se fond désormais dans notre arrière-plan. Avant de continuer le texte de la barre de navigation, qui lit réellement la barre de navigation. On va remplacer ça par des accolades bouclées, site de points de films, un titre de point, et c'est le nom du site. Ensuite, nous allons passer à la barre de recherche et nous allons supprimer cela pour que nous puissions nous débarrasser de tout ce formulaire. Ensuite, nous supprimerons le lien de navigation désactivé, l'automne supprimera tout l'élément déroulant, ne laissera que le lien actif et standard Maj Alt F2 format. Et nous garderons cela et nous allons le vérifier. Je pense que nous sommes prêts pour la prochaine étape. Nous allons maintenant configurer notre modèle pour accepter les éléments de menu que vous allez générer. Parmi la page des modèles de menu dans le Doxy Hugo est assez complexe. Nous allons utiliser des pièces pour cet exemple. Nous allons choisir soit le point, le point, le menu à points soit la dopamine. Nous ne nous inquiéterons pas à ce sujet. Il a des enfants. Nous utiliserons le nouveau paramètre actuel du mari pour insérer et activer la classe. Nous allons également inclure le nom et l'URL. Nous avons trouvé cela trop compliqué dans les Hugo Docs. Suivez donc très attentivement et je vais vous montrer comment le faire. Nous allons commencer par ce lien actif. Il, l'élément de liste avec le lien actif au-dessus de cela. Crédit n'importe quelle ligne. Et nous allons utiliser la gamme comme nous l'avions précédemment utilisé. Et c'est un site de points avec un menu S dot majuscule puis un domaine. Et après cet élément de liste, nous devons le faire. Ensuite, nous avons la classe de lien de navigation et la classe active prend toujours t. Nous ne voulons pas que cela s'affiche si ce n'est pas la page actuelle. Donc ce que nous allons faire, c'est avant d'être actif, nous mettrons des accolades bouclées. Nous utilisons si nous devons mettre un signe dollar parce qu'un signe dollar fait référence aux contextes de page qui se trouvent ici, mais à l'intérieur de la fourchette, ce n'est pas les contextes de page. Nous traitons des éléments de menu, donc nous utilisons un signe dollar, puis un menu à points en cours. Eh bien, avec les capitales, le menu que nous ciblons est le mien. Ensuite, vous devez faire un arrêt complet après cela. Nous avons un espace avant d'être actif parce que je ne veux pas que l'actif entre en collision avec la liaison de navigation. Nous sommes à court d'espace. Si vous utilisez le contrôle V ou commande B, le navigateur de fichiers situé à gauche est supprimé. Ensuite, juste avant de passer entre une page et les commentaires inversés, il faut mettre une balise de fin. La façon dont vous pouvez régler cela si c'est correct ou non. Si vous mettez en surbrillance tout, de ces premières accolades à l'intact et retardé, vous verrez qu'il correspond à l' exemple ci-dessous, je vais faire le contrôle Z parce que je veux le garder. Je dois maintenant mettre mon lien et nous utilisons la variable, c'est l'URL des majuscules. Ensuite, pour le texte, je vais le confirmer. Ensuite, nous utilisons la majuscule variable N. Je ne vais pas supprimer cette deuxième entrée car elle n'est pas obligatoire. Tout sera généré via la plage et sauvegardera cela. Jetons un coup d'œil. Actuellement, rien ne s'affiche car nous devons configurer les éléments de menu et nous allons le faire avec le front matter et aussi un fichier de configuration. La configuration avec Meta frontale signifie que nous allons dans chaque page individuelle et nous indiquons à Hugo dans quel menu nous voulons que cette page affiche. Nous pouvons également configurer le blanc de la page, qui correspond à l'ordre dans lequel elle est affichée. Contrôler la bêta ouvre l' Explorateur d'affichage de fichiers ou vous pouvez cliquer sur le premier bouton, accéder au contenu. Et nous n'avons qu'une seule page pour le moment, et c'est le point d'index MD. Montez en haut. Je vais le mettre en haut pour qu'il soit facile de le trouver sous brouillon, nous devons mettre une entrée appelée menu, et nous appellerons cela principal puis blanc. Et on va mettre ça dans son dix maintenant avec le tee blanc le mieux de les faire par incréments de dix. Et de cette façon, si vous avez besoin de changer, vous avez neuf chiffres pour bouger la place. Vous n'avez pas besoin de tout réorganiser. Nous allons sauver ça. Et nous allons jeter un coup d'œil. Le lien d'accueil a brillé. Nous cliquons dessus avec le bouton droit de la souris et inspectons. Nous verrons que nous avons la classe active. Nous avons également la page actuelle de RA et les scénaristes actuels de RA qui, qui sont liés à la page actuelle. Nous allons maintenant configurer le menu à l' aide d'un fichier de configuration. Et nous allons également me renseigner sur le modèle afin que le lien puisse être ouvert dans une nouvelle page si vous le spécifiez dans le fichier de configuration. Tout d'abord, nous allons ouvrir notre fichier de configuration. Et en bas, il s' appelle config dot YAML. Laisser un espace seul mettra ce hachage pour commentaires et nous expliquerons ce que nous faisons. Et nous créons des liens de menu via un fichier de configuration. Le premier menu de facilité d'automne avec deux points et anti-tabulation. Nous sommes en train de configurer notre menu principal, nous allons donc mettre cela en premier. Puis, dans la voiture, n'a pas frappé Tab, vous avez mis un tableau de bord. Qu'est-ce que le nom ? Et le premier lien sera mis en place est le site GitHub. J'utilise beaucoup, puis j'utilise une URL d'onglet, et ce sera HTTP. Vous devez insérer le HTTP, sinon il ne sera pas lié en externe. Il pensera que c'est, je pense que c'est en fait partie du site Web, barre oblique de point-virgule http www.github.com. Nous devons lui donner un blanc. C'est l'ordre dans lequel il s'affiche. Nous allons donc donner 90 pour savoir que c'est à l'extrême droite. Ensuite, nous en mettrons un autre, et cette fois, nous allons créer un lien vers l'URL de ces onglets Google. Nous allons lui donner un blanc de 100. Nous allons donc sauver ça. Et nous allons le sauvegarder. Cela fonctionne. Et si nous regardons les liens Github et Google, ils possèdent une arme à feu comme nous voulions qu'ils soient avec le blanc. Vous remarquerez que le lien d'accueil est beaucoup plus sombre. Et c'est parce que le lien d'accueil a la balise active. Si nous examinons les deux autres liens, vous direz qu'ils n'ont pas obtenu de balise active. Et vous remarquerez que s' il rétrécit la page, les liens de navigation disparaissent. Et maintenant, dans un automne déroulant, et c'est le comportement par défaut. Si vous y allez, vous pouvez le personnaliser. Si vous entrez dans votre code HTML. Nous avons navbar expand LG, nous pouvons changer cela en navbar expand md par exemple, si vous n'aviez pas beaucoup de liens en quelques jours, généralement très bien. Nous pouvons maintenant le rendre beaucoup plus étroit avant qu'il ne se brise et ne devienne un menu mobile. La prochaine chose que nous allons faire est de créer code dans notre modèle pour pouvoir ouvrir ces liens dans de nouvelles fenêtres. Parce qu'actuellement, si nous cliquons sur ces liens, ils se chargent dans le même onglet ou fenêtre et nous ne voulons pas cela car ils ne s' éloignent jamais facilement de notre côté. La première chose que nous allons faire, c'est que nous retournerons dans notre fichier de configuration. Je vais définir certains paramètres. Maintenant, si nous examinons les paramètres dans Markdown pour une page ou si vous devez le faire, commencez simplement à appuyer sur la moyenne. Mais nous examinons la configuration du menu. Nous devons vraiment vous dire que nous voulons le mettre dans un paramètre, un paramètre personnalisé. Nous allons donc faire des paramètres avec deux points, puis nous toucherons et nous appellerons ce paramètre vide. Et nous le rendrons vrai si nous voulons ouvrir ce lien dans une nouvelle fenêtre ou un onglet. Et nous allons le faire passer pour le prochain. Nous sauvegarderons cela et ensuite nous irons faire notre code de modèle soit inséré dans notre en-tête. Et nous allons créer le code qui relie notre vrai paramètre vide. Lien assez longtemps. Faites descendre notre course en hauteur vers une nouvelle ligne. Et après la dérive de hauteur sera mise en place comme si AQ et AQ étaient égaux. Donc, si c'est égal à point params point vide, vrai. Donc, si le point de params de points est vrai, saisira certains textes et cette cible est égale à un trait de soulignement, vide. Grill est égal à non, ouvert sur elle aux risques de sécurité que nous essayons de communiquer à l'aide de la note, ouvrir, puis nous mettrons nos antagonistes et nous sauvegarderons cela. Nous allons jeter un coup d'œil. Je vais cliquer sur mon lien GitHub et vous verrez qu'il s'ouvre dans un nouvel onglet. Et même avec Google. Nous cliquons dessus avec le bouton droit de la souris et inspectons. Il dira que nous avons la cible égale à un rail blanc égal savoir que l'ouvre-porte arrive et c'est génial. C'est la fin de la leçon de base de la barre de navigation Bootstrap. Si vous avez des questions et que vous ne pouvez pas résoudre quelque chose, s'il vous plaît. Cette section de discussion ci-dessous, et j'essaierai d'y revenir le plus rapidement possible. Vous pouvez également télécharger les fichiers source pour est inférieur à la section ressources et déboguer à partir de là. Sinon, je vous verrai dans la vidéo suivante. 10. Pied de page avec année de droit d'auteur automatique: Dans cette leçon, nous allons créer un pied de page et nous allons générer automatiquement l'année pour les droits d'auteur en utilisant Hugo, qui génère en temps d'exécution statique et aussi JavaScript qui dynamiquement met à jour l'année en fonction de l'année pendant laquelle l'utilisateur navigue sur le site Web. cette vidéo terminée, vous pourrez créer un pied de page avec un arrière-plan solide. Vous serez en mesure de saisir le signe de copyright l'aide d'un code compatible HTML. Et vous serez en mesure de générer l'IBA manière statique avec Hugo comme un bon voyage, pas de repli de script et aussi dynamiquement en utilisant JavaScript. La première chose que nous allons faire est de créer le pied de page. Ouvrez donc le projet et allez dans le dossier Mises en page , puis entrez dans les partiels. Et la chose sur laquelle nous allons travailler pendant cette leçon, c'est le pied de page. Aidez à reprendre ce texte. La première chose que nous allons faire est de créer une div, l'ancien conteneur d'abus, mais cette fois, nous allons utiliser des liquides de conteneur. Donc, son liquide de tiret de conteneur. liquide de conteneur prend la largeur maximale de la page et se redimensionne avec la page. Il s'agit toujours de la page complète ou de la largeur. Avec une aide à mettre dans une rangée et une colonne. Dans cette colonne, nous allons utiliser un fond sombre. ce faire, nous faisons Doc, BG Dash Doc. Je vais aussi avoir besoin de textes blancs. Alors, faites le point txt, tiret blanc. Je vais mettre un peu de rembourrage au-dessus, bas et à gauche, à droite du texte. Nous allons donc utiliser Dot Py Dash trois. Il y a beaucoup de cours. Gardons ça et jetons un coup d'œil. Nous allons exécuter le serveur Hey Guys. En bas de la page. Nous avons notre barre noire. Maintenant, si vous vous interrogez sur les différentes couleurs d'arrière-plan et de ticks, si vous regardez ici en arrière-plan, sont toutes les couleurs d'arrière-plan ce sont toutes les couleurs d'arrière-plan parmi lesquelles vous pouvez choisir. Par défaut, vous pouvez spécifier la vôtre, soit en remplaçant les classes Bootstrap, soit en créant votre propre classe, soit en écrivant les variables bootstrap sont, mais à cette fin, elle est inférieure nous ne faisons que choisir l' une de ces couleurs et nous choisissons Dark. gros pointillé sombre. En ce qui concerne les couleurs des ticks, nous sommes maintenant dans la section couleur des utilitaires. Et ce sont toutes les couleurs Bootstrap par défaut. Et certains d' entre eux les ont mis sur un fond sombre, mais cela ne se produit pas automatiquement. Vous devez spécifier la couleur d'arrière-plan. Ces classes ne modifient la couleur du texte et nous allons utiliser des ticks. Ce que nous pourrions essayer prend également la vie. Je pense qu'il faut du blanc pourrait avoir l'impact. Nous le sommes souvent. Créons le texte du pied de page. Mettons-le dans mon texte de base. Nous ferons le droit d'auteur. Ensuite, nous avons besoin du signe de droit d'auteur pour cela. Nous avons mis une copie finale. Vous verrez que le nom de la suggestion sera ensuite inséré dans une analyse GIF de base et nous ferons 2022. Ensuite, nous allons mettre le nom du site Web. Nous allons donc faire des points, des points. Gardons ça et jetons un coup d'œil. Disons, par exemple, que vous ne voulez pas utiliser le nom de votre site Web pour l'avis de copyright. Jetons un coup d'œil à mettre des textos alternatifs. Maintenant, il y a une autre variable que nous pouvons utiliser, ce site dot copyright. La façon dont nous faisons ce travail, c'est que nous allons faire avec les droits d'auteur à points, points. Ensuite, nous allons faire le point qui va afficher ce contenu. Et ensuite, nous pouvons faire d'autres choses. Voyons si le droit d'auteur n'est pas disponible. Sinon, nous afficherons le titre des points, des points, des points, puis nous mettrons fin à cela, nous sauvegarderons cela. Et avant d'aller vérifier, il ira dans notre config.xml. Et nous allons définir les coches de droits d'auteur. Mettez un peu de hachage et mettez un petit commentaire, copiez alternativement, texte de l'entreprise. Et ensuite, nous ferons une copie, n'est-ce pas ? Et nous allons faire de Web Design, Inc. Et enregistrez ça, et sauvegardez-le fonctionne. Il y a votre texte alternatif. Je n'ai pas été automatisé, alors revenons et nous allons le faire. Cela nous amène à notre prochaine étape et cela est généré statiquement dans la levure à l'aide de Hugo. Maintenant, c'est une fonction assez complexe à régler, mais je vais vous simplifier tout ce que vous avez à faire, en mettant les accolades bouclées, faites maintenant le format point. Ensuite, entre parenthèses 2006, il faut faire l'année 2006. Personne ne va travailler. Il existe de nombreuses façons de formater les dates, mais je vais simplement rester très simple pour ce tutoriel. Nous garderons cela et nous l'inspecterons. L'année de tournage est 2021. Vous pouvez voir qu'il fonctionne parfaitement. Cela nous amène à la section suivante qui génère dynamiquement le JavaScript. Donc, je veux dire que cela s'est produit lorsque l'utilisateur navigue sur le site et qu'il se charge dans le navigateur à ce moment-là, le E va être généré. Pour l'instant, je vais avoir cette fonction, la fonction, je vais couper ça. Je vais le coller en bas. Je vais faire quelques commentaires, étoile oblique, l'étoile. Et puis commencez à réduire la réponse. Je vais commenter cela. Mais je vais mettre dans une période, juste parler. Un ID ou un ID de span est égal à nous. Maintenant, je préfixe toujours mes identifiants, qui sont à des fins JavaScript avec le préfixe J, S, dash. Et de cette façon, je sais que si je change cela, JavaScript cesse de fonctionner. Que sont les span ? Ensuite, nous allons utiliser du JavaScript pour écrire la date à l'intérieur de cette période. Je vais donc l'enregistrer pour l' instant et nous ouvrirons notre fichier JavaScript que nous avons créé plus tôt. Nous allons tout d'abord cibler la plage que nous venons de créer et nous l' utiliserons avec le point de document. Obtenir un élément par ID. Assurez-vous d'utiliser des majuscules de toutes les manières, sauf la première. Ensuite, nous ouvrons le support vers le haut. À l'intérieur de ce support, nous devons spécifier l' ID réel de la plage. Il faut donc utiliser des apostrophes. Et puis on va, on cherche JS STAT3, c'est la pièce d'identité. Nous avons ciblé notre élément et nous l'avons sélectionné avec JavaScript. Et nous voulons modifier le code HTML interne. Nous allons donc faire du point. Intérieur. Html est que le HTML correspond à toutes les majuscules. Nous allons utiliser un signe égal, donc je vais le changer maintenant. Ce que nous allons changer, et c' est encore une fois, ce truc est assez complexe, mais nous allons le garder. L'explication est très simple pour ce tutoriel. Nous allons créer une nouvelle date puis ouvrir, fermer les crochets, finir par deux points. Avant d'oublier ce que vous avez écrit, nous allons créer un commentaire. Maintenant, commenter le JavaScript est légèrement différent de Hugo ou YAML. Nous utilisons une double barre oblique pour un commentaire sur une seule ligne. Très bien, on va sauver ça. Vous devrez peut-être redémarrer votre serveur pour cela fonctionne et nous allons vérifier le site Web a été, au lieu de dynamiquement, nous amenons à l'étape suivante, nous devons créer un nouveau script complet. À balayage Mei Ti. Expliquez ce qu'est un bon script pour Becky si nous allons dans inspect puis le menu à trois points et exécutez la commande, qui est également Control Shift P, surmontant Java, puis désactivez JavaScript. Rien ne va encore se passer. Vous devez rafraîchir la page. Vous pouvez contrôler R ou cliquer sur le bouton Actualiser. Vous verrez maintenant que nous n' avons rien à côté droit d'auteur car JavaScript ne fonctionne pas. est Certains textes ne seront affichés que si JavaScript est désactivé ou n'est pas pris en charge dans ce navigateur. C'est aussi simple que de créer une balise appelée script sympa. Vous pouvez le faire automatiquement avec Emit. Et puis à l'intérieur, nous commencerons par un exemple simple et agréable. Nous allons mettre dans l'année 2025, par exemple, fera un u dans le passé nous allons 2020. Je vais le sauver. Rafraîchissez notre navigateur. Vous verrez que l'année 2020 arrive. Si JavaScript TCC est étiqueté, rendez-les meilleurs, nous allons utiliser Hugo dégénéré pour que vous preniez les commentaires. Ce code ici. Nous allons le couper , puis nous le collerons dans la nouvelle section de script. Et maintenant, il va insérer l'année en cours dans cette balise sans script. Mais voici le piège. Il ne va le faire que lorsque vous construisez votre site. Vous n'allez pas construire votre site tous les jours. Vous le construisez probablement chaque année. Mais cela a commencé vers janvier, février, mars a de fortes chances que vous ayez l'année précédente. C'est ainsi que nous utilisons JavaScript pour générer dynamiquement le dydt. Nous avons obtenu notre retour complet juste au cas où rafraîchir le site. Et c'est à venir en 2021. Ensuite, nous allons activer JavaScript, Java et l'activer et actualiserons l'autre droite, activé JavaScript pour fermer les outils de développement et les actualiser. Et cela fonctionne très bien. C'est tout pour la vidéo. Il y a beaucoup de choses à prendre en compte. Il y a une génération dynamique et statique de la photo. Vous avez des questions dans la section de discussion ci-dessous. Sinon, vous pouvez télécharger le code source de cette leçon terminée. Je vous verrai dans la prochaine leçon. 11. Créer une seule page: Tout au long de ce projet , jusqu'à présent, nous n'avons travaillé que sur la page d'accueil. Nous allons maintenant voir comment créditer pages supplémentaires et termes Hugo que nous appelons une seule page. cette leçon terminée, vous pourrez créer un modèle d'une seule page. Vous seriez en mesure de créer une chute simulée pour une seule page. Et vous seriez en mesure de générer un lien de menu à partir d'une seule page. La première chose que nous allons faire est de corriger un modèle de page unique. Votre projet doit entrer dans un dossier Mises en page, puis par défaut, nous devons avoir assez de code HTML single.php et nous n'avons pas encore touché les vues. La première chose que nous devons faire, c'est très similaire au index.html. Nous devons définir le bloc qui visait entièrement le bloc principal, juste le bloc de ponçage. Nous en avons vraiment assez en soi. Ensuite, nous allons laisser quelques lignes et nous allons les mettre maintenant et marquer, nous pouvons mettre un marquage de section. Nous allons lui donner une classe à moi. Juste au cas où nous aurions besoin de cibler cette section avec CSS sur la piste. Je vais mettre dans notre conteneur. Tabulation première ligne, ligne. Nous allons le mettre dans une colonne. C'est vraiment important si vous voulez bootstrap pour fonctionner correctement, vous devez suivre cet ordre à chaque fois. Et ensuite, nous allons mettre un titre. H1 insère le titre de la page. Donc on l'utilise avec la majuscule du titre de point T , puis on va le mettre dans un sous-titre. Maintenant, ce sous-total peut ne pas toujours être un P. Nous devons l'utiliser dans des balises conditionnelles qui, s'il n'apparaît pas, le code ne s'exécutera pas parce que vous ne voulez pas générer flèche ou avoir une balise vide sur notre site. Nous utilisons donc avec des paramètres de points avec un sous-titre majuscule de point P. Ensuite, nous lancerons un H2. Et nous le ferons en italique. Nous allons faire des points FST pour l'italique de style police, et nous ferons également une taille de police de trois. troisième étape fera aussi du texte en sourdine, juste beaucoup et un peu plus haut. Je pensais que les tiques étaient en sourdine. Ensuite, nous mettrons des accolades bouclées avec un point. Ce point générera les données à partir du sous-titre des points de params de points. En dessous, nous allons mettre le marquage. La prochaine chose que nous devons faire est le contenu de la page. Nous allons faire une plongée. Nous ferons du rembourrage au-dessus et au-dessous de celui de trois. On va donc faire le point py, tiret trois, c'est en haut et en bas. Nous allons faire nos bretelles bouclées. Nous avons pensé au contenu. Si vous configurez notre modèle de base maintenant, je dois créer une chute simulée pour le contenu de la page. La meilleure façon de le faire est d'utiliser une commande contrôlera la commande CEO, disons fermer le serveur. Je veux dire, des archétypes. Au début du cours. Nous l'avons mis en place pour que le brouillon soit faux. Par défaut, lorsque nous créons une nouvelle page à l'aide de Guigo, il ne s'agit pas d'un brouillon. Par défaut, toutes les pages que vous créez des brouillons et faites réellement un p.sit. La commande est Hugo savait que nous utilisons une barre oblique sur la barre oblique, point d' index, le MD dans. Ensuite, vous verrez dans le dossier de contenu que nous avons notre dossier À propos et index.html. Vous pouvez, par exemple, Hugo le savait. Et ensuite, vous pourriez faire le processus. Vous vous retrouverez ici avec un fichier appelé processus. Ils fonctionnent très semblables en termes de navigation. Je les préfère dans leur propre dossier car plus tard, vous allez regarder les ressources et les images des pages et stocker des images avec les fichiers. Et c'est beaucoup plus facile de créer un sous-dossier pour chaque page. Je vais supprimer celui-là. Jetons maintenant un coup d' œil à la chute simulée. La première chose que nous allons créer est donc le sous-total. Nous allons mettre ici, par exemple, au service de la communauté locale. Depuis 1999. Nous allons ensuite créer des textes. Si vous suivez les instructions de la leçon précédente, vous pourrez utiliser Emmet à l'intérieur de la fausse alarme. Ensuite, nous allons taper 100 par mois une ligne et je le réexécuterai. Allez courir Lorem 90 jours. Maintenant que nous fermons le serveur Hago pour exécuter la nouvelle commande Hugo devra vous exécuter à nouveau. Ensuite, nous allons consulter le site Web et dire : Écoutez, nous n'avons pas encore configuré les éléments de menu. Nous devrons accéder manuellement à la barre oblique À propos. Vous pouvez dire que nous utilisons le modèle que nous venons de créer sans sous-titrage. Par exemple, désactivé le sous-titre. Je vais mettre un hachage avant le sous-total, disons que vous ne voulez pas qu'il disparaisse pour cette page. Mais si nous inspectons, vous remarquerez que le tag recettes également. C'est pourquoi j'ai utilisé la commande width. Cela nous amène à la dernière étape et c'est créer un élément de menu et un blanc. Nous revenons à notre point d'index m d, le principal avec le trait de soulignement à la racine du dossier de contenu. Vous remarquerez qu'il est affecté au menu principal et qu'il a un poids de boîtes ou de le copier. Ils vont rallumer notre sous-total. Ensuite, nous allons coller ça , mais nous devons changer le blanc et nous lui donnerons un poids de 20. De cette façon, c'est le deuxième élément du menu. Si nous examinons le fichier de configuration, vous verrez que nous avons également un automne avec un poids de 1900. Nous avons donc en 2019 des centaines que je devrais savoir, afficher dans l'ordre. Jetons un coup d'œil. Ils se battent toujours dans le bon ordre et l'état actif fonctionne très bien aussi, car notre page à propos, qui est les pages actuelles, dot-com. Si on a une maison, tu verras que c'est Docker. Certaines personnes utilisent JavaScript pour faire cette fonction, mais c'est beaucoup plus facile avec ego étant un générateur de site statique. Nous pouvons le faire automatiquement. C'est tout pour cette leçon. Vous pouvez créer autant de pages uniques que vous le souhaitez et ils utiliseront tous ce modèle. Nous examinerons les modèles personnalisés dans un cours ultérieur. Je vois la prochaine leçon. 12. Créer une page de liste: Bienvenue dans la prochaine leçon. Dans cette leçon, nous cherchons à créer des pages de liste. Cette leçon sera légèrement plus longue que la précédente. Et c'est parce que les pages de listes sont assez complexes et que nous envisageons également la pagination. cette leçon terminée, vous serez en mesure de créer une partie pour afficher titre de chaque page de manière cohérente. Vous pourrez créer au moins un modèle de page. Vous serez en mesure de créer un fichier de délimitation pour au moins une page. Vous pourriez générer un lien de menu pour la page de liste via sa première page. Vous pourriez créer un espace réservé aux pages uniques pour le lot de succursales. Et ce n'est qu'à des fins de démonstration. Dans ce tutoriel, vous avez eu un paginat, le moins d'affichage de pages individuelles sur votre page de liste. Vous pouvez mieux contrôler le nombre de pages affichées sur chaque page paginée et vous pourrez contrôler la longueur de l' affichage récapitulatif de la page pour chaque page de votre liste. Première étape, faisons une partie. Ainsi, chaque page a son titre, affiché de façon cohérente. Retournez dans notre code HTML single.php et retirerez tous les textes utilisés pour afficher le titre. Nous allons couper cela et à sa place, nous mettrons deux accolades bouclées. Et nous allons exécuter une commande appelée partielle. Et on va appeler ça le titre. Et puis il faut mettre un arrêt complet pour que les pages entières contextes, ces pass-through à cette partielle. Maintenant, si vous cliquez sur Enregistrer, une erreur s'affiche et c'est parce que nous n'avons pas encore rendu cette partie partielle. Je vais dans votre dossier partiels et je crée un nouveau fichier appelé point HTML à l'intérieur de cette partie, collant le code que nous venons couper il y a quelques instants et je l'enregistre. Voyons si tout fonctionne comme prévu. Je n'ai jamais accès aux pages À propos. Vous pouvez voir que le total est toujours affiché même s'il est extrait de la partie. Dans la deuxième étape, nous devons créer un modèle de page de liste pour afficher le moins de pages. Si vous cherchez plus d'informations sur le fonctionnement des pages de liste, je lierai la page de documents Hugo pour les lots de pages et vous verrez qu' un ensemble de succursales a une chute d'index avec un trait de soulignement. Avant cela, nous utiliserons la mise en page de type faible qui fonctionne dans cette leçon. La leçon précédente consistait à utiliser un point d'index MD avec le trait de soulignement et que vous utilisiez le type de mise en page unique. modèles de location affichent également au moins toutes les autres pages de ce dossier dans le fichier list.html dans notre dossier par défaut, à l'intérieur de la mise en page. Et selon la seule page, nous devons soit trouver ma règle, copier tout le fichier. Allons le changer. La première chose que nous allons faire, c'est sous le contenu, nous allons utiliser la plage. Et nous allons parcourir toutes les pages. Nous devons mettre fin à l'étiquette finale pour mettre fin à l'un ou l'autre des océans. Et puis à l'intérieur, nous afficherons la frappe de cette page. Nous allons donc utiliser H2. Nous avons déjà utilisé H1 dans ce T2 partiel, puis Tab. Ensuite, nous utiliserons un lien i dans un tiret. Et le lien, nous utiliserons accolades que nous pensions permalien avec un P. majuscule . Ensuite, entre l' ouverture et la fermeture d'une balise, nous allons insérer le titre de cette page, alors utilisez un titre de point avec un majuscule T. Ensuite, en dessous nous allons afficher un résumé du texte dans cette page, utiliserons les deux accolades et ce sera un résumé des points. Nous allons envelopper tout cela dans une étiquette d'article. Se moquer de l'automne. Maintenant, la page de liste que nous pouvons l' afficher s' arrêtera ici les gars avec Control C ou Command C avec Hugo savait slash products slash underscore index.html. Nous voyons quel dossier produits et notre index.html, ce que je mets dans certains contenus. Nous l'enregistrerons pour, nous continuerons, nous l'affecterons au menu du menu principal puis un deux-points et nous chercherons à principal. Et nous allons lui donner un poids de 30. C'est donc à droite de l'élément de menu existant que nous avons pour redémarrer le serveur Hugo et avoir un nouveau menu pour les produits car les en-têtes APEDE sont correctement insérés. Et ainsi que le contenu mais rien d'autre n'a son envol. Et c'est parce que nous n'avons pas encore créé l'élément d'une seule page. Je vais maintenant créer un espace réservé. C'est juste temporaire. Les pages seront des pages uniques et elles vont vivre à l'intérieur du lot de succursales où notre index de produits tombera arrêtera à nouveau le serveur. Nous allons lancer Hugo a connu des produits slash slash cars dot md. Nous pouvons y parvenir de deux façons. Nous pouvons avoir ce qui suit dans cars dot MD, ou si nous allons utiliser des photos plus tard, vous pouvez créer un dossier appelé cars, puis renommer le fichier pour indexer le point m d. Recommander cette méthode car c'est beaucoup mieux pour l'expansion plus tard. Index.html. Nous allons y ajouter du contenu. On va courir Lorem. Je pense que c'est demain sur un paragraphe de 30 mots , puis sur un paragraphe de 50 mots. Et puis l'alarme peut être des centaines cette fois. Et ensuite, je garderai ça. Nous avons besoin de plusieurs produits pour que la pagination fonctionne. Ce que je vais faire, c'est que je vais copier et coller. Parce que quelques fois. Je vais le renommer en bateaux. Ensuite, je renommerai les 12 prochains vélos et je les mettrai dans le bon dossier. Et puis je renommerai le dernier mixé en boîte à moteur. Je vais continuer à faire ça et je vous verrai dans une minute. J'ai un tas de dossiers près d'eux ou quels fichiers MDT point index et leur dire dans quoi je vais entrer et renommer le titre de chacun pour correspondre au dossier. Vous avez passé neuf neuf ans et je vous verrai dans une minute. Très bien, je vais donc m' assurer qu'ils sont tous sauvés et fermés. Ensuite, nous lancerons à nouveau le serveur et verrons ce qui se passe. Les gars trouvent un résumé de toutes ces pages qui existent. Comment pensez-vous que nous avons besoin d'un peu d'espace entre eux ? Nous avons besoin d'un peu de piment entre le résumé et le pied de page en bas. Revenez dans notre section list.html. Nous ferons le P B3 ou le rembourrage en bas trois. Et nous allons envelopper notre résumé dans une div avec un rembourrage en bas trois. Donc, Pb trois préfabriqué F3 dira ça et aura un coup d'oeil. C'est assez basique, mais pour l' instant, il est assez fonctionnel. Crédit une longue liste de toutes les pages uniques qui existent dans le dossier produits. Maintenant, nous devons paginer qui affiche que seul un certain nombre que j'ai affiché par page. La façon dont nous pouvons le faire est que nous organisons toutes les pages dans l'ajout de points paginées ou du côté de cela. Si nous sauvegardons cela, nous sommes allés différemment car, par défaut Hugo affiche dix pages lorsqu'il pagine. Créons donc maintenant les contrôles de pagination au bas de la page et nous reviendrons et modifierons le nombre de pages affichées par page. Pour afficher les contrôles de pagination il existe un modèle intégré et nous pouvons copier et le coller à partir de cette page. Et j'ai créé un lien vers cette page de documentation. Dans la section Ressources. Après la balise, je vais créer une div car nous allons la coiffer dans une minute. On pense que Dave, je vais coller dans modèle interne de pagination pour les contrôles de pagination apparaissent, nous allons devoir limiter que les contrôles de pagination apparaissent, nous allons devoir limiter le nombre de pages affichées par page. Je vais copier cette pyramidale. Ensuite, nous ouvrirons notre fichier de configuration. Nous allons le mettre dans un commentaire, le mettre en pagination, et nous allons le régler à cinq. Nous allons sauver ça. Maintenant, vous pouvez voir que nous avons 12345 produits, puis nous avons nos contrôles en bas. Et ce sont en fait des classes Bootstrap par défaut, si vous y allez, nous pouvons aller à notre deuxième page. Vous remarquerez en haut les changements d'URL. Nous sommes à la page deux. Et si on y retourne, c'est juste sur la page d'index. Nous pouvons faire un peu de travail pour améliorer un peu ces présentoirs. Nous reviendrons à la page de liste que nous avons créée précédemment. Nous allons le mettre en classe égale. Tout d'abord, nous allons faire un tiret trois sur la marge de crédit tout autour pour éloigner les autres objets. Et puis pour l' envoyer, nous devons faire d dash flux pour le correctif d'affichage. Une fois que vous avez activé flokes, nous pouvons justifier le centre de contenu. Sauvons ça. Comme vous pouvez le voir, c'est superbe. La prochaine chose que nous allons examiner est de savoir comment contrôler la longueur du résumé de page utilisé sur notre page d'index. Nous avons un peu trop de texte affiché pour chaque produit. Revenons en arrière et résolvons ça. Il existe maintenant plusieurs façons de le faire. façon la plus simple de le faire avec une configuration utilisant le paramètre de longueur récapitulative. Nous allons donc copier ça. Allez dans l'automne de configuration. Nous allons mettre dans un commentaire Pi défini. Et ce n'est pas seulement le cas des mots, mais Hugo arrondit à deux phrases puisque c'est ainsi que sept mots, par exemple, les gars, nous ajoutons cela à la phrase la plus proche. Je vais donc juste changer la phrase. Allez dans des bateaux. attrapé sa phrase hors, il met en place le site de départ que vous pouvez voir comment vous les gars, même si nous n' avions que sept mots, c'est arrondi à la phrase la plus proche, alors qu'il en aurait eu sept mots. Maintenant, par exemple, vous pensez que cela semble terrible pour vos produits. Il y en a deux, sinon nous pouvons générer des résumés manuellement. La première alternative au résumé automatique est le fractionnement manuel. Maintenant, vous devez le copier et le coller exactement. Ces étiquettes. Nous allons copier ça. Ensuite, nous irons dans R Markdown pour nos produits de bateaux. Il va coller ça et le sauvegarder. Vous pouvez y voir que tous les textes au-dessus cette balise sont affichés sous forme de résumé pour les bateaux. La prochaine fois que je suis arrivée pour un résumé c'est utiliser le tapis avant et nous allons utiliser une variable récapitulative dans notre prairie avant. Je vais donc copier ça. Je vais aller dans la boîte. Le produit publiera un résumé et il copiera une ou deux phrases dans ce résumé. Et ensuite, nous le sauvegarderons. J'ai commencé par la boîte de mots. Ensuite, nous avons notre récapitulatif sur les vélos utilisant le métal avant. Les trois façons de générer des résumés, Hugo TID pour la leçon dix. Félicitations, vous êtes arrivé à la fin de la partie principale du cours. Je vous verrai dans la prochaine leçon. N'oubliez pas que si vous avez des questions, vous pouvez les poser ci-dessous et j' essaierai y revenir le plus rapidement possible. 13. Construire et télécharger le site Web: Cette leçon porte sur la création du site Web. Maintenant, jusqu'à présent dans ce cours, vous avez travaillé avec vous le serveur de développement. Nous allons maintenant créer le site Web, générer des fichiers HTML, les tester, puis les télécharger via FTP. cette vidéo terminée, vous pourrez créer un site Web dans le dossier public. Vous pourrez également modifier le code HTML pour en réduire la taille. Vous pourriez tester l'application du site Web avant de la télécharger via FTP. Vous pourrez également télécharger les fichiers du site via FTP. La première chose que nous allons examiner est comment construire avec les fichiers de sortie d' en-tête Hugo. Avant de construire le site en utilisant Hugo, nous devons dire à son ego, le nom de domaine auquel nous allons envoyer ça. De cette façon, Hugo peut créer correctement l'URL. Si vous accédez à votre fichier de configuration, vous verrez qu'il y a un élément appelé URL de biais. Maintenant, avant de passer à l'enquête, vous devez vérifier le nom de domaine. Pour l'instant, nous allons utiliser localhost. Elle a mis une barre oblique après ça. Il y a un autre paramètre que nous devons faire avant de construire le site. Et c'est-à-dire que nous devons désactiver la génération du dossier des catégories et du dossier des balises. Nous pouvons le faire avec des personnes handicapées. Mettez le code exact et puis je suis là, j'ai mis mon commentaire au-dessus. Même si nous n' avons pas de taxonomies catégories ou de balises, ces dossiers seront quand même générés. Maintenant, soulevez ce lien dans la section Ressources, il y a une commande appelée Hugo, et vous devez lui fournir des indicateurs. En option. Nous venons de lancer la commande Hugo. Il va réellement construire tout de suite. Allons donc y aller. De retour dans notre projet. Nous parlerons à Hugo. Et je vais juste agrandir ce terme. C'est très similaire à ce que vous obtenez normalement , sauf qu' il produit des fichiers pour vous. J'ai couru Hugo sans la configuration des types désactivés juste pour vous montrer ce que vous obtenez. Comme vous pouvez le constater, nous avons un dossier de catégorie et un dossier de balises. Et à l'intérieur, nous avons notre index.html. Nous ne voulons pas cela pour ce site Web. Je vais le relancer avec cette configuration en place comme je viens de le montrer que vous allez voir la différence. Maintenant, je vais utiliser une commande appelée « clean destination DIR ». Ils doivent utiliser ceci dit que les éléments du dossier ont été supprimés. Si vous apportez des modifications à votre site Web, par exemple, vous supprimez une page, puis vous reconstruisez son ego. Cette page supprimée sera toujours présente, sauf si vous supprimez manuellement tout ce qui se trouve sur la photo ou si vous exécutez cette commande. Maintenant, nous n'avions pas ces fichiers inutiles et si vous utilisez un certain temps pour y accéder, cela n'aurait probablement pas de sens. Et il semblerait que si une erreur de page, jetons un coup d'œil à l'intérieur d'un des fichiers et voyons ce que vous avez sorti. Comme vous pouvez le constater, il y a beaucoup d' espace dans le fichier. Nous pouvons supprimer cet espace. Nous ne réduirons pas beaucoup le fichier, mais cela aura un impact sur les temps de chargement pour les utilisations. grossissement supprime tous les espaces blancs supplémentaires et nouveaux caractères de ligne afin de réduire la taille du fichier. Cela permettra de créer un téléchargement plus rapide pour l'utilisateur. Vous pouvez consulter la page des documents. Il existe une option que nous pouvons utiliser appelée minify. Nous devons entrer dash, dash minify après la commande Hugo. Il amplifiera n'importe quel format de sortie pris en charge, qui est essentiellement HTML. Il ne prend pas en charge JavaScript ou CSS. Jetons un coup d'œil. Nous allons donc ouvrir le fichier index.html. Comme vous pouvez le voir, tous les espaces blancs s'ils suppriment l'os, malheureusement, il ne supprime pas les caractères de saut de ligne. Avant de devoir charger vos fichiers avec un logiciel FTP sur un serveur distant. Je vous recommande de le tester localement et c'est assez facile à faire. Le progiciel que nous allons utiliser pour exécuter un serveur de test est XAMPP. Il s'agit d'une suite logicielle gratuite et vous pouvez l'utiliser à diverses fins. Je vais également l'utiliser pour effectuer un téléchargement FTP de test. Vous pouvez également essayer vous-même si vous ne disposez pas d'un serveur FTP pour charger les fichiers. À. Au début de ce cours, je vous ai montré comment installer Hugo et tous les logiciels associés. Il est très facile d'installer XAMPP. Je ne vais pas passer par ce processus. Il dispose de versions disponibles pour Windows, Linux et Mac. C'est donc bon pour tout le monde. J'ai ouvert l'échantillon x m double p.stance. Nous allons démarrer le serveur Apache. Nous n'avons pas besoin de MySQL car nous réalisons un site statique. Vous devez ensuite naviguer vers le dossier et cela vous indique ici dans les journaux qu'il est installé dans la barre oblique C x et l'ancienne pièce, passons à ce dossier. Et une fois que vous êtes dans ce dossier, vous devez accéder aux documents HT. Mccartney a obtenu un exemple de site Web. Revenons donc à Chrome et nous verrons si nous pouvons trouver cela. Dans Chrome. Je vais parler à l'hôte local maintenant, faites attention à la photo de jour qu'il voudra aller au port cent trente cent trois ce type, mais nous ne voulons pas ça. Nous voulons simplement le port 80 par défaut. Il y a le site que nous allons simplement regarder. Nous allons supprimer ce site car nous n'en avons pas besoin. Nous allons télécharger le nôtre. Les gars l'ont vu. Vous pouvez Platon comme faux, revenir à vous ou hugo public dossier a besoin de Control I, ou vous pouvez mettre en surbrillance tous les fichiers. Effectuez le contrôle C. Et puis appuyez sur le dossier docs, collez-les dans Control V ou Command V. Ensuite, nous retournerons dans notre navigateur et récupérez-le. Nous allons donc actualiser la page. Débarrassez-vous de ce tableau de bord. Comme vous pouvez le constater, nous avons notre côté Hugo et c'est d'émuler votre site téléchargé sur un serveur FTP et de faire fonctionner notre pagination. Nous avons notre page unique qui fonctionne. Nous sommes prêts à le télécharger sur un sept via FTP. Cela nous amène à la dernière étape du didacticiel entier et c'est le téléchargement de votre nouveau site via FTP. Maintenant, je vais manger quand SEP pour le téléchargement FTP, mais il n'est disponible que sous Windows si vous utilisez un Mac ou Linux. Un exemple de bon logiciel que vous pouvez utiliser. Cela tombe beaucoup. J'ai un support multiplateforme, mais tous les programmes FTP sont assez similaires. Voulez-vous émuler le téléchargement FTP sur votre propre ordinateur sans utiliser de serveur Web ? Xampp inclut beaucoup les chutes. Serveur FTP, si vous démarrez cela puis accédez au bouton Admin, nous configurons le serveur à un point 7 point 0 No.1, qui est localhost. Ensuite, dans la configuration, accédant au bouton Utilisateurs, vous créez un utilisateur, lui donnez un mot de passe simple et vous assurez que vous avez partagé certains dossiers. Je partage les diapositives, les examens slash HT docs dossier. Je vais donner toutes les autorisations car nous devons être en mesure de le faire. FTP Violet. Définissez cela comme répertoire personnel. Nous allons sauver ça. Maintenant, nous pourrions utiliser un logiciel FTP. Je vais créer une nouvelle session. Je vais me connecter à un à sept points 0 point un. Cela peut maintenant changer en fonction de l'endroit où vous téléchargez vos faux témoins. C'est uniquement pour le test localhost. Je vais entrer le nom d'utilisateur et le mot de passe pour que mon serveur de test clique sur Connexion. Voici maintenant les anciennes chutes que nous avons précédemment copiées dans le dossier HT docs. Je vais les mettre en surbrillance et cliquer sur Supprimer. Supprimez ce faux. C'est le serveur distant. Et c'est notre dossier public dans lequel nous avons créé les fichiers pour mettre en évidence tous les fichiers de notre dossier public. Nous les traînons à travers. S'il s'agissait d'un serveur distant, il faudra probablement un certain temps pour les télécharger, puis nous pourrons aller et nous pourrons naviguer sur la page et voir si cela fonctionne. Il semble que cela fonctionne une fois que nous avons téléchargé via FTP. Félicitations à ceux qui sont arrivés jusqu'à la fin du tutoriel. Vous avez fait un excellent travail. Vous avez acquis beaucoup de compétences et j'ai hâte de vous voir dans mes autres tutoriels Hugo où nous explorons tous ces concepts et bien d'autres encore plus en détail. 14. Résumé: J'espère que vous avez apprécié le cours et que vous en avez beaucoup tiré parti. Bon nombre de sujets n'étaient pas si approfondis, mais ils étaient conçus pour être une introduction approfondie. Mais ne vous inquiétez pas, mois, publiant d'autres cours couvrant tous les aspects de la conception Web statique. On se voit dans le prochain cours. 15. Bonus - Automatisez les tâches Hugo avec les scripts NPM: C'est une leçon bonus. J'ai eu beaucoup de commentaires. Les personnes qui demandent des fonctionnalités supplémentaires telles que celle-ci , créent une liste de scripts qui seront exécutés avec le gestionnaire de paquets NPM afin que nous puissions automatiser les tâches à exécuter. avec Hugo. Commençons donc. Nous allons dans un nouveau terminal et la première chose que nous allons exécuter est NPM. Dedans. NPM doit être installé. Si vous téléchargez Node.js, NPM sera inclus pour vous. La première chose que nous allons faire, c'est que nous demanderons le nom du projet. Dans ce cas particulier, le nom du dossier est parfaitement correct. Il a tendance à la version sur ne le fixer qu'à 0.1 pour un projet sur lequel je viens de commencer. Le dernier concerne les patchs. Le chiffre du milieu est constitué de quatre fonctions aussi fixes que la modification. Et le premier chiffre principal est celui de casser les changements. En général, vous ne l'étiquetez pas comme version 1 tant qu'il s'agit d'une version de production stable. Je vais donc m'en tenir à 0,1 pour l'instant. Description. Vous pouvez éventuellement ajouter une description pour votre projet. C'est principalement si vous publiez votre projet dans le référentiel NPM et que vous ne publiez généralement pas de sites Web dans le référentiel npm. Mais il n'est pas nécessaire d'y mettre une description juste pour vous rappeler de quoi consiste ce projet particulier. Nous n'avons pas vraiment de point d'entrée car nous utilisons Qie Gei pour compiler le site Web. Mais ce que vous pourriez y mettre est public slash index.html, mais cela n'a pas vraiment d'importance. Nous n'avons pas de commande de test. Et j'ai déjà lancé git init dans ce projet car je le télécharge sur GitHub. Il est donc déjà nécessaire de prendre cela et il y a l'adresse du référentiel Git. Il est très pratique d'avoir cette adresse dans votre fichier package.json, ce qui permet de créer des mots-clés maintenant. Vous n'en voulez pas. Et c'est surtout si vous téléchargez sur NPM. Pour que les utilisateurs puissent rechercher votre projet. Auteur. Encore une fois, il s'agit d'une recherche instable pour vos projets, donc cela n'a pas vraiment d'importance. Et il est temps que nous ayons une licence. Ensuite, nous devons confirmer le côté gauche. Vous verrez que package.json va fermer le terminal pour que nous puissions y jeter un coup d'œil. Vous pouvez donc supprimer des éléments dont vous n'avez pas besoin. Je ne vais pas m'inquiéter du script principal de test Olivia pour l'instant. Je vais me débarrasser de l'auteur. Bugs Glycines dans la page d'accueil. Gardez à l'esprit que vous ne pouvez pas avoir de virgules de fin dans Jason doit se débarrasser de cette virgule de fin. Ensuite, nous sommes prêts à commencer à utiliser les scripts. Nous allons d'abord examiner sa div. Je vais revenir sur tout ça. Exécutons le serveur de développement. Comme vous le savez, nous étions sur le serveur Hugo, mais il y a encore quelques choses que nous pouvons faire pour avoir une idée de toutes les options qui une idée de toutes les options qui s' offrent à vous. Serveur. Si nous ouvrons un nouveau terminal et que nous avons parlé de Hugo, serveur, espace, tiret, tiret, aide. Il répertorie tous les drapeaux que nous pouvons appliquer. Ce qui nous intéresse vraiment, il est dash, dash G, C. Et cela exécute quelques tâches de nettoyage après la construction, ce qui est idéal pour garder les choses propres à être téléchargées pour obtenir, par exemple, pour sauvegarder vos progrès. Et le prochain qui nous inquiète est le rendu rapide désactivé. Et ce que cela fait, c'est qu'il permet des rendus complets lors des modifications, ce qui ralentit votre serveur de développement. Malheureusement, le rhomboédrique est extrêmement rapide. Et si vous avez été désactivé plus rapidement et que vous êtes activé, cela signifie que vous obtiendrez toujours la version la plus à jour du site. manière générale, nous allons exécuter dash, tiret G, C. Puis tiret, tiret, désactiver un rapide avec F majuscule et rendre avec R. majuscule et cela, pour moi, est la meilleure façon d' exécuter le script de développement. La partie suivante consiste à prévisualiser les fichiers. Il y a deux façons de le faire. Le premier concerne les brouillons de construction, et c'est pour créer un contenu marqué comme brouillon vrai. Et l'autre, c'est construire l'avenir. Et c'est pour le contenu dont la date est ultérieure par rapport à la date à laquelle vous exécutez les versions telles qu'aujourd'hui. Donc, je les combine généralement en un aperçu appelé. Allons-y et faisons-le. Et c'est en fait un raccourci. Ce que nous allons faire, nous allons mettre une virgule après ce script, puis nous effectuerons un aperçu des deux-points de développement. La façon dont nous utilisons le raccourci est npm. Exécutez le développement. Et puis tiret, tiret, espace, tiret, tiret. Construisez des brouillons avec le capital D, le tiret, le tableau de bord, construisez l'avenir. Vous devez placer un deux-points après le nom du script pour qu'il soit valide. Json dira cela et avant de continuer, nous allons l'essayer. Maintenant, au lieu de taper le serveur Cue Guys, à chaque fois, vous pouvez en fait descendre en bas à gauche où il est écrit des scripts npm et ils apparaîtront là pour vous. C'est la méthode automatique. Je vais d'abord vous montrer ceci , puis je vous montrerai comment le faire manuellement. Nous devons donc appuyer sur le bouton de lecture. Cette option n'est pas activée par défaut dans Visual Studio Code. Et ensuite, si vous regardez plus loin, vous verrez que la commande réelle, mais désactivée le rendu rapide et la collecte des ordures. Et le site a été construit. Vous pouvez ensuite utiliser le contrôle C pour arrêter ou vous pouvez simplement appuyer sur l'icône de la corbeille pour tuer le terminal. Nous avons ensuite eu notre avant-première. Il exécute également une tâche. Vous remarquez que c'est en deux étapes. Nous avons obtenu notre première commande, puis nous y avons ajouté nos options. Maintenant, la façon manuelle d' exécuter les tâches, si nous obtenons un nouveau terminal, je ne le fais pas normalement, mais vous devrez le faire de temps en temps, en particulier pour installer NPM. Et ensuite, si vous regardez à l'intérieur de votre package.json, vous verrez Dev. Il est en train de taper div, comme nous l'avons tapé ici. Npm run dev, c'est la commande exacte ou utilisée pour exécuter la première. Si vous voulez faire le second, il s' agirait de deux-points de développement, prévisualisez. Et cela exécutera le même script, mais vous pouvez généralement utiliser l'option côté gauche de Visual Studio Code. Faisons d'autres scripts. Certains le feront pour construire Q va, je vais mettre une virgule. Et ensuite, nous lancerons un deux-points pour être votés les commentaires. Donc, nous sommes là, vous devez commencer par. Ensuite, je vais vous montrer les options. Donc, nous lançons Hugo, Dash, Dash, aide. Le premier qui m' inquiète est verbeux. Et ce que cela fait, c'est que cela vous montre tout ce qui se passe , car parfois, lorsque vous exécutez le serveur, tout va bien. Mais lorsque vous souhaitez créer l'ensemble du site, vous rencontrerez un problème. C'est là que j'utilise Dash, Dash, Verbeux. Vous pouvez utiliser dash v. Dash v est très pratique lorsque vous le tapez et que vous voulez appuyer sur Entrée. Mais lorsque vous le placez dans un fichier, nous devrions le taper à chaque fois. Je vous recommande vivement d'utiliser la version complète. De cette façon, il est beaucoup plus facile à comprendre. Donc, en mettant Hugo dash, Dash, verbeux, puis nous utilisons la collecte des ordures. Donc, tiret G, C. Ensuite, nous utiliserons minify. Et que nous réduirons tous les fichiers HTML XML, modifiez n'importe quel code JavaScript HTML CSS pour la minify car il est destiné à la production. Et le dernier, nous le ferons parce que nous le sortons dans le dossier public. Nous allons utiliser Dash, Dash Clean destination. Dir dira que X1 est un que je trouve vraiment utile pour le développement. C'est le rendu sur disque. Et j'ai CamelCase. Cependant, ce que nous allons faire pour commencer , c'est que nous copierons et collerons la commande Hugo server. Collez ça dans. Nous retournerons dans le terminal d' invite et examinerons les options. Et une option, le rendu sur disque, et qui servira tous les fichiers du disque. Par défaut, tous les fichiers sont placés dans la mémoire de l'ordinateur et ils sont servis dans le navigateur. Il n'y a aucune trace de ceux-ci à regarder pendant que cela se produit, tout se passe instantanément. Si nous utilisons le disque rinces, tous les fichiers que nous avons placés dans le répertoire public, et vous pouvez y aller. Vous pouvez vérifier la taille des fichiers. Vous pouvez les ouvrir pendant qu'il est en cours d'exécution. Cela vous évite donc d'avoir à appuyer plusieurs fois sur le bouton Construire. Donc je le louerais sur le disque, en fait CamelCase, donc c'est le T majuscule, D. Et parce que nous utilisons le répertoire public, c'est là que les fichiers sont téléchargés par Hugo va copier et coller également le DIR de destination propre. Et en plus de cela, j'utilise une autre commande très similaire. Et c'est Brenda à ce genre de colon. Et nous ferons un aperçu. Et cela va être un peu semblable à notre scénario précédent. Pour div. Nous pouvons coller cela dans, sauf que cette fois nous n'exécutons pas la commande, nous exécutons le rendu sur disque. Le prochain que j'utilise, probablement le plus souvent est le rendu de cette production et c'est la principale que j'utilise. Copiez et collez. Sauf cette fois-ci. Nous n'allons pas faire de projets de loi et construire l'avenir. Nous allons utiliser l'environnement. Nous allons mettre cela en production. Donc, en feu sur la production de la menthe et réduisez également parce que nous essayons d'imiter cette construction de production qui a progressé. Nous utilisons minify. Nous n'avons pas à nous soucier du DIR de destination propre car je l'ai déjà fait dans le script de disque d'étude de salle principale. Et la dernière n'est pas entièrement obligatoire à avoir sous la main, mais la version hugo. C'est assez simple et honnête. C'est un peu un rappel. Version Hugo. Et cela vous permettra de savoir quelle version de Hugo vous utilisez. Par exemple, nous pouvons descendre, appuyer sur le bouton de lecture. Et il vous dira tout de suite quelle version d'Hugo. Et j'ai toujours utilisé Hugo étendu parce qu'il a la fonctionnalité de construction CSS et JavaScript intégrée. Mais ça me dit quelle version j'utilise, 1.11010. C'est un bonus. Les vacances sont utiles. vous recommande vivement de le configurer, le personnaliser en fonction de vos besoins. J'aimerais que vous puissiez prendre des captures d'écran et apparaître dans la section projet et me montrer comment vous avez personnellement configuré votre propre environnement de développement Hugo. 16. Bonus - Fichier de configuration Split: C'est une autre leçon bonus que je publie en fonction des commentaires étudiants qui vont faire est décomposer le fichier YAML du point de configuration en plusieurs fichiers pour faciliter la recherchez la section du fichier de configuration que vous recherchez. Pour ce faire, nous créons un dossier de fichiers à la racine de votre projet appelé config. Nous n'avons pas créé de dossier appelé soulignement par défaut. Ensuite, nous allons faire glisser notre point de configuration YAML dans ce dossier. Maintenant tout de suite, cela fonctionnera parfaitement bien. Mais ce que nous allons faire, c'est que nous allons séparer la section menu. Nous allons faire pour souligner tout cela et nous allons le couper. Il va créer un fichier appelé menu point YAML et nous le collerons. Mais ce qui doit se passer maintenant, c'est que nous devons supprimer l'élément de menu, mettre en surbrillance toute la configuration et la ramener à un niveau avec l'onglet Maj, car nous n'en avons plus besoin dans votre I20. parce qu'ils étaient dans menu.html. C'est fait automatiquement pour nous. Il y a un autre fichier que vous utilisez assez souvent et c'est params dot YAML. Normalement, vous avez un article Params par exemple. Là, vous pouvez aller, params peuvent faire quelque chose comme l'auteur du site, par exemple. Mais nous n'avions pas besoin de cela. Vous venez de placer l'auteur du site dans le nouveau fichier. Celui-là juste pour vite. Cela vous fera gagner beaucoup de temps. Cela permettra de garder vos sites beaucoup plus petits.