Hugo Compile SCSS et SASS en CSS

1. Introduction: Bonjour, je m'appelle Sean et bienvenue dans mon cours de compilation de CSS et de S avec Hugo Avant de terminer ce cours, il est supposé que vous avez des connaissances de base sur l'utilisation de Hugo si vous avez besoin d'aide. Dans la section des ressources ci-dessous, il y a un lien vers mon cours d'introduction à Hugo. Dans ce cours, j' utilise Bootstrap Five comme framework CSS Après avoir terminé ce cours, vous pourrez appliquer les compétences acquises à tout autre framework CSS ou à votre propre projet de code personnalisé. L'un se concentre sur les sujets suivants, packages NPM, la compilation de CSS et le S vers Création de préfixes de navigateur avec le préfixeur automatique, suppression des classes CSS inutilisées avec du CSS purgé Utilisation du fichier de liste de navigateurs bootstrap pour répliquer leur propre support de navigateur. Importation sélective de la source bootstrap pour minimiser la taille du fichier Personnalisation du bootstrap via ses variables. Et créer des classes utilitaires CSS personnalisées avec l'API utilitaire bootstraps Dans le deuxième projet, vous pouvez mettre en œuvre les compétences que vous avez acquises dans le cadre du premier projet, ainsi que votre propre créativité. Vous allez modifier un modèle de site Web que j'ai fourni. Je serai là pour t'aider en cours de route. Publiez simplement un lien vers votre travail dans la section du projet. Je mets constamment à jour ce cours fur et à mesure de l'évolution de Hugo et Bootstrap. Vous pouvez être sûr d'obtenir les informations les plus récentes. Je suis tellement contente que tu aies choisi de suivre mon cours. J'ai hâte de voir des progrès en cours de route. 2. Leçon2: Bienvenue dans le projet 1. Le projet 1 est un projet basé sur les compétences , puis les compétences que vous avez acquises seront utilisées de manière créative dans le projet 2 Avant de commencer avec le premier projet, examinons les prérequis de ce cours Vous aurez besoin d'une connaissance pratique de Hugo, juste des bases. Si vous rencontrez des difficultés, vous pouvez consulter mon cours d' introduction à Hugo et Bootstrap Il y a un lien dans la section des ressources. Hugo doit être installé localement. Vous pouvez l'apprendre dans mon cours d'introduction. Vous devrez également avoir installé nos, et cela inclut NPM, qui fait partie intégrante de ce cours Encore une fois, vous pouvez vous référer au cours d'introduction. Vous devez avoir installé le code Visual Studio ou un éditeur de code que vous connaissez bien. Je vais vous enseigner le cours via le code de Visual Studio, mais vous pouvez utiliser le vôtre. Si vous avez besoin d' aide pour l'installer, cliquez simplement sur le lien vers mon cours d'introduction et je vous montrerai comment installer tout ce dont vous avez besoin pour Hugo. Le premier projet est un projet basé sur les compétences et il faut travailler sur toutes les compétences répertoriées ici et dont j'ai parlé dans l'introduction. Il est très important que répertoriées ici et dont j'ai parlé dans l'introduction vous terminiez premier projet ou que vous ayez difficultés en cours de route, vous téléchargiez une copie de votre travail dans la section projet. ce faire, vous devez utiliser un service cloud, tel que Dropbox Cloud ou One Drive, ou Google Drive ou tout autre service cloud pour fournir un lien vers votre travail. Je ne pourrai alors jamais regarder votre travail et vous faire part de mes commentaires si vous rencontrez des difficultés en cours de route. Je te verrai au prochain cours. 3. Leçon3: Dans cette leçon, vous pouvez télécharger le fichier zip pour moins de trois personnes dans la section des ressources. Je vais ensuite procéder à un rapide déballage du modèle et j' expliquerai chaque section Si vous avez terminé mon cours d'introduction à Hugo et Bootstrap, vous comprendrez parfaitement le modèle Je fournis cette explication à ceux qui n'ont pas suivi mon cours d'introduction ou qui ne l' ont pas fait depuis un certain temps. Si vous avez des questions, n'hésitez pas consulter mon cours d'introduction à Hugo. Je vais laisser un lien vers cela dans la section des ressources, sous la troisième leçon. Jetons un coup d'œil au modèle avec lequel nous allons travailler. Vous pouvez trouver ces fichiers dans la section des ressources. Pour la troisième leçon, vous devez télécharger le dossier zip, puis l'extraire. Une fois que vous l'aurez extrait, vous aurez ce que j'ai ici. Si vous écrivez click, vous pouvez ouvrir avec le code VS. Ensuite, une fois que nous sommes dans le code VS, si nous ouvrons un nouveau terminal et que nous tapons le serveur Hugo, nous pouvons alors jeter un œil au modèle, vous pouvez contrôler le clic sur ce lien. Si nous inspectons la page, regardons à l'intérieur de l'en-tête, nous pouvons voir que le fichier CSS provient d'un réseau de diffusion de contenu CDN Et il télécharge le fichier CSS Bootstrap qui n'a pas du tout été modifié, il utilise simplement toutes les valeurs par défaut de Bootstrap. Ensuite, si nous faisons défiler la page vers le bas du corps, vous verrez que le fichier JS, encore une fois, est le fichier JS complet et qu'il provient du CDN. Maintenant que nous sommes dans le code VS, je vais vous donner un bref aperçu du fonctionnement du modèle. Si vous rencontrez des difficultés avec l'un de ces concepts, veuillez consulter mon cours d'introduction à Hugo. Vous verrez le lien vers ce lien dans la section des ressources. Les archétypes servent à créer une nouvelle page. Chaque fois que vous lancerez Hugo, le nouveau Hugo utilisera les données des archétypes pour générer une nouvelle page Le contenu de vos pages est stocké dans le dossier de contenu. Il existe deux types d'index Dodd marqué à la baisse, le point d' index D avec un trait de soulignement étant destiné à une page de liste Dans ce cas, ce point d'index MDs correspond à la page d'accueil. Mais si vous allez dans le dossier des produits, nous avons un tas de pages pour enfants ici. Notre indice de soulignement MD est un modèle de liste qui répertorie tous ces produits Et je vais vous montrer ce que sont les modèles de listes dans une seconde. Alors que ce point d'index MDs est une page unique normale. Nous n'utilisons pas de données dans ce projet. Si vous deviez afficher des informations extraites d'un fichier de données, vous les stockeriez ici. mises en page ici sont des valeurs par défaut, la base de correspond à l'ensemble de la Tous les différents composants HTML, nous avons des partiels et des blocs Les blocs sont contrôlés au niveau de la page. C'est notre bloc ici, le bloc principal de notre page unique. Les partiels sont extraits du dossier des partiels. Si nous utilisons un point d'index de soulignement d, nous utiliserons un modèle de liste S'il s'agit d'un point d'index standard d ou de tout autre fichier, nous utiliserons notre modèle unique. Voici tous nos partiels. Dans ce cours, nous allons travailler sur le pied de page du script. Nous allons remplacer le fichier Javascript du CDN. Dans la tête, nous allons également remplacer le fichier CSS CDN Bootstrap par Nous avons un dossier de résultats généré par Hugo. Tu n'as pas à t'inquiéter à ce sujet. Il y a un dossier statique, nous y avons un fichier CSS et un fichier JS. Dans ce cours, nous allons nous débarrasser de ce fichier CSS et le placer dans un dossier Assets afin que nous puissions le créer via CSS ou SS. Donc, si vous avez des questions sur ce que cela fait, veuillez consulter mon cours d'introduction à Hugo, sinon nous commencerons. 4. Leçon4: Dans cette leçon, nous initialisons votre projet Hugo en tant que projet NPM, créant ainsi un fichier Json de package Nous allons ensuite installer Bootstrap en tant que dépendance NPM. C'est-à-dire que nous téléchargerons Bootstrap depuis le registre NPM installerons dans le dossier des modules du nœud Ensuite, dans une leçon ultérieure, nous accèderons aux fichiers source de Bootstrap Nous allons configurer notre projet afin qu'il soit prêt à accepter les packages NPM Nots doit être installé dans le gestionnaire de packages NPM. Vous pouvez installer les deux en même temps en installant simplement des notes. Si ce n'est pas déjà fait, c'est très important. Vous voyez mon cours d' introduction à Hugo, et le premier Leslie consiste à télécharger tous les progiciels dont vous avez besoin, soyez prêt à commencer Ce que vous devez faire est de démarrer un nouveau terminal et d' exécuter la commande NPM Maintenant, si cela ne fonctionne pas, c'est probablement parce que vous n' avez pas installé NPM Revenez à cet autre cours et suivez ces instructions Lorsque vous l'exécutez, la première chose qu'il fait est de vous demander un nom pour le package. Maintenant, si vous comptez publier sur NPM, vous devez mettre un signe arobase au début et le nom de votre nom d'utilisateur NPM Mais nous n'allons pas publier sur NPM, nous l'utilisons simplement pour télécharger des packages Vous pouvez probablement accepter la valeur par défaut si vous le souhaitez Si vous avez déjà enregistré votre projet pour l'obtenir, elle l'intégrera probablement pour vous. Sinon, vous pouvez simplement lui donner un nom tel que Hugo SCSS ferait l' affaire ou bien sûr Hugo SCSS Alors je vous demande une version. Normalement, je vais commencer par 0.0 0.1 Mais cela n'a pas vraiment importance à ce stade, sauf si vous utilisez une description de l' outil de gestion des versions. Encore une fois, nous ne publions pas le NPM Ce n'est pas très important, mais vous pouvez toujours fournir une description si vous le souhaitez. Le point d'entrée ne s'applique pas vraiment à ce que nous faisons ici car il ne s'agit pas d'un véritable package NPM Nous n'avons pas besoin d'une commande de test. Encore une fois, si vous avez configuré un dépôt Git, vous l'intégrerez. Encore une fois, ce n'est pas si important car nous ne publions pas de mots clés. Ça n'a pas vraiment d'importance. Auteur, vous pouvez le configurer si vous le souhaitez et obtenir une licence. Maintenant, j'ai ce package JSON Jason. Si vous y regardez, vous verrez toutes les données que vous venez de saisir. Cela sert à gérer les packages. Le premier package que nous allons installer est Bootstrap. Pour ce faire, vous écrivez NPM puis vous installez Bootstrap Avant d'entrer, je vais simplement vous montrer comment cela fonctionne en le recherchant dans le registre NPM Je suis allé sur pms.com Je vais rechercher Bootstrap. Nous avons leur version 5 de Bootstrap. Nous avons ici une commande pour installer ce package NPM en particulier, ce qui est très pratique si vous êtes débutant Ils ont également créé un lien vers leur dépôt Github, où provient tout ce code Ensuite, nous devons créer un lien vers leur page d'accueil pour accéder à la documentation. J'ai des statistiques intéressantes. Vous verrez qu'ils sont téléchargés 3,5 millions de fois par semaine. Cela vous permet de savoir qu'il s'agit en fait d'un package très populaire et qu' il est actuellement en cours de téléchargement. Tu sais, il n'est pas périmé. Nous sommes dans la version 5.1 0.3. La version 5 est certainement ce que vous voulez. Vous pouvez voir que la dernière publication remonte à un mois. Au moins, vous savez qu'il est en cours de développement et qu'il n'est pas périmé Nous avons quelques documents de base ici, mais je vous recommande d'utiliser un lien vers leur site Web. Nous appuyons sur Entrée et le téléchargement se fera depuis le registre NPM. Et il est installé. Regardons à nouveau le fichier Json de package Nous allons fermer le terminal, vous verrez que nous avons une dépendance à Bootstrap. Si nous examinons notre projet, sous les modules de nœud, nous voyons que nous avons non seulement installé bootstrap, mais qu'il existe également un dossier sur PoperJS En fait, il s'agit en fait d' une dépendance entre pairs de Bootstrap. Il s'agit d'une bibliothèque supplémentaire dans la bibliothèque Javascript dont dépend Bootstrap Javascript Nous n'avons pas simplement installé Bootstrap, nous avons également installé certaines dépendances en même temps Si nous examinons le package Bootstraps Json , vous verrez qu' il existe une dépendance homologue de Pops, et c'est pourquoi elle est installée automatiquement Pour nous, c'est uniquement si vous avez version 7 ou supérieure de node JS, ce qui est probablement le cas. Il y a une dernière chose que vous devez faire, c'est que si vous utilisez Git pour enregistrer la progression, vous devrez accéder à votre Git et ignorer les modules du nœud qui se déplient car actuellement Git veut y valider 472 fichiers. Les fichiers viennent d'être téléchargés dans les modules du nœud. Vous ne voulez pas les télécharger votre dépôt Git et je vais vous expliquer pourquoi dans une seconde. Nous allons entrer dans notre Git ignore. Nous allons ajouter un nouveau nœud de ligne, des modules de soulignement. Finissez-le avec la barre oblique, enregistrez-le. Vous verrez qu'il ne s' agit que des trois fichiers sur lesquels je travaille actuellement. Mais je ne vais pas inclure git dans ce cours en particulier juste pour simplifier les choses. Maintenant, si vous deviez enregistrer ce projet pour obtenir le contenu du dossier des modules du nœud, il ne serait pas enregistré votre référentiel Get ou Github Juste pour vous montrer comment cela fonctionne, supposons que nous devions supprimer le dossier des modules du nœud pour émuler le téléchargement de ce projet depuis Get émuler le téléchargement de ce projet depuis Get Je vais vous montrer comment nous pouvons ensuite tout installer avec une seule commande. J'ai limité le dossier des modules des nœuds, vous venez donc de télécharger ce projet depuis votre compte get. Tout ce que vous avez à faire est d'exécuter NPM install. Il examine ensuite votre fichier package point json et installe tout ce qu'il contient dans notre fichier package point json comme nous venons de le voir. Nous avons Bootstrap. Comme vous pouvez le voir, deux packages ont été installés, savoir Bootstrap et pops C'est pourquoi vous ne validez pas le contenu de ce dossier de modules de nœud dans get car cela remplira votre compte get très rapidement. Nous devons ignorer ce dossier , puis si vous avez téléchargé votre projet de Get, vous n'avez qu'à exécuter l' installation de NPM et vous êtes prêt à partir Voilà. Nous avons installé Bootstrap en tant que dépendance NPM. Nous sommes prêts à commencer. 5. Leçon5: Dans cette leçon, nous allons configurer certaines commandes NPM. La raison pour laquelle nous faisons cela est de pouvoir exécuter rapidement différentes commandes hugo. Nous allons créer des commandes Hugo complexes. Vous ne voudrez probablement pas taper dans la ligne de commande. Si vous accédez à votre package sous forme de fichier, vous verrez que nous avons un script de test. Maintenant, nous allons commencer par créer un script de développement. Vous devez mettre une virgule après cela. Ensuite, nous allons créer un script de compilation. Nous allons d'abord marcher sur ces deux points, puis nous en ajouterons quelques autres. En termes de développement, vous savez que vous devez exécuter le serveur Hugo pour exécuter le serveur de rechargement automatique Il y a quelques éléments supplémentaires que nous pouvons ajouter à cela. Le premier est GC et c'est pour la collecte des ordures. Lorsque vous fermez ce serveur, il supprime tous les fichiers inutilisés. La prochaine étape que nous allons faire est de désactiver le rendu rapide. En fait, mettez des majuscules au début de chaque mot sauf le premier. Cela signifie que chaque fois que vous enregistrez un fichier, l'intégralité de votre site est rechargée, ce qui vous garantit de disposer de la version la plus récente de votre site La prochaine chose que nous allons faire est le script de compilation. Cette fois, nous allons simplement exécuter la commande Hugo. Nous allons ajouter GC pour la collecte des ordures. Cette fois, nous allons également nettoyer le dossier que nous utilisons pour la construction. Il sera créé dans un dossier public. Nous voulons nous assurer qu'il est complètement vide afin qu'il ne contienne aucun fichier obsolète provenant des versions précédentes du site Web Nous allons exécuter une destination D propre avec juste un D majuscule La prochaine chose que nous allons faire est d'unifier pour essayer de réduire la taille de ce fichier HTML minify Nous allons enregistrer cela et nous allons les vérifier. Vous verrez en bas si vous utilisez le code VS, il existe une section intitulée Scripts NPM Et c'est vraiment pratique. Ces deux scripts que nous venons écrire et qui sont maintenant disponibles ici, si vous maintenez votre souris dessus, vous pourrez voir la commande que vous avez écrite et ils s'alignent. Nous allons essayer si le développeur veut commencer par jouer. Il l'exécute dans le terminal, vous pouvez voir qu'il a créé les fichiers, il n'a fait aucun nettoyage avec la collecte des déchets. Il vous donne l'adresse. Vous pouvez cliquer dessus pour l' ouvrir dans le navigateur. Maintenant que nous sommes sur le site Web, nous allons écrire et cliquer, puis nous allons voir la source et vous verrez qu'il y a beaucoup d'espace blanc entre toutes les lignes. Revenons au code VS et nous essaierons d'exécuter le script de production. La première chose à faire est d'appuyer sur le contrôle C ou d' appuyer sur la corbeille. Ensuite, nous construirons. Cela ne va pas faire fonctionner un serveur, cela va juste écrire les fichiers sur le disque. Nous allons ensuite accéder au dossier public. Nous allons consulter notre index, Html. Vous allez voir comment il va, supprimer tous ces espaces blancs parce qu'ils exécutent la commande de minification Il y a encore une chose que vous devez faire et vous pouvez voir, essayer de récupérer tous ces fichiers que nous venons de créer. Nous devrons ignorer ces fichiers si vous utilisez Git pour la gestion des versions. Et pour sauvegarder votre travail, il vous suffit d'ajouter public. Et vous voyez, il est passé de 29 à 2. Nous ne faisons que transférer les deux fichiers sur lesquels nous travaillons pour y parvenir. Si vous en utilisez, vous n'avez pas à suivre ce cours, c'est très important. Je vais ajouter d'autres scripts à notre package, Jason. La prochaine étape que nous allons ajouter est le rendu qui, au fur et à mesure que Hugo s'exécute, affichera tous ces fichiers le disque afin que nous puissions les inspecter si nécessaire Nous copierons et collerons le contenu du script de développement. La seule chose importante est d'ajouter un rendu sur disque, car nous travaillons sur le disque. Nous devons également nous assurer de nettoyer le répertoire de destination avant que cela ne se produise. Vous devez mettre une virgule après votre deuxième commande. Maintenant, pour le rendu, nous allons créer ce render dev car nous fonctionnons en tant que serveur de développement. Nous en créerons ensuite un , sauf pour la production, afin de pouvoir tester à quoi ressemblera le site Web en production. Mais avec un serveur de développement, nous allons mettre un développeur de rendu et nous allons changer celui-ci en Render Prod pour la production Nous allons apporter quelques modifications. La première chose à faire est de lui dire que ce sera un serveur de production. Nous allons créer un espace environnemental qui imitera ce à quoi ressemblera votre site Web lorsque vous exécuterez la version Par exemple, il se peut que certains scripts ne s'exécutent qu'en production. Ou des éléments qui pourraient être unifiés, par exemple avec Javascript ou SCSS. La prochaine chose que vous devez ajouter est Unify. C'est uniquement pour votre code HTML. Vous devez également être capable d' exécuter un serveur de développement, mais pour les fichiers dont les dates sont dans le futur. Et aussi pour les fichiers ou les pages marqués comme brouillons. Nous allons copier-coller notre script de développement et le coller ci-dessous, nous l'appellerons brouillons de développement à deux points Ensuite, nous allons ajouter deux options. Le premier sera de constituer capital futur et de créer des brouillons Je n'aime pas utiliser ces deux options pour la production, car je trouve que c'est un peu trompeur, car ce n'est pas ce qui va se passer sur le serveur. Mais j'aime bien l' utiliser pour le serveur de développement. Il y a une dernière commande que vous allez saisir ? Et c'est pour PM, c'est vraiment difficile à utiliser lorsqu'il s'agit de mettre à jour vos packages. Mais il existe un programme que vous pouvez installer qui est plutôt graphique et qui rend les choses vraiment faciles. Ouvrez un nouveau terminal et exécutez NPM install NPM ou Hyphen Check, cela vous indiquera que huit packages sont installés et que ce sont des dépendances de sont des dépendances de Si vous regardez dans votre dossier qui n'est pas un module, vous verrez qu'il commence à être un peu plein. Mais le principal que nous avons réellement installé était NPM Check. Mais il y en a beaucoup d'autres que les dépendances de NPM vérifient. Ensuite, nous passerons à une nouvelle ligne et nous vérifierons que vous pouvez écrire une mise à jour, mais cela peut être trompeur. Il s'agit en fait d'une mise à jour avec NPM. Je l'appelle simplement NPM check. Je sais exactement ce que je fais. Mettez une colonne puis des virgules inversées. Et la commande que nous allons exécuter, NPM check, vous devez l'exécuter, c'est pour la mise à jour, sinon vous n'aurez pas cette option lorsque vous cliquerez dessus Nous pouvons le tester en cliquant sur PM check, cela nous indique qu' Irving est à jour Et c'est parce que nous venons d'installer Bootstrap. Mais si vous avez des packages obsolètes, cela vous donnera une liste des packages qui peuvent être mis à jour. Nous allons tester rapidement la commande de rendu. Nous allons faire du développement du rendu pour commencer, vous verrez qu'il construit Hugo, mais il s'agit également d'un rendu sur disque. Si nous accédons à notre dossier public, il s'agit de tous les fichiers utilisés sur le site Web de l'hôte local. Si nous examinons notre indice HL, vous verrez beaucoup d'espace. Je vais fermer ça. Je vais m' occuper de la production du rendu. Si vous regardez très attentivement, vous verrez production de l'environnement plutôt que le développement. Et voici tous nos fichiers, mais ils sont également visibles sur le serveur de chargement de la bibliothèque. Si nous ouvrons le code HTML à points d'index, vous verrez qu' il n'y en a pas tous, mais que la plupart des espaces blancs ont été supprimés pour réduire la taille du fichier. Asseyons-nous donc pour cette leçon. Je te verrai dans le prochain. 6. Leçon6: Dans cette leçon, nous allons ajouter d'autres packages NPM. Et nous le faisons pour pouvoir ajouter hugo en tant que dépendance NPM Cela signifie que la personne qui travaille sur le projet ou quel que soit l'endroit où vous travaillez sur le projet, que ce soit sur un autre ordinateur, vous utiliserez la même version de Hugo. Il fonctionnera sur n'importe quelle plateforme, que ce soit Linux, Mac ou Windows. Hugo téléchargera dans le format requis pour cette plateforme. Nous allons installer deux packages NPM. Ouvrez un nouveau terminal. Nous allons saisir NPM install Le premier est l'installateur Hugo. second est du même auteur et il s'agit de vous assurer que tous ces noms sont correctement orthographiés car si vous les orthographiez mal, vous pourriez télécharger quelque chose que vous ne voulez pas. Jetons un coup d'œil au fichier Json de package. Vous verrez dans la section Dépendances que nous avons maintenant chaque épingle et Hugo installé. Le moyen le plus simple de faire fonctionner le programme d'installation de Hugo est de vous rendre dans la section des dépendances. le mettez après sur une nouvelle ligne, insérez une nouvelle section intitulée autres dépendances, vous utilisez un D majuscule pour les dépendances. Nous avons ensuite mis deux points et quelques accolades sur une nouvelle ligne, virgules inversées tapant Hugo, Ensuite, vous devez fournir la dernière version. Vous allez le taper exactement comme Hugo l'a fait sur leur site Web. Je vais lancer une recherche pour la version Hugo. Ensuite, je vais aller sur la page Github. Vous voyez que la version actuelle, lorsque cette leçon a été enregistrée, est 0.89 0.4 Nous allons taper cela exactement sans les points en V. 0,89 0,4 Vous n'avez pas besoin d' une ligne après cette ligne ou après les bretelles, car ce sont les dernières de leur section respective Ensuite, nous passerons à notre script. Nous allons mettre ici un script final appelé post install. Maintenant, post install, votre avant-dernier script, post install va s'exécuter. Une fois l'installation de NPM exécutée, nous mettrons deux points. Et puis aux virgules inventées. Et nous allons lancer le programme d'installation de Hugo , que nous venons d'installer. Pour la version, nous utiliserons d'autres dépendances hugo. Et cela fera référence à cette section que nous venons de créer. Vous pouvez donc mettre Hugo à jour ici. Ensuite, nous lui demanderons d'installer la version étendue qui installe le fold sous Linux et la carte Mac sous Windows. Ce n'est pas le cas. C'est vraiment important que vous en ayez besoin pour ce que nous allons aborder dans cette leçon sur le CSS et la construction. Nous devons indiquer à l'installateur Hugo où nous voulons que les fichiers contenant le fichier exécutable Hugo soient téléchargés. Nous allons spécifier la destination, puis nous allons les installer dans les modules de soulignement des nœuds Dans Hugo, vous devriez probablement dire à get ne pas télécharger le dossier des modules du nœud. Vous obtiendrez un fichier ignoré, vous n'avez pas à vous soucier téléchargement de votre fichier Hugo. Nous allons enregistrer cela. Si nous exécutons la commande NPM install, hugo le sera. Cela dépendra de votre système et sera enregistré dans le dossier des modules du nœud. Allons-y et faisons-le. Lancez l'installation de NPM, il passe en revue et vérifie, il télécharge maintenant le binaire Hugo sous Windows, ce sera un fichier C. Allons y jeter un coup d'œil. Maintenant, dans notre dossier de modules de nœuds, nous recherchons des modules de nœuds. Hugo, nous sommes là, puis il y a Hugo. Et vous verrez que nous avons Hugo Doc. Si vous utilisiez Macolinux, vous auriez un fichier exécutable adapté à votre système . C'est génial. Mais nos commandes ici concernent toutes Hugo Server ou Hugo. Ils ne pointent pas vers ce fichier. Et nous essayons de configurer nos scripts de manière à soient multiplateformes ou indépendants Nous devons ajouter quelques éléments supplémentaires à cela que nous allons faire. Je vais cliquer avant Hugo. Chaque fois que je vais maintenir le bouton Alt enfoncé, cela signifie que je peux tous les modifier en même temps. Je vais lancer Exec bin. Exec bin, qui est un autre package que nous venons de télécharger Je vais dire à exec bin de regarder à l'intérieur des modules du nœud Shinhugo Ensuite, nous avons besoin d'un indicateur indiquant exactement que le bac est multiplateforme, qu'il est indépendant de la plate-forme. Il exécutera le fichier hugo, en fonction du système sur lequel vous vous trouvez. Sauvegardons cela et exécutons l'un de nos scripts ici. Et essayez-le. Il semble donc que cela fonctionne vraiment bien. Il utilise la version étendue de Hugo dont nous avons demandé le téléchargement. Vous pouvez voir des fichiers exécutables exécutant l' exécutable Hugo à partir de modules connus Hugo, Hugo. Ou si vous utilisez Macolinux, ce ne sera pas le cas, ce qui est génial. Voilà pour cette leçon. Je vais voir dans la prochaine leçon où nous allons commencer à construire avec du CSS. Et comme 7. Leçon7: Dans cette leçon, nous allons importer les fichiers source CSS bootstrap à partir du package bootstrap NPN Ensuite, nous allons les compiler en CSS afin qu'ils puissent être utilisés dans un navigateur. Ce que nous allons faire, c'est que si vous regardez dans votre dossier de mise en page, dans les partiels et dans la partie de tête, vous verrez que le CSS Bootstrap est extrait d' un serveur CDN ou d'un réseau de diffusion de contenu Il télécharge la version 5.1 0.3 de Bootstrap C'est un fichier CSS défectueux contenant toutes les valeurs par défaut de Bootstrap Votre couleur principale sera le bleu, votre couleur secondaire sera le gris. Rien n'a été personnalisé. Cela inclut tout. C'est un dossier assez volumineux. Ce que nous allons faire, c'est extraire le CSS Bootstrap du package NPM Et puis dans une autre leçon, nous allons le personnaliser et également supprimer des pièces, nous n'avons pas besoin de le faire Ce que nous allons faire, c'est revenir à la racine du projet. Nous allons créer un nouveau dossier appelé Assets. Il s'agit d'un dossier avec lequel Hugo travaille. Ensuite, à l'intérieur, ils créeront un dossier appelé CSS. Ils y créeront un fichier appelé Mass. ne nous reste plus qu'à importer le CSS Bootstrap depuis le package MPM Nous allons exécuter l'importation puis y insérer un comer inversé Nous cherchons des bottes. Bootstraps. Cela va être relatif au dossier des modules du nœud. Assurez-vous de mettre un rhume à la fin. C'est ce que nous rechercherons. Nous allons aller dans le dossier Nodemodules, puis nous allons descendre Ensuite, nous examinons le CSS. C'est une source qui a compilé du CSS dont nous ne voulons pas. Nous voulons la source. Nous allons dans le dossier SCSS et vous verrez en bas nous avons un fichier CSS bootstrap C'est ce que nous allons extraire de ce dossier. Tous ces fichiers sont importés dont les pièces sont prêtes à être utilisées. Nous devons maintenant configurer Hugo pour qu'il utilise liss pour exécuter ce fichier SCSS. Actuellement, rien ne va vraiment se passer avec ce fichier, il est juste là pour revenir dans les mises en page de tête, Partiels, tête, nous allons commenter ce contrôle de ligne KC pour le commenter Nous allons le laisser là, mais juste au cas où nous en aurions besoin pour les tests. Plus tard, nous essaierons de le faire aussi simplement que possible. Pour commencer, mettez deux crochets K et nous allons créer une nouvelle variable appelée CSS Parce que nous la déclarons, nous devons utiliser la saisie de deux points Nous allons gérer des ressources, obtenir des ressources, saisir une ressource Le chemin que nous allons fournir est relatif au dossier des actifs. Nous revenons à notre dossier Assets, vous verrez qu'il s'agit de assets, SS, SS, je vais le taper en masse. C'est ainsi que nous accédons au fichier. La prochaine chose que nous faisons est de compiler le contenu de ce fichier. Parce que le navigateur, je dois juste dire ceci, ne sait pas quoi en faire. De plus, ces fichiers existent dans le dossier NPM et le navigateur ne pourra pas y accéder. Hugo ne fournira pas ces fichiers. Nous allons les intégrer et les traiter. Nous devons le faire, le mettre dans un tuyau, ce qui est la clé ci-dessus. Entrez la barre oblique inverse, déplacez la barre oblique inverse pour obtenir un tube. Et nous allons exécuter deux CSS. Il s'agit d'un CSS majuscule qui fonctionnera tout seul sans aucune option. Mais il ne sait pas où se trouve ce bootstrap, plié à boto fold Il ne sait pas qu'il doit regarder dans le dossier des modules du nœud. La configuration va être fournie sous forme d'objet. Mais dans Go et Here Go, cela s'appelle un dict ou un dictionnaire. Nous avons mis entre crochets, puis réécrit notre premier élément de configuration et le premier élément de ce rapport à temps sera celui des chemins d'inclusion Lorsque vous spécifiez les chemins d'inclusion, un tableau doit leur être fourni. La raison en est que vous pouvez fournir plusieurs chemins d'inclusion. Un tableau est le moyen idéal pour y parvenir. Ouvrez et fermez nos crochets et nous tapons Slice, dans Go et dans Hugo Slice, c'est ce que vous utilisez pour les tableaux, nous allons fournir un élément C'est donc un peu étrange pour un tableau, mais vous pouvez en ajouter d'autres si besoin est. Nous allons fournir des modules de soulignement des nœuds comme chemin à inclure. Ensuite, nous devons fournir un lien pour le navigateur. Si nous saisissons un lien, deux points fournit un lien de style, nous supprimerons ce fichier. Nous allons mettre nos bretelles bouclées. Nous ferons référence à la variable CSS que nous venons de créer, L permalien avec R majuscule et majuscule. Ensuite, tu dois fermer tes bretelles. Hugo fournira un lien vers ce fichier qui a été généré via cette variable Rel permalien, ou un permalien relatif signifie qu'il n'inclura pas le domaine, une partie du domaine avec ce lien partie du domaine Sauvegardons cela et vérifions-le. Ensuite, nous cliquerons sur le lien et nous le vérifierons dans le navigateur. Nous allons cliquer avec le bouton droit de la souris et inspecter. Nous allons passer à la tête. Vous verrez d'abord qu'il existe un lien vers Cssmin. C'est ce fichier bootstrap. En fait, ce fichier a été converti en fichier CSS via cette variable. Si nous allons dans l' onglet Sources puis ouvrons le dossier SCSS, nous pouvons afficher le contenu du fichier qui vient d'être généré Vous verrez que c'est à peu près exactement le même que le CSS Bootstrap que vous pouvez obtenir partir du CDN ou que vous pouvez même télécharger sur le site Web de Bootstrap Il y a de nombreux avantages. Nous pouvons modifier toutes ces informations, et bien d' autres encore, par le biais de variables. Nous pouvons également retirer les pièces dont nous ne voulons pas. Nous pouvons même aller jusqu'à supprimer les parties inutilisées du fichier par rapport aux balises que nous avons demandées dans le code HTML de notre site Web. Si vous parvenez à faire apparaître le CSS Bootstrap dans le dossier SCSS de votre SS principal, vous êtes prêt à passer à la leçon suivante 8. Leçon8: Dans la dernière leçon, nous avons configuré la compilation SCSS. Nous devons maintenant créer des paramètres pour les environnements de production et de développement afin que le compilateur CSS se comporte différemment, que nous utilisions un serveur de développement ou que nous développions une production pour Hugo Four Dans la section des ressources, vous verrez un lien vers cette page. Ce sont les pipes Hugo, CSS et la page, le nombre d' options que nous pouvons transmettre lors de la compilation Je vais d'abord regarder le transpileur. Par défaut, Hugo utilise actuellement Lipsas. Nous allons configurer cela de manière à obliger Hugo à utiliser Lipsas Juste au cas où Hugo passerait aux fléchettes. À l'avenir, nous n' aurons aucun changement majeur. Nous allons examiner le style de sortie. La valeur par défaut est imbriquée, ce qui est idéal lorsque nous développons Mais nous voulons également qu'il soit compressé si c'est pour réduire la taille de la production. Nous allons examiner la possibilité d'activer cartes en sauce pour le développement. Nous avons déjà examiné les composants inclus pour les modules de nœuds. Allons-y. Si vous allez dans le dossier des mises en page , puis dans le dossier des partiels et dans le code HTML, mettez en évidence tout ce que vous avez fourni à deux CSS Toutes les options que vous avez fournies, qui ne sont actuellement que l'option «   inclure la passe », mettez-la en surbrillance et supprimez-la avec le contrôle X ou la commande X. Au lieu de cela, nous fournirons une variable que nous appellerons qui opte pour les options du CSS Déclarons maintenant cette variable et créons les options que nous allons mettre entre accolades Nous allons taper opt to CSS parce que nous le déclarons. Nous devons utiliser du charbon et de l'intercalaire. Nous allons ensuite créer un dictionnaire qui sera un objet pour nos options. La première chose que nous allons faire est le transpileur. Le transpileur que nous allons utiliser est Lisa. La raison pour laquelle nous bloquons cela, c'est qu'à un moment ou un autre Hugo passera à Dart As et que nous ne voulons pas de modifications majeures Nous déclarerons ensuite le style de sortie par défaut. Le style de sortie est imbriqué, ce qui est excellent pour le développement, mais nous voulons utiliser le format compressé pour la production Nous étudions actuellement nos options de production. Ensuite, nous avons notre dernier, Include Pass, que vous pouvez simplement coller si vous le souhaitez. Ce sera une tranche et nous avons des modules de nœuds. D'accord, ce sont donc nos valeurs de production. Vous pouvez ensuite le copier et créer une nouvelle ligne. Et nous allons utiliser une instruction if s'il s'agit d'un environnement if égal à O avec un développement E majuscule. Si nous sommes dans un environnement de développement, nous y mettons une balise. Nous allons taper puis coller ce que nous venons d'écrire, mais vous devez supprimer cette colonne. C'est super important. Nous allons maintenant supprimer le style de sortie compressé car nous voulons utiliser la valeur par défaut, imbriqué. Mais nous allons activer les cartes sources, exemple au singulier, il n'y a pas de source à la fin, c' est juste une source avec un sur le ES. Puis cartographiez avec le capital et le capital. Nous allons utiliser l'option « vrai ». Vous n'avez pas besoin d'utiliser des virgules inversées autour true car il s'agit d'un C'est vrai ou faux, aucune virgule inversée n' Gardons-le et essayons-le. Je vais commencer par le script de développement, puis nous allons contrôler le clic et l' ouvrir dans le navigateur. Ensuite, nous allons cliquer avec le bouton droit de la souris et inspecter. Nous allons aller dans Sources et ouvrir CSS Mass. Si vous faites défiler l'écran vers le bas, vous verrez qu'il existe un lien vers la carte source que nous avons générée, ce qui est idéal pour le débogage Donnons le script de production à lancer. Nous allons maintenant contrôler C pour quitter, puis Y, sinon vous pouvez simplement utiliser le bouton dans la corbeille pour tuer le terminal. Nous lancerons ensuite la production. Pour cela, il va falloir utiliser la commande Render. Cliquez sur Render Production Control. Ensuite, vous pouvez écrire, cliquer et inspecter, accéder aux sources, puis au CSS et peut-être pas au CSS. Vous verrez qu'il a été réduit ou compressé. Nous devons donc supprimer tous les espaces blancs. C'est sur une longue ligne. Si vous avez raison , il n'y a aucun lien vers une carte source, ce qui est idéal pour la production. Ce n'est pas ce que nous voulons. Des fichiers supplémentaires ont été écrits et les cartes sources ne sont pas vraiment utiles pour la production. De plus, cela signifie qu'Allah ne peut pas se faufiler et voir exactement comment notre code est écrit Il est un peu plus difficile pour les autres de décomposer notre code, mais ce n'est pas impossible si vous pouvez faire les scripts de développement et de production fonctionner les scripts de développement et de production, si vous disposez de la munification, vous n'avez aucune carte source sur votre production, sur votre développement. Vous avez un code non unifié et vous avez une carte source. Vous êtes prêt à passer à l'étape suivante, nous verrons dans la prochaine leçon. 9. Leçon9: Dans cette leçon, nous allons prendre les empreintes de la sortie CSS Nous allons appliquer une somme de contrôle, un hachage au fichier Cela signifie que chaque fois que nous mettons à jour le fichier, il redirige le navigateur vers la version la plus récente de ce fichier. y aura aucune confusion avec le fait que le navigateur met en cache les anciennes versions du fichier Vous pouvez également utiliser les empreintes digitales pour des raisons de sécurité, mais nous n'aborderons pas la mise en œuvre de cela dans ce cours Votre dernier lien vers cette page se trouve dans la section des ressources de la page Hugo Pipes consacrée à la prise d'empreintes digitales et au SRI Maintenant, si vous utilisez les empreintes digitales uniquement pour le déchiffrer assurez-vous que le navigateur demande la version la plus récente du fichier récente du Si vous faites constamment évoluer de nouvelles versions de la page et que vous voulez vous assurer que le navigateur recherche la version la plus récente, vous devriez probablement utiliser MD Five. Md 5 va être un peu plus court. Toutefois, si vous essayez de sécuriser votre site Web avec le CSP, ce que je n'aborderai pas dans ce cours, vous pouvez utiliser un cryptage de haut niveau tel que le S HA 384 Allons-y. Nous allons suivre ce processus ici dans notre projet sur notre ligne avec la variable CSS. Nous utilisons des ressources pour extraire le fichier du dossier des ressources. Nous l'exécutons ensuite via deux CSS pour le traiter. Nous allons ensuite exécuter une autre commande. Au lieu d'un tube avec shift back, nous allons utiliser la commande Fingerprint. L'option que nous allons utiliser est MD Five. Et cela dit de garder le nom du fichier un peu plus court car il utilisera un hachage à la fin du nom du fichier Si vous utilisez le CSP pour des raisons de sécurité, vous ne voudrez peut-être pas utiliser MD Five, vous pouvez simplement le conserver par défaut Dans ce cas, vous vous en débarrasseriez complètement. Nous allons utiliser MD Five juste pour que le nom de notre fichier soit court. Nous allons ensuite entrer dans notre étiquette ici. Le nom du fichier généré par une empreinte digitale sera automatiquement inséré dans le lien. Pour des raisons d'intégrité, nous devons mettre une étiquette d'intégrité à cet effet. Nous utiliserons quelques accolades et ce sera du CSS, qui est la même variable que celle utilisée pour notre lien de fichier, mais il s'agira de données dont l'intégrité sera en majuscule D. Ensuite, nous ferons un espace et fermerons nos bretelles Ur. Nous allons enregistrer cela et nous allons y jeter un œil. Ensuite, si nous regardons dans le code source, allez sur le lien, vous verrez que les noms des fichiers ont changé. Il contient la première partie principale, mais ensuite ils ont inclus un hachage qui est un MD Five. Ensuite, dans la balise d'intégrité, il y a MD 5 et une clé qui peut être utilisée pour vérifier qu' il s' peut être utilisée pour vérifier agit bien du bon fichier, mais nous n'allons pas utiliser le CSP pour voir comment le configurer avec des frappeurs, parce que c'est un tout autre sujet Si vous avez réussi à générer un fichier haché et à générer votre balise d'intégrité, vous êtes prêt à passer à la leçon suivante 10. Leçon10: Nous allons maintenant installer deux autres packages NPM, à savoir post CSS et Autoprefixer Nous les utilisons parce que lorsque vous exécutez la source CSS Bootstrap à partir de leur package NPM, ils ne fournissent pas de préfixes pour les C'est ce que fait Bootstrap lorsqu'il propose sa source CSS précompilée Nous allons suivre exactement le même processus afin que le fichier que nous produisons ait même compatibilité avec les anciens navigateurs que le CSS précompilé Bootstraps Donc, si vous regardez la page de documentation Bootstrap pour Bill Tools, il s'agit plutôt de créer une version du fichier CSS qui correspond exactement à la leur, mais ils utilisent SAS pour compiler, ce que nous faisons Ensuite, ils vont lancer Autoprefixer. Ce que nous allons faire, c'est copier le fichier de liste des navigateurs Bootstrap afin de prendre en charge exactement les mêmes navigateurs que Bootstrap prend en charge lorsque vous téléchargez leur fichier CSS par défaut depuis leur Avant de commencer à voir comment implémenter le post-CSS et le préfixe automatique Nous allons donc avoir besoin d' un fichier pour définir les navigateurs que nous essayons de cibler en termes de préfixage Avant de continuer, nous allons nous rendre sur la page Github de Bootstraps Vous pouvez le trouver en consultant le lien dans la section des ressources. Ou vous pouvez effectuer une recherche sur Google pour Bootstrap Github. Accédez à la page, puis faites défiler la page vers le bas et recherchez les navigateurs sous forme de point de liste de navigateurs. Le moyen le plus simple de s'en emparer est de copier le contenu de ce fichier, puis de vous rendre à la racine de votre projet, de créer un nouveau fichier dans la liste des navigateurs R, puis de coller les informations de la page Bootstrap Skew Hub dans ce fichier coller les informations de la page Bootstrap Skew Ce fichier indiquera Autoprefixer les préfixes qu' il doit créer. De nombreux anciens navigateurs nécessitent des préfixes différents sur les classes CSS, n'est pas si courant sur les navigateurs modernes En définissant les navigateurs que nous ciblons, nous utilisons la liste par défaut de Bootstrap. Ici, nous évitons d'ajouter un nombre excessif de cours. Par exemple, nous n'allons pas fournir de préfixes pour Internet Explorer Nous sommes de retour sur la page Hugo sous Hugo parts for post CSS, et vous trouverez un lien à ce sujet dans la section des ressources. Si vous avez une lecture rapide, vous verrez que vous devez avoir une CLI post SS, et vous devez également avoir une post-CSS, et vous devez avoir un préfixeur automatique Hugo suggère maintenant que vous les installiez dans le monde entier. Je vous recommande de les installer dans l'environnement. Nous allons revenir en arrière et ajouter d'autres packages NPM, ouvrir un nouveau terminal, ouvrir un nouveau terminal, puis exécuter l'installation de NPM Le premier était le post CSS, puis le post CSS CLI, puis Autoprefixer Nous avons demandé trois packages, 39 ont été installés car il y a beaucoup de dépendances. Nous avons demandé trois packages. 54 ont été installés car il y a beaucoup de dépendances. Si vous ouvrez votre package Jason, vous verrez que nos dépendances sont répertoriées ici et qu'elles ont été ajoutées. Ensuite, en parcourant la documentation, vous verrez que nous devons utiliser les ressources PostSS, il existe un raccourci pour contourner cela, mais vous pouvez supprimer la partie ressources, puis vous pouvez les mettre en minuscules Essayons cela. Passez aux mises en page, aux partiels et à la tête. Ensuite, à la fin de notre chaîne CSS juste avant l'empreinte digitale, nous mettrons un autre tube. Ensuite, nous publierons des articles sur nos options. Nous allons retourner voir le médecin. Nous devons maintenant créer un fichier de configuration pour le post-CSS. Post CSS recherchera automatiquement ce fichier de configuration à la racine du projet. Nous allons créer un fichier à la racine du projet et nous l' appellerons post Css config. La première chose à faire est porter le préfixeur automatique en tant que plug-in. Nous exécuterons un préfixeur automatique constant, ce qui équivaut à nécessiter un crochet ouvert, deux virgules inversées et le préfixateur équivaut à nécessiter un crochet ouvert, automatique mettra un point-virgule à la fin Nous devons ensuite exécuter les exportations. Nous ferons des exportations de modules égales à des crochets ouverts. Nous indiquerons les plugins en deux points et nous ferons un crochet. C'est là que les choses commencent à se compliquer. Revenons à notre script Hugo, nous remarquerons que le post-CSS est exécuté en permanence, à la fois en développement et en production. Le moyen le plus simple de le configurer pour qu'il ne fonctionne qu'en production n'est pas d'utiliser cette partie ici dans Hugo, mais d'utiliser JS. Il est beaucoup plus facile de le remplacer à des fins de test. Vous verrez que nous pouvons accéder à l'environnement Hugo. Retournons en arrière. Nous accédons à l' environnement de Hugo par le biais d'un processus. Ceci est un environnement de soulignement de Hugo en majuscules. Nous cherchons trois équivalents pour une réplique exacte de ce qui a été écrit. Et c'est cela le développement. Il existe un, vous pouvez avoir plusieurs environnements de production différents. En ce qui concerne le développement, vous n'avez probablement que celui qui consiste à tester avec le serveur de chargement de bibliothèques. Ensuite, nous allons mettre un point d'interrogation. S'il s'agit d'un développement, nous allons renvoyer null, mais nous allons en fait renvoyer quelques tableaux Nous allons mettre la valeur nulle entre crochets. La ligne suivante, nous la placerons dans une colonne. Et tout cela peut être fait sur une seule ligne, mais nous les séparons pour faciliter les choses sur cette ligne. Ce sont les plugins qui s' exécuteront lorsqu'il ne s'agit pas d'un développement. Nous allons retourner à Autoprefixer et nous ajouterons un autre plug-in lors de la prochaine leçon Comme nous avons fourni les valeurs renvoyées sous forme de tableaux, nous avons besoin des chaînes individuelles, non du tableau de chaînes Pour extraire les chaînes des tableaux, on les a placées en trois points, au début de cette ligne Et puis, lorsque cette ligne est exécutée, elle fournira au tableau une valeur nulle à l'intérieur ou elle fournira au tableau un préfixeur automatique Nous allons déconstruire ce tableau en chaînes individuelles à cause des trois points Cela devrait fonctionner. Nous allons enregistrer cela. Nous exécuterons le serveur de développement, nous le testerons avec le serveur de développement d'origine. Tout d'abord, vérifiez le nombre de préfixes actuellement présents. Et ce sont des préfixes intégrés à Bootstrap. Cela fait partie des points normalisés. Nous exécuterons le serveur de développement, nous contrôlerons le clic sur le lien pour vous rafraîchir. Après le rechargement, le serveur ne s'actualise pas automatiquement lors du premier chargement Vérifiez ensuite vos sources. Passer à CSS et à Main. Et nous allons faire une recherche de contrôle pour le kit Web. Vous verrez qu'il y en a 40 en cadeau. Ils sont fournis par défaut avec du CSS normalisé. Le CSS normalisé est un fichier HTML qui a été écrit pour que tous les éléments de nombreux navigateurs se ressemblent CSS normalisé remplace les paramètres par défaut du navigateur de telle sorte que tous les navigateurs se ressemblent un peu Bootstraps l'utilise, et ils y ont également travaillé un peu Et ils l'ont inclus dans Bootstrap. C'est de cela que proviennent ces 40 classes de webkit. Clôturons maintenant ce processus. Nous allons exécuter la production du rendu. C'est dans un environnement de production qui imite ce qui se passe lorsque vous créez Vous verrez que leur environnement est celui de la production. Passons au contrôle, cliquez sur le lien. Ensuite, nous allons passer à Sources, CSS et Main, et nous allons faire Control et webkit Vous y verrez les 99 classes présentes. préfixe automatique a ajouté ces 99 classes en fonction du fichier de liste des navigateurs Si vous regardez directement à la racine, vous verrez la liste des navigateurs B RC basée sur les navigateurs spécifiés par Bootstrap. Ce sont les préfixes Web. Ce sont les préfixes informatiques requis pour les navigateurs qui seront les plus anciens de cette liste, généralement pas les plus récents Vous pouvez modifier cette liste si vous spécifiez des navigateurs plus anciens que ceux présents ici. Vous obtiendrez plus de préfixes. Mais certains attributs CSS ont été utilisés dans la version actuelle de Bootstrap, Bootstrap Five, qui, même avec des préfixes, ne fonctionneront pas dans les anciens navigateurs, vous devez faire attention Ce fichier produira un fichier CSS, pris en charge par Bootstrap. Attention, vous n'allez pas trop loin, sinon vous risquez de ne pas obtenir les résultats par la suite. Si vous pouvez produire un fichier CSS avec environ 99 préfixes dans l'environnement de production, vous pouvez exécuter votre environnement de développement, le serveur de développement , et vous disposez de 40 Cela signifie que vous utilisez correctement Autoprefixer et que vous êtes prêt à passer à la leçon suivante À voir la prochaine leçon. 11. Leçon11: Maintenant que nous avons configuré Hugo pour compiler la source CSS bootstrap un fichier CSS répondant aux mêmes spécifications que le fichier CSS disponible au bootstrap, qui est téléchargeable sur leur Nous allons maintenant utiliser un package appelé CSS pour supprimer les classes CSS inutilisées. Pour réduire la taille du fichier, nous devons installer le programme de purge CSS. Si vous recherchez NPM et purgez le CSS, vous arrivez sur cette page qui est installée avec NPM ou NPM install, puis Mais ne vous y trompez pas, car ce package particulier ne fonctionnera pas avec Post CSS et Hugo. Ce dont vous avez besoin, c'est du plug-in suivant et je vais mettre la commande correspondante dans la section des ressources de cette leçon. Il s'agit d'une version de Per CSS qui fonctionne comme un plugin pour le post-CSS. Une fois que nous l' avons installé, nous pouvons l' exécuter avec ce code Javascript ici. Allons-y, nous copierons et collerons cette commande, et nous l'exécuterons dans notre projet. Nous allons ouvrir un nouveau terminal. Nous allons coller le code qui est installé. Allons-y maintenant et écrivons le code dans notre fichier de configuration CSS post Nous allons commencer par ce texte ici, nous allons le copier. Ensuite, nous allons coller ce texte sous le préfixe d' alignement automatique en haut de la page Maintenant, pour simplifier les choses ici, comme vous l'avez vu, nous avons copié et collé les crochets ouverts et fermants pour exécuter le préfixe automatique À brancher par le haut à l' endroit où il est défini. Nous le ferons également pour PerGSS. Ce que nous devons faire, c'est nous débarrasser complètement de cette ligne et de ses crochets associés. Ensuite, nous allons nous débarrasser du mot par CSS. Nous allons aborder cette question. Nous pouvons utiliser Alt Shift pour reformater tout ce qui semble très neuf Nous passerons ensuite la source sur une nouvelle ligne. Et nous allons également intégrer ce crochet de fermeture sur une nouvelle ligne. Nous allons remplacer le dossier source par layouts. C'est là que réside notre code HTML. L'étoile double fait référence à n'importe quel dossier dans les mises en page, ou il peut même s'agir de l'absence de dossier dans les mises en page Si nous n'avons pas de nouveaux dossiers, faites une virgule et une nouvelle ligne, nous mettrons des virgules inversées et nous créerons du contenu star, star, star, Dod Cela fera référence à tous les fichiers Markdown s'ils se trouvent dans un dossier ou s' ils ne sont pas contenus dans le contenu Maintenant, cela ne fournira que des classes HTML CSS aux publications qui ont été explicitement écrites dans Markdown via C'est Pss qui ne connaîtra aucune balise HTL produite via Markdown Maintenant que nous l'avons configuré, il ne nous reste plus qu'à y aller. Il est écrit « préfixeur automatique ». Nous allons mettre une virgule , puis nous allons exécuter la purge. La constante CSS, qui sera référencée ici. Nous branchons le plug-in, puis nous l'exécutons avec ces paramètres. Essayons-le. Nous allons enregistrer notre configuration. Nous devons exécuter le produit, effectuer la production pour vérifier qu'il fonctionne. Ensuite, nous cliquerons sur le lien ou ouvrirons votre navigateur. Si vous l' avez déjà lancé, actualisez votre page, nous allons cliquer avec le bouton droit de la souris, nous allons inspecter. Ensuite, nous passerons aux trois points. Et nous allons passer à d'autres outils. Et nous allons gérer la couverture. La couverture apparaîtra en bas. Tu dois recharger. Vous pouvez contrôler R ou commander R, ou vous pouvez appuyer sur le bouton Recharger, puis recharger votre site Et il permet de suivre la quantité de ressources utilisées. Par exemple, dans le fichier Javascript, 65 % du fichier Bootstrap Javascript n'est pas utilisé Vous pouvez ignorer le chargement de la bibliothèque car il provient de Hugo. Mais le principal SS dit que 47 % ne sont pas utilisés. Faisons une vérification dans une minute. Nous allons comparer cela avec le script de développement dans lequel aucun de ces plugins n' est en cours d'exécution. Mais nous allons vérifier rapidement que toutes les pages fonctionnent. Avant de continuer, nous avons rencontré notre premier problème, c'est la pagination La pagination n'a pas été fournie via le fichier HTML, elle a été fournie via un modèle intégré à Hugo Revenons rapidement au projet et examinons cela. Un bref récapitulatif au cas où vous auriez suivi le dernier cours, afin que vous puissiez voir exactement comment cela fonctionne Si vous entrez dans les mises en page et par défaut, listez le HTML. Vous verrez en bas de page que nous intégrons le modèle de pagination interne de Hugo Retournez sur le site Web et nous inspecterons. Et nous verrons quelles classes sont utilisées. Nous allons en fait cliquer avec le bouton droit sur la navigation cassée et l'inspecter. Nous avons quelques cours. Nous avons la pagination, page par défaut est désactivé, l'élément de page est actif Et puis nous avons le lien de page qui correspond à chaque lien fourni. Revenons maintenant à purger le CSS, la configuration, et à le configurer de manière à ce qu'il mette ces classes CSS sur liste blanche. Si vous accédez à la page de documentation Pss, purgez CSS.com et oplink dans la section des ressources, nous passons à Vous verrez que nous pouvons fournir ces informations de plusieurs manières pour purger le CSS. Il existe une liste sécurisée standard dans laquelle vous pouvez mettre une liste de cours ou nous pouvons vous fournir des formulaires standard approfondis et gourmands Voici quelques exemples. Si vous avez l'air gourmand, c'est très utile pour nous car il utilisera le texte que vous avez fourni Il y aura également des cours de chaque côté. Ces exemples utilisent le texte à la fin du cours. Si nous nous débarrassons de ce signe dollar et que nous mettons une carotte, soit le sixième décalage, au début de la chaîne, nous utiliserons le texte au début de la chaîne et ce sont des commandes re jx Passons à notre configuration et nous allons la configurer, copier-coller cette configuration de liste sécurisée. Nous allons revenir sur nos projets et les mettre en place. Nous allons mettre une virgule à la fin de la section de contenu. Nous allons coller ce que nous avons dans la documentation pour supprimer ce qui se trouve à l'intérieur de Deep et Standard et aussi à l'intérieur de Greedy Pour l'instant, nous allons commenter les versions standard et approfondie, car nous n'allons pas les utiliser. Rédigons simplement une liste rapide de toutes les classes que nous essayons de cibler. Ce sont tous nos cours. Écrivons quelques rejets. Nous allons commencer par les deux premiers. Si nous faisons une barre oblique puis une carotte, c' est-à-dire le sixième décalage puis la pagination, pagination par défaut sera Ensuite, nous allons le mettre sur une nouvelle ligne pour rendre les choses un peu plus faciles à lire. Mettez une dernière barre oblique puis une virgule pour notre prochain rejet Carrot fait correspondre ce texte au début de la chaîne. Cela ne correspondra à rien avant la pagination du mot, mais il correspondra aux éléments suivants car nous utilisons greedy Vous allez ensuite rechercher la page qui reprendra tous ces cours ici. Supprimons nos notes. Nous allons enregistrer cela, nous allons vérifier le site. Ça a l'air super. Nos liens vers les pages précédentes sont désactivés sur la première page, ce qui est désactivé car nous sommes déjà sur la première page. Nous avons la page actuelle qui est surlignée en bleu. Nous avons la deuxième page et nous avons les liens de la page suivante et de la dernière page qui fonctionnent tous. Génial. Faisons maintenant une comparaison rapide pour voir quelle taille de fichier nous avons réellement économisée. Ce que nous allons faire, c'est désactiver la purge du CSS. Je vais le mettre sur sa propre ligne, puis je le commenterai avec un double et je l'enregistrerai. Ensuite, nous retournerons dans le navigateur, nous inspecterons et nous actualiserons. J'ai affaire à 165 kilo-octets et 96 % d'inutilisés. Ensuite, je vais réactiver la purge du CSS. Nous allons actualiser avec le contrôle ou la commande R. Nous avons 13 kilo-octets et seulement C'est une réduction assez importante si vous avez réussi à atteindre ce stade où vous avez activé par CSS et réduit considérablement la taille de votre fichier, et dans la section de couverture, vous avez un pourcentage beaucoup plus faible inutilisés et vous avez réussi à faire fonctionner votre pagination Vous êtes prêt à passer à la leçon suivante. Voyez-y. 12. Leçon12: Maintenant que nous avons fini d' écrire notre code pour la compilation de la source SCSS, nous allons maintenant déplacer tout ce script vers un script partiel afin qu'il puisse être réutilisé pour importer d'autres fichiers SCSS De cette façon, nous n'avons pas à copier-coller notre code. Nous pouvons simplement appeler le partiel plusieurs fois avec différents paramètres. La première chose à faire pour créer notre partiel est de le placer dans la tête et de trouver le code que nous voulons déplacer. Toute cette section va être déplacée dans une section partielle. Nous allons couper ce code, puis nous retournerons dans notre dossier de partiels. Nous allons créer un nouveau fichier. Nous l'appellerons lib sa hl. Si je l'appelle libsas, c'est parce que dans notre configuration, nous forçons Hugo Che Lipsas, qui est actuellement la Mais cela peut changer et nous ne voulons pas de changements radicaux. Nous allons enregistrer cela ici. Nous ciblons le fichier. Je vais le souligner et contrôler ou commander X pour le couper et le remplacer par un point. Et nous allons enregistrer le fichier. Ensuite, nous allons configurer, appeler notre partiel afin que le fichier que nous essayons de récupérer soit le contexte du partiel. Revenons à notre tête, mettons les deux crochets, et nous exécuterons la fonction appelée partial. Le partiel sera, comme vous n'avez pas besoin de mettre du HTML, puis après les libsas, normalement, pour un partiel, vous devez mettre un point final Vous fournissez le contexte complet de votre projet Hugo à la partie partielle. Mais dans ce cas, nous allons coller le nom du fichier. Maintenant, par exemple, nous voulions créer un fichier Vendors CS. Nous reviendrons sur nos ressources et notre CSS et nous créerons un nouveau fichier, que nous appellerons fournisseurs. Dans ce cas, c'est aussi simple que de créer un nouveau partiel. Nous pourrions même copier-coller celui-ci. Nous allons remplacer le CSS principal par le CSS du fournisseur. Supposons que nous devions intégrer des plug-ins tiers. Nous pourrions exécuter leur code dans le fichier des fournisseurs si nous voulions le diviser et réduire la taille du fichier afin de réduire le temps de chargement des pages en raison du chargement simultané des fichiers. C'est une excellente façon de le faire pour le moment. Je vais faire un commentaire là-dessus. Pour commenter les tags Hugo, nous mettons barre oblique , puis une barre oblique Parce que je n'utilise pas ce fichier actuellement. Exécutons-le et vérifions-nous qu'il fonctionne. Il semble que cela fonctionne bien. Il suffit d'aller inspecter nos sources. Tout fonctionne toujours comme nous le souhaitions. Si vous avez réussi à générer le CSS même après avoir placé votre code dans un partiel, vous êtes prêt à passer à la leçon suivante. 13. Leçon13: Nous finissons donc de traiter les packages NPM et le script Nous allons maintenant voir comment importer uniquement les parties de la source Bootstrap dont nous avons besoin Cela réduira considérablement la taille du fichier, et c'est à certains égards mieux que Perd CSS. Mais il y a évidemment des choses que Perd CSS fait que vous ne pouvez pas faire par le biais d'une importation sélective. Je vais commencer cette leçon sur le site Web de Bootstrap Five Docs et je mettrai le lien vers cette page en particulier Dans la section des ressources, nous allons personnaliser et Sas. Notre projet est actuellement configuré pour importer l'intégralité du projet Bootstrap, mais l'objectif de cette leçon est de créer une importation allégée Nous importons simplement les parties de Bootstrap que nous voulons pour notre site Web C'est l'option A. Nous allons examiner l'option B. Et c'est ainsi que nous n' incluons que des parties de Bootstrap. Vous verrez ici qu'ils l'ont décomposé en morceaux. Mais si vous lisez le texte très attentivement, vous devez inclure tout ce que vous voulez. Et ils n'en incluent que des parties ici pour vous. Ce que nous allons faire, c'est nous plonger dans le package Bootstrap et examiner toutes les différentes parties importées Et configurez notre propre fichier SS principal pour n'importer que les parties de Bootstrap dont nous avons besoin Nous allons commencer par copier-coller tout ce qui se trouve ici Ensuite, nous allons ouvrir le dossier Assets CSS et le CSS principal. Et vous verrez qu'à l'origine nous importons l' ensemble du projet Bootstrap. Nous allons simplement le commenter pour le moment car c'est une bonne référence. Ensuite, nous allons coller le texte que nous venons de copier sur le site Web de Bootstrap. Vérifiez la référence ci-dessus, vous verrez que nous avons des bottes. Ici, c'est Bootstraps. Dans les exemples fournis, vous avez des modules de nœud, nous devrons supprimer cette partie des modules de nœud au début. Vous pouvez les faire toutes en même temps simplement en le surlignant puis en cliquant avec le bouton droit de la souris et en modifiant toutes les occurrences. Et nous allons le supprimer, c'est prêt à être utilisé. Cependant, nous n'avons pas encore inclus tous les composants de Bootstrap. Nous allons enregistrer notre fichier, puis nous allons vérifier ce que Bootstrap contient dans ses projets Nous allons ouvrir des modules de nœuds, examiner quelques-uns, trouver Bootstrap. Nous examinons les dossiers CSS comme ici. Bootstrapssn navigue vers ce fichier original , Bootstrapss. C'est juste en bas. Voici quelques autres fichiers. Nous y avons des utilitaires, un redémarrage et un réseau. Importations facultatives. Les personnes qui ne souhaitent pas utiliser toute la bibliothèque Bootstrap. Ils vont probablement simplement importer, par exemple, la grille ou le redémarrage. Si nous regardons ici, vous verrez tous les composants. Nous allons tous les mettre en évidence. Copiez-les. Ensuite, nous fermerons le dossier Node Modules car il est toujours volumineux et encombrant Revenez ici et nous les collerons en bas. Ensuite, nous découvrirons ce que nous avons et ce que nous n'avons pas. Nous avons des fonctions en haut pour pouvoir les supprimer. Nous avons des variables et des mélanges. Nous n'avons pas encore de services publics, puis tout cela jusqu'au bas de l'échelle. Nous ne les avons pas importés. Nous avons maintenant un petit problème. C'est-à-dire que nous devons configurer le chemin car actuellement ces liens sont relatifs au bootstrap dans le dossier node modules, alors que nos liens d'importation ici sont relatifs à notre fichier Ce que nous allons faire, c'est mettre en évidence tout cela. Coupez-les, puis nous les collerons ici. Nous devrons mettre en évidence la première partie de l'URL. Ensuite, maintenez l'ancienne touche enfoncée, cliquez au début de ces importations et collez-la dedans. Une autre façon de le faire est mettre en évidence tout ce qui s'y trouve, juste ceux que vous n'avez pas, l'URL complète et de les couper. Créez un nouveau fichier, collez-le dedans, revenez en arrière, surlignez la partie que vous devez ajouter. Copiez-le. Ensuite, vous pouvez surligner cette partie du code, cliquer avec le bouton droit de la souris et modifier toutes les occurrences. Utilisez la touche fléchée et collez-la. Cela vous fait gagner beaucoup de temps. Ensuite, nous allons le supprimer. Fermez le fichier. Et collez-le dedans. Nous y sommes presque. La prochaine chose que nous devons faire est de créer un fichier pour les remplacements de variables par défaut et créer un fichier pour du code personnalisé supplémentaire Nous retournons dans notre dossier SCSS et nous allons créer un nouveau fichier Pour les fichiers qui ne sont pas destinés à être importés directement, nous utilisons des traits de soulignement Nous allons souligner les variables personnalisées, le CSS, le CSS personnalisé Ensuite, nous retournerons dans notre page principale et nous y mettrons un lien d'importation. Vous n'avez pas besoin du survol lorsque vous effectuez une importation, nous allons créer des variables dont vous n'avez pas besoin du CSS Cela résout ce problème automatiquement. Il faut mettre les deux points à la fin. Ensuite, nous allons faire défiler la page vers le bas. Étape 5, nous allons effectuer une importation et ce sera du CSS personnalisé. allons mettre une colonne et nous allons simplement corriger le nom de ce fichier qui s'est terminé par un trait de soulignement C'est bon. Nous dirons que nous allons l'exécuter, nous allons vérifier que tout fonctionne. Ensuite, nous y retournerons et nous commencerons à désactiver certaines parties de Bootstrap pour le rendre plus léger et vraiment importer les parties dont nous avons besoin Cependant, cette étape n'est pas aussi bonne que l' étape précédente. Nous avons purgé le CSS Vous devez exécuter ces deux choses ensemble pour vraiment obtenir un petit fichier. Nous allons manquer de script de développement, la page fonctionne toujours. Regardez-le rapidement, nous pouvons voir que nous avons cartes d'images de la barre de navigation, nous avons la pagination Voici certaines des choses que nous devons nous assurer de ne pas supprimer. Passons en revue notre liste. Nous ne pouvons supprimer aucun des éléments de configuration en un à quatre, nous pouvons passer en revue les composants. Il est plus que probable que vous ayez besoin d'un root et d'un redémarrage. Tapez des images, des conteneurs et une grille, nous n'utilisons pas de tableaux, nous pouvons les commenter. Vous pouvez en fait mettre en évidence certaines choses. Nouveau contrôle K C ou commande C dans le code VS. Nous aurons besoin de boutons. Nous mettrons en évidence les transitions, les listes déroulantes. Groupe de boutons, nous aurons besoin de la navigation, de la barre de navigation et de la carte. Nous n'utilisons ni accordéon ni chapelure. Contrôlez KC pour les commenter, nous sommes un groupe d'alertes ou de progression, fermer, griller, une infobulle modale, un carrousel, spinners hors canevas ou espaces réservés, contrôlez KC pour vous en débarrasser Nous y garderons l'API d'assistance. Nous allons enregistrer cela et nous irons consulter notre site. Vous devez parcourir très attentivement l'ensemble de votre site et vous assurer qu'aucun code CSS de votre site n'a été altéré par ce que vous venez de faire. C'est un processus qui demande un peu de travail, mais chaque fois que vous limitez les importations de CSS ou que vous modifiez ou purgez la configuration CSS, il est très important de vérifier si vous n'avez pas cassé le site et que tout fonctionne correctement Si vous avez réussi à réduire votre importation de CSS bootstrap à quelques composants dont vous avez besoin et que vous n'avez pas cassé le CSS de votre site Web, vous êtes prêt à passer à l'étape suivante et vous vous en sortez vraiment bien avec le projet 14. Leçon14: Nous allons maintenant examiner la personnalisation du fichier CSS Bootstrap qui a été généré afin qu'il contienne des éléments tels que les couleurs, les tailles, les ombres de style qui correspondent à l'apparence que nous voulons donner à notre Par défaut, Bootstrap est assez générique, et il existe de nombreux sites Web qui utilisent les valeurs par défaut de Bootstrap. Nous cherchons à les modifier, mais sans créer de code CSS supplémentaire qui finira par créer des fichiers plus volumineux pour votre site Web. Nous allons en fait changer la source Bootstrap afin que le résultat soit différent Mais nous le faisons sans toucher aux fichiers du dossier des modules du nœud. Il suffit de créer notre propre fichier de variables. Commençons cette leçon sur la même page de documentation bootstrap que la précédente Sur la page, nous avons tout terminé dans la section Structure des fichiers et importation. Nous passons maintenant aux valeurs par défaut des variables. Et il indique que chaque variable as dans Bootstrap inclut l'indicateur d' exclamation par défaut Si vous le supprimez, vous pouvez remplacer cette valeur par défaut par votre propre variable sans modifier les codes sources du bootstrap Il n'est pas nécessaire de modifier le code source du bootstrap. Vous n'avez pas non plus à votre propre CSS pour le remplacer Nous pouvons réellement modifier le code source du bootstrap via nos propres variables Bootstrap est installé dans le dossier non modules. Nous n'y modifions rien du tout, nous fournissons simplement nos propres variables. Lorsque nous importons Bootstrap, vous trouverez une liste complète des Bootstrap dans le fichier SS des variables de soulignement Nous allons vérifier cela dans une minute car c'est de là que nous allons les copier-coller. Vous devez importer les fonctions bootstraps, ce que nous avons, alors nous avons déjà créé notre propre fichier pour cette section Ici, nous allons intervenir et consulter le fichier CSS de la variable bootstrap Ensuite, nous commencerons à thématiser notre site Web à l'aide de variables. le premier exemple, nous copierons et collerons les variables que Bootstrap nous a fournies pour la couleur d'arrière-plan et la couleur du texte pour le corps Avant de plonger dans le dossier des modules du nœud, nous allons ouvrir notre dossier de variables personnalisées et les coller dedans. Nous le thématisons avec un fond noir et une couleur de texte très foncée Nous allons toujours le garder, mais nous allons simplement le sauvegarder et nous y jetterons un œil. Cela a évidemment fonctionné. Ce n'est pas la meilleure idée, mais au moins nous savons que cela fonctionne. Revenons en arrière maintenant et redéfinissons le thème de notre site Web à notre goût. Il nous a dit de les supprimer complètement et de les enregistrer. Comme vous pouvez le constater, les couleurs par défaut d'origine sont revenues couleurs par défaut d'origine Je vais aller dans les modules Node, les déposer dans Bootstrap, puis ouvrir le fichier sans variable C'est ici que nous trouvons toutes les variables par défaut. La première chose que nous allons faire est de descendre et de trouver les variables pour la couleur du texte et la couleur d'arrière-plan. Après l'avoir lu plusieurs fois, vous commencerez à vous souvenir de l'emplacement de tout. Toutes les variables courantes sont présentées ici. Nous avons le fond du corps, couleur du corps et la ligne de texte. Nous allons simplement copier les deux premiers. Voici le hic. Je vais juste les coller dedans. Voici notre premier problème. Si je sauvegarde ceci, le compilateur SCSS live Sas ne saura pas ce que signifie le blanc et il ne saura pas ce que signifie le grain 900 La raison pour laquelle il ne le saura pas, c'est qu'à ce stade, les seules choses qui ont été importées sont les fonctions. Il n'a importé aucune des variables de couleur que nous pouvons voir ici. Je vais juste le garder . Il génère une erreur et indique une variable blanche non définie Si je le commente et que je l'enregistre, cela génère une erreur différente qui est la variable indéfinie gray, 900 Ce que nous devons faire va à l'encontre de ce que recommandent les documents du SCSS Si vous n'êtes pas sûr de savoir quels sont les documents SCSS, c'est de l'argot do com là-dedans, vous trouverez tous les documents pour exécuter CSS et As on l'appelle communément Mais si vous regardez les documents, par défaut, chaque page utilise le CSS par défaut Par exemple, nous allons entrer dans l'une des pages, elle est déjà sur SCSS. Nous pouvons le changer en SS, mais il est par défaut en SCSS car le SCSS devient de plus en plus populaire C'est parce que le SSS est écrit exactement comme le CSS avec quelques différences mineures qui sortent du cadre de cette classe Pour résoudre notre problème, nous devons examiner les variables et trouver la variable blanche et la variable grain 100. Et nous devons déclarer ces variables avant de les modifier. ces classes, nous allons Dans ces classes, nous allons mettre quelques lignes vierges. Retournez dans Variables, et nous ferons défiler la page vers le haut. Certaines personnes copient et collent le fichier entier, mais c'est un peu excessif. Nous allons copier-coller dans nos zones grises en haut. Nous pouvons leur laisser les balises par défaut si nous le voulons, car nous ne les modifierons pas. Ensuite, nous descendrons et trouverons nos couleurs. Voici les couleurs de base. Collez-les dedans. Je dirais qu'il y a de fortes chances que vous ayez besoin de mapper les couleurs primaires et secondaires, etc. Nous ferions donc mieux de les mettre dedans. Eh bien, c'est vrai. Si vous devez également vous assurer de conserver la même commande. Parce qu'ici, le primaire fait référence au bleu, puis le bleu est déclaré ici. Maintenant que nous allons supprimer le blanc par défaut, nous allons le remplacer par le clair, qui est une couleur beaucoup plus douce car la couleur du corps du fond est actuellement sur le gris 900. Merci, nous allons plutôt l'essayer sur le Gray 800. Nous allons enregistrer cela, nous allons le vérifier. Ça a l'air super. La couleur de notre texte est beaucoup plus douce. Arrière-plans. Un toboggan blanc cassé. Si nous inspectons et passons à autre chose, vous verrez que la couleur est une variable. Bs, couleur du corps, la couleur de fond est BS, corps BG. Nous allons cliquer dessus, vous verrez qu'il y a un 800 gris. Si nous cherchons le fond du corps, il s'agit en fait d'un IGB, mais c'est la couleur de notre lumière Cela fonctionne Eh bien, allons-y maintenant et nous allons changer notre couleur primaire pour quelque chose d'un peu plus agréable au changer notre couleur primaire goût Il est très courant que les gens utilisent cette couleur bleue. Nous pourrons ensuite passer en revue et modifier également l'apparence de nos cartes. La façon la plus simple de le faire est de nous débarrasser du bleu. En fait, nous pouvons simplement choisir l'une de ces couleurs. C'est le moyen le plus élémentaire. Ensuite, je vais vous montrer une méthode plus avancée. Nous ne voulons plus être bleus. Nous voulons qu'il soit orange, par exemple. Nous tapons simplement la variable orange car elle a déjà été déclarée ici. Nous allons enregistrer cette modification. Notre secondaire pourrait rendre 700 un peu plus sombre. Fais juste attention. Mais comme le texte de notre bouton est également gris, nous ne voulons pas qu'il y ait de conflit. Nos primaires deviennent désormais oranges. Et partout où nous avons utilisé primaire pour l'un de nos éléments, il est désormais modifié sur l' ensemble du site, ce qui est bien plus facile que de remplacer le CSS Nous allons ensuite entrer et changer nos cartes. Nous allons entrer dans notre fichier de variables le fichier bootstrap du package MPM Nous ferons le contrôle et nous chercherons une carte. Nous en sommes maintenant à la section des cartes. Nous allons souligner tout cela. Et nous allons faire attention car cela fait référence à d'autres variables et cela va provoquer une erreur. Nous allons le copier-coller. Nous allons revenir à nos variables personnalisées. Nous essaierons de garder les choses dans le même ordre. Nous devrons trouver la largeur de la bordure des entretoises compliquée. Comme vous pouvez le constater, c' est pourquoi certaines personnes se contentent de copier-coller le fichier entier. Ce qui nous inquiète vraiment, que j'aimerais changer le rayon, nous allons passer au rayon de bordure de la carte, il utilise le rayon de bordure. Une façon de le faire est de supprimer des parties. Nous ne voulons donc pas modifier pour dire que je voulais juste changer le rayon de la bordure. Peut également modifier l'épaisseur de la bordure. Je vais supprimer les trois premiers. Nous allons laisser la couleur pour le moment. Nous allons changer le rayon. Je vais supprimer le reste pour simplifier les choses. Nous avons quelques variables ici, nous avons le rayon de la bordure et la largeur de la bordure. Nous allons simplement enregistrer cela. Vous verrez que cela va générer une erreur. Nous allons retourner dans notre fichier de variables et rechercher la largeur et le rayon de la bordure. La méthode la plus simple consiste à revenir à la largeur de la bordure de contrôle supérieure. Nous avons une largeur de bordure d'un. Le moyen le plus simple de changer est de simplement saisir une valeur de deux P x trois Px et ainsi de suite. Ensuite, nous avons le rayon de la frontière. Je vais les copier toutes, je les mettrai au-dessus des cartes. Supposons, par exemple, que je souhaite modifier le rayon de ma bordure. Tout d'abord, débarrassez-vous de la valeur par défaut. Je pourrais le changer pour, par exemple, pour lui donner un petit rayon. Notre largeur de bordure, qui est actuellement d'un pixel, pourrait la remplacer par deux P X. Et nous allons enregistrer cela, nous allons vérifier. Nous avons maintenant notre bordure de deux pixels de large et notre rayon serré. Si nous cliquons avec le bouton droit de la souris, inspectons et passons à l'étiquette de la carte, vous verrez un rayon de bordure de 0,2 m, ce qui est un rayon de bordure très serré. Ensuite, bordez une bordure de 22 pixels d'épaisseur. Cela a été fait exactement comme nous l'avions demandé. Si vous faites défiler la page vers le bas de presque toutes les sections de la documentation de bootstrap, cela vous indique quelles variables vous pouvez remplacer pour les personnaliser, c'est vraiment pratique Supposons, par exemple, que vous vouliez avoir une bordure de deux pixels sur vos cartes, mais que vous vouliez que tout ce qui a une bordure soit de deux pixels. C'est vraiment facile. Nous allons simplement laisser la largeur de bordure par défaut. Vous pourriez même le commenter car nous ne l'annulons pas Nous remontons ensuite à la largeur de la bordure, que nous n'avons pas copiée et collée. Nous allons rechercher à nouveau la largeur de la bordure, assurez-vous que vous recherchez la première instance. Nous allons revenir à la première. Nous allons donc copier-coller la largeur de la bordure, pour nous assurer qu'elle est dans le bon ordre. Ensuite, nous allons changer ces deux éléments. Désormais, chaque élément de votre site Web qui a une bordure aura une largeur de deux. Et nous aurons toujours une largeur de bordure de deux. La dernière chose à faire est d'examiner les couleurs et de regarder les couleurs changeantes. Je n'utilisais pas de bootstraps, couleurs par défaut avant de passer du primaire à l'orange Et c'était en utilisant une orange intégrée. Nous pouvons le faire de deux manières. Tout d'abord, nous allons voir comment modifier l'orange. Nous allons supprimer le drapeau par défaut dans le code VS. C'est assez simple, il suffit de survoler le petit échantillon qu'il vous donne Ensuite, nous pourrons apporter quelques modifications. Nous avons donc voulu y ajouter un peu plus de rouge. On peut le traîner vers le haut, ce n'est plus vraiment une orange qui a changé, mais plutôt un coup de soleil. Nous allons enregistrer cela. Maintenant, l'orange devient plutôt un rouge éclatant de soleil Dans l'autre cas, je vais juste faire remarquer qu' Orange ne le commentera pas parce que cela pourrait être nécessaire plus tard. Je vais juste contrôler Ed pour le ramener. L'autre chose que nous pouvons faire, c'est qu'au lieu d'utiliser une variable ici, nous pouvons mettre un hachage puis une couleur Par exemple, si nous commençons simplement par blanc par exemple, passez la souris dessus Nous pouvons ensuite y entrer et personnaliser à n'importe quelle couleur. Où. Une fois que ce sera entièrement à nous de décider, je pense que je pourrais opter pour un beau bleu profond. Eh bien, faites attention au blues, car sur nombreux sites Web de bootstrap, nous allons enregistrer cela C'est notre principal. Je vous recommande, si possible, de les mapper à des variables de couleur. De cette façon, vous pouvez les utiliser plus bas dans votre code. Quoi qu'il en soit, c'est une façon de procéder . Ensuite, nous allons vérifier. Notre bleu profond est reproduit sur tout le site. Si vous avez réussi à remplacer variables bootstrap et que vous avez réussi à modifier certains composants du site grâce aux différentes méthodes que je vous ai présentées, vous êtes prêt à passer à la leçon suivante 15. Leçon15: Nous allons maintenant envisager de créer nos propres classes utilitaires. C'est-à-dire des classes comme celles que nous utilisons et qui font partie de bootstrap. Mais nous allons créer les nôtres car parfois, le bootstrap ne suffit pas Il existe une API, un système intégré Bootstrap qui nous permet de créer nos propres classes assez facilement Nous allons recommencer cette leçon sur une page Bootstrap Do Nous examinons maintenant l'API utilitaire qui se trouve dans la section utilitaire sous API sur le Bootstrap Five Utilisons-nous l'API utilitaire pour générer nos propres classes utilitaires ? Les classes utilitaires sont les classes que nous utilisons avec Bootstrap. Les deux éléments requis lorsque vous créez nos propres classes sont la propriété que vous ciblez et les valeurs que vous lui attribuez. Si vous faites défiler l'écran vers le bas, le premier exemple est assez simple. Nous avons une propriété d'opacité. Nous avons des valeurs de 025507500, et nous avons attribué des valeurs de 0,25 0,5 0,75 0,1 Vous n'utiliserez probablement pas 100 à moins d'essayer de remplacer quelque chose qui est déjà transparent remplacer Si nous utilisons une valeur de 25, par exemple, qui sera une opacité de 25, nous obtenons une opacité de 0,25 C'est Maintenant, vous pensez peut-être que c'est un long mot. Vous devez taper à chaque fois et ce n'est probablement pas nécessaire. Et c'est à ce moment-là que vous pouvez ajouter de la classe. l'exemple suivant, nous fournissons une classe de O et c'est la lettre, le chiffre zéro et nous avons les mêmes valeurs. Et puis sort 02550 et ainsi de suite. Nous avons raccourci le cours avec la classe personnalisée. Nous ciblons toujours l'opacité, mais nous avons maintenant une classe personnalisée Elles sont un peu délicates à mettre en œuvre. Nous passerons par les États-Unis plus tard. Si vous faites défiler la page vers le bas sous Utilisation de l'API, voici un exemple. Nous avons besoin de fonctions et de variables importées , ainsi que d'utilitaires. Une fois que vous avez importé des utilitaires, nous pouvons créer une carte. Fusionnez avec notre propre carte des services publics. Ce sera la seule carte. En fin de compte, nous copierons et collerons cet exemple d'utilisation. Eh bien, allez voir les actifs et le SCSS dans le Maine. Nous allons passer en dessous de l'endroit où nous avons importé des utilitaires. Nous allons réorganiser cela dans une minute. Nous allons juste tout faire fonctionner. Nous allons le coller dedans. Ensuite, nous reviendrons à nos capacités. Nous l'utiliserons avec la classe personnalisée. Nous copierons uniquement la section opacifiée, y compris les crochets requis. Nous allons le copier. Ensuite, nous allons supprimer la section du curseur et assurer que vous sélectionnez les bons crochets lorsque vous le ferez. Nous allons le coller dans O Shift pour le reformater. Nous allons enregistrer cela. Nous ajouterons ensuite la classe à l'image sur notre site Web. Nous allons probablement utiliser une opacité de 0,75 Pour l'instant, passer aux mises en page et Nous chercherons notre image , nous irons en cours et nous enregistrerons 75 % de sauvegarde. Ensuite, nous exécuterons le serveur de développement. Notre image est beaucoup plus transparente qu'elle ne l'était auparavant. Si nous l'inspectons, nous pouvons voir cette classe ici dire qu' elle crée une opacité de 0,75. Mais nous pouvons faire mieux que cela, car la prochaine étape de notre documentation bootstrap concerne les états. Nous avons examiné la propriété et la classe, maintenant nous examinons l'État, et par exemple, Hova, c'est utile Ce que nous allons faire, c'est copier et coller cet exemple. Juste la partie opacité. Nous pouvons même simplement copier-coller la ligne Hova si vous le souhaitez Ensuite, nous allons revenir sur le réseau principal, mettre en évidence le code existant. Nous pourrions probablement simplement ajouter la ligne supplémentaire, mais coller notre nouveau format de code. Il va maintenant créer les balises d'opacité d'origine de 25, 50 et ainsi de suite Nous aurons également une option d'état de Hova. Ça va sauver ça. Nous allons jeter un coup d'œil au CSS et nous allons le vérifier. Avant cela, voici un exemple. J'ai de l'opacité, mais vous allez aussi obtenir cette opacité, l' opacité 25 ainsi que les états de Hova, nous avons une Je pense que nous pourrions laisser l' opacité comme nom de classe. C'est un peu facile à retenir. Si vous consultez un site Web que vous n'avez pas vu depuis longtemps, il est probablement un peu plus facile de vous rafraîchir la mémoire Nous avons le site, nous allons l'inspecter, aller dans les sources, ouvrir le dossier SCSS J'en suis déjà là, vous pouvez contrôler et saisir l'opacité Ensuite, vous verrez que nous avons une opacité nulle, qui est une opacité de Alors nous avons l'opacité zéro. cuisson, pas très utile, zéro, mais par exemple 25 puis 25 Hoa Nous pouvons définir un objet de telle sorte qu'au fur et à mesure que la souris le survole, il devienne plus transparent. Continuons comme ça. Nous allons revenir dans l'index HTML. Cette fois, nous allons faire une opacité 75, survolez. Et nous allons enregistrer cela. Ensuite, lorsque vous passez la souris dessus, nous obtenons l'effet d'opacité. Passons à nos cartes et nous allons les configurer de manière à ce que toutes les cartes aient cet effet. Je vais juste supprimer cet effet de l'image du héros parce que je ne pense pas que ce soit très approprié. Contrôlez X. Je vais ensuite faire défiler l'écran vers le bas jusqu'à nos cartes, jusqu'à l'image. Nous allons aller au cours et nous allons le coller. Cela va être appliqué à toutes les cartes car nous allons parcourir les cartes à partir des paramètres. Si vous n'avez pas suivi mon cours d' introduction, je vais juste vous le montrer très rapidement. Nous allons passer au contenu puis à l'indexer. Vous verrez les cartes ici et nous avons configuré, chaque tiret est une nouvelle carte, et ces données sont enroulées sur une carte, une carte deux, carte trois, produisant trois cartes sur une carte HTML Nous allons enregistrer cela, puis vous pourrez voir que lorsque vous passez la souris dessus, nous obtenons l'effet de survol Si vous êtes capable de créer vos propres classes utilitaires, en particulier en utilisant un état idéal pour vraiment amener Boots Travel à un niveau supérieur, alors vous avez terminé cette leçon. 16. Leçon16 p1: Félicitations pour avoir atteint la fin du premier projet. A a certainement beaucoup à assimiler. N'oubliez pas de partager un lien vers votre travail dans la section projet afin que je puisse voir votre travail dans le projet 2. 17. Leçon17: Bienvenue dans le projet 2. Le deuxième projet est un projet créatif. Vous devez styliser la page d'accueil ou d'accueil et la page à propos en utilisant les techniques suivantes. Modifiez les variables bootstrap. J'ai fourni une leçon vidéo sur la façon de procéder. Vous le faites via le fichier SCSS. Vous devez également modifier les classes utilitaires CSS Bootstrap dans le code HTML des modèles HTML du singlet et du point d'index Le fichier HTML du singlet est destiné à la page à propos, et le fichier HTL d'index est destiné à la page d'accueil ou de destination Vous devez également créer vos propres nouvelles classes utilitaires à l'aide de l'API de l'utilitaire Bootstrap Par exemple, sur un Hoa, j'ai fourni une leçon vidéo sur la façon de procéder J'ai également fourni des liens vers des exemples d' idées de style dans la section des ressources du projet 2. J'ai vraiment hâte de voir votre travail dans le cadre de votre propre projet. Assurez-vous de partager le lien. Vous pouvez utiliser des services tels que Cloud, Dropbox , One Drive ou Google Drive, et partager un lien vers le dossier contenant votre travail. J'ai hâte de vous faire part de mes commentaires. 18. Fin du projet 2: Félicitations pour avoir atteint ce stade et la fin du deuxième projet. N'oubliez pas que si vous n'avez pas encore téléchargé un lien vers votre travail dans la section projet je pourrai vous faire part de mes commentaires. Merci d'avoir suivi ce cours. Cela a été un plaisir de travailler avec vous. Je télécharge toujours de nouveaux cours sur le design Web statique, Hugo et Bootstrap Je te verrai lors de mon prochain cours.