Créez un BLOG rapide et entièrement personnalisable avec Hugo et Bootstrap 5 !

1. Introduction: Bonjour, je suis quand je montre, je suis développeur web et enseignant. Bienvenue dans mon cours sur la création d'un blog avec Hugo. Ce cours. Donc, les gens qui aimeraient en savoir plus sur vous tous les fonctions intégrées afin qu'ils puissent créer leur propre thème de blog et maintenir leur blog. Le projet de cours comprend la création des modèles HTML et bootstrap requis avec Hugo. Création de widgets pour la navigation sur les blogs, gestion des images pour les articles de blog, affichage des données de blog sur des modèles de listes et d'une seule page. Enfin, personnalisez les modèles de blog en fonction de vos propres besoins. J'ai sauvé le cours. 2. Commencer avec le projet: Pour commencer le projet, versions les plus légères des logiciels suivants doivent être installées. Code Visual Studio. Node.js, qui inclut NPM, get CLI et GitHub Desktop. Tous ces packages logiciels sont disponibles sous Windows, Linux et Mac, à l' exception de GitHub Desktop, qui n'est pas disponible sous Linux, mais il est fortement recommandé si vous utilisez Windows ou Mac. Pour copier les fichiers nécessaires au démarrage du cours et du projet sur la page des ressources où vous pouvez télécharger un fichier zip. Vous pouvez également y accéder depuis le référentiel GitHub sur la branche principale. Si vous avez téléchargé les fichiers pour une leçon particulière, accédez au référentiel GitHub et modifiez la branche nécessitant la leçon. Vous pouvez ensuite télécharger un fichier zip et je vous montrerai comment procéder dans un instant. Si vous modifiez l'un de mes fichiers et que vous souhaitez télécharger votre propre travail pour obtenir un hub, vous devez sélectionner le canard, plié pour supprimer mes bonnes informations. Vous pouvez donc associer votre propre travail, créer votre propre compte. Vous devez exécuter la commande pour générer votre propre dossier de documents avant de le lier à votre propre compte. Je veux juste tourner le référentiel GitHub. Vous pouvez choisir le maître de branche pour commencer. Et puis j'ai mis chaque leçon sous sa propre branche. Il n'y a pas d'option. Ce n'est pas l'option avec le bouton vert pour télécharger un fichier zip. Et cela va télécharger tous les fichiers pour vous. Une fois que vous avez téléchargé les fichiers depuis GitHub ou Skillshare, vous devrez télécharger les dépendances, puis les progiciels requis pour le cours. Vous pouvez le faire avec la commande npm install. Une fois que vous avez ouvert le dossier dans Visual Studio Code, j'ai un nouveau terminal, puis j'ai tapé npm install. Cela permettra d' installer tous les progiciels nécessaires au cours. Si vous accédez au dossier des modules de nœuds, vous verrez tous les packages logiciels ici. Et la façon dont cela fonctionne, c'est que nous avons un fichier appelé package.json. Vous voyez que nous avons un tas de scripts qui s'exécutent d'ici et je vous les montrerai dans une minute. Mais les paquets réels installés à partir de la section dépendances. Et je les ai déjà configurés pour vous et je les ai parcourus dans tous mes cours précédents et j'ai laissé des liens vers eux dans la section Ressources. Si vous souhaitez en savoir plus sur tous ces paquets, ce qui nous préoccupe vraiment est dans d'autres dépendances. Vous pouvez contrôler la version de Hugo qui est installée et S ici est mise à jour. Vous pouvez mettre à jour le numéro de version. Ensuite, si vous exécutez à nouveau npm install, il installera une nouvelle version de Hugo pour vous. Revenir aux scripts va simplement agrandir cette section ici. Les problèmes liés aux scripts NPM sont inclus par défaut dans les nouvelles versions de Visual Studio Code. Vous utiliserez beaucoup le JavaScript. Ce que cela fait, c'est qu'il exécute un serveur de rechargement en direct pour vous. L'aperçu Dave est destiné au chargement de pages qui ont un état publié pour l'avenir ou qui sont définies pour brouillon. Building place tous les fichiers du site dans le dossier public et n' exécute pas réellement de serveur de développement. Vous pouvez télécharger ces fichiers avec FTP. Disk est comme div, sauf qu'il met également les fichiers en public alors qu'ils sont en fait un petit serveur de chargement de bibliothèque. Vous pouvez donc inspecter les fichiers en même temps. Je voulais simplement prévisualiser fonctionne exactement de la même manière que Dave preview et écrit sur la réduction de disque, où c'est exactement comme si la construction un serveur de rechargement en direct. J'ai inclus des chèques MPM. Vous pouvez facilement mettre à jour les dépendances NPM de manière graphique. Et la version Hugo vous montre la version de Hugo installée par npm. Installez vous ne l'exécutez pas réellement. Cela est exécuté par défaut lorsque vous exécutez npm install. Une fois que toutes les dépendances ont été installées, publications et le magasin installeront qui vont vous chercher. 3. Mise en page de blog réactif: Donc, si vous regardez dans le dossier Mises en page, vous remarquerez qu'il n'y a pas de index.html et vous vous demandez probablement pourquoi cela manque. La raison en est que si vous ne fournissez pas fichier index.html dans le dossier Layouts , le fichier list.html dans le dossier des valeurs par défaut sera utilisé à sa place. La raison pour laquelle nous faisons cela, et c'est parce que pour notre liste de tous les différents articles de blog, il est inutile de définir ce modèle deux fois. Nous pourrions le définir dans le fichier index.html. Nous pourrions également le définir dans list.html, ce qui impliquerait de doubler. Ce que nous allons faire, c'est que nous allons ajouter une carte supplémentaire au fichier list.html plus tard pour qu'elle s'affiche correctement sur la page d'accueil. Lançons le script de développement en bas dans ses scripts. Ensuite, nous allons jeter un coup d'œil dans le navigateur. Vous pouvez vraiment contrôler. Cliquez sur le lien que vous avez fourni. Une fois le service en direct exécuté. Sur notre page d'accueil, nous avons une liste de toutes les pages du site Web qui n'est pas très utile. Mais plus tard, nous allons envisager d'embaucher ça. Si vous allez à la barre oblique. Nous allons lister les publications à venir et nous allons personnaliser le code ultérieurement pour que seules les publications soient affichées sur la page d'accueil. Pour l'instant, ce qui nous inquiète, c'est de créer une mise en page réactive. Nous allons donc avoir un volet sur le côté droit, ou vous pouvez mettre à gauche vers vous avec des liens vers différentes parties du site et différents articles de blog. Et la raison pour laquelle je vous montre tout à partir de zéro pour que vous puissiez le personnaliser comme vous le souhaitez. Regardez donc la base du code HTML. Et vous remarquerez que nous avons notre section principale, et nous avons notre en-tête de bloc de contenu principal et notre pied de page au-dessus et en dessous. Ce qui nous inquiète maintenant, c'est de configurer le bloc principal, mais aussi une colonne à sa droite. Ce que nous allons faire, c'est que nous allons mettre en place un récipient de liquide. Le liquide de conteneur fera une rangée. Et vous verrez apparaître des abréviations qui sont incluses et activées par défaut dans Visual Studio Code. Ensuite, nous allons faire une colonne. Ce que nous allons faire maintenant, c'est que nous allons essayer Col, Dash, Dash Nine et vous pouvez personnaliser ces éléments. Et dans Bootstrap a un total de 12 colonnes. Donc cela nous laisse un appel à ce tableau de bord. Trois. Cela signifie qu'il est plus chaud au point d'arrêt moyen ou supérieur. Nous allons avoir neuf unités ou colonnes avec neuf unités et moins au point d'arrêt médian ou à l'eau hydroélectrique, on pourrait dire que nous allons avoir trois unités. Si vous êtes en dessous du niveau moyen, il va simplement s'effondrer et vous aurez colonnes pleine largeur qui ajouteront une marge au bas de ces deux-là. Dash trois, j'ai utilisé alt et j'ai cliqué sur ces lignes pour pouvoir parler aux deux. Ensuite, nous obtiendrons notre classe principale. Collez notre balise sémantique principale là-dedans. Je vais me débarrasser du bas de la marge parce que je l'ai déjà inclus. Pour l'instant. Nous allons juste mettre du texte ici. Nous écrirons donc Lorem , puis nous envoyons des messages et des textos automatiquement. Et une dernière chose que nous allons faire, c'est que nous y ajouterons de la couleur. Nous allons donc le faire par secondaire. Et puis ici, nous allons faire des informations BD Dash, par exemple. Nous allons l'enregistrer et je vais jeter un coup d'œil dans le navigateur. L'ajout de la couleur à l'arrière-plan a donc rendu la division entre les deux colonnes assez évidente. Voyons ce qui se passe lorsque nous réduisons la taille de l'écran. Vous pouvez donc voir qu'il est réduit en une seule colonne. Mais quand on l'amène au-dessus de MD, on se retrouve avec les deux colonnes. Nous pouvons donc ajuster cela avec notre code. Comme vous pouvez le voir, vous êtes des points d'arrêt MD, Si vous le vouliez vraiment, vous pourriez changer cela PME. Vous n' aurez pas de place. Et quelque chose à garder à l'esprit, c'est que lorsque vous l' aurez en-dessous de MD, vous utiliserez toute la largeur de l'écran pour le menu de votre blog. La dernière chose que nous allons faire, c'est que nous supprimerons les couleurs d'arrière-plan pour que nous soyons prêts à partir. Je le verrai dans la prochaine leçon. 4. Modèle de liste de blogues: Nous envisageons maintenant de créer notre modèle de liste afin qu'il puisse afficher une liste de tous nos articles. Le premier problème que nous avons est ici. Nous couvrons toutes les pages de la section 94 de la page d'accueil qui va se retrouver dans toutes les pages. Ce que nous allons faire, c'est parce que nous travaillons également sur la pagination. Nous allons créer une variable appelée podomètre. Et pour l'instant, nous allons simplement en faire une chaîne vide. Et puis on mettra le conditionnel si Dot est bonjour, je le suis. Et ensuite, nous en mettrons un autre. Et ensuite, dans ce que nous ferons pour l' autre. C'est le plus facile. Vous pouvez rendre paginate égal au podomètre à points. Et ensuite, nous devons mettre cette variable, SG&A, que la plage. Et ce que nous ferons pour vous où sur la page d'accueil il sera sombre, paginera. Ensuite, entre parenthèses où le site pointe des pages régulières. Le type sera des publications et des affiches en minuscules, car c'est quelque chose que nous avons défini en plaçant tout le contenu dans le support de la publication. Alors que le type n'est pas une variable Hugo intégrée. Ensuite, nous verrons ce que nous avons, notre contenu. Notre contenu. J'ai toujours la plage et nous ne voulons pas afficher le titre sur la page d'accueil, donc nous l'enlèverons et nous le placerons dans le reste, nous allons nous débarrasser de cet espace et ensuite nous allons vérifier comment ressemble la page d'accueil. Pour compter sur la page d'accueil. Nous n' affichons que des messages maintenant, ce qui est génial. Si nous allons à la barre oblique, vous remarquerez que les en-têtes apparaissent, mais nous avons exactement la même liste. Ensuite, regardez notre pagination et nous voulons que cela ne s' affiche que s' il y a assez de post pour justifier réellement la pagination pour y être. Nous allons donc utiliser une condition s' ils affectent des pages paginées. Et puis, je devrai savoir quels sont les antagonistes ? Donc, si la pagination n'a pas réellement lieu à cause de chaque article de blog, nous n'aurons pas notre menu de pagination net au bas de la page. Jetons maintenant un coup d'œil à l'article et à la façon dont nous pouvons le personnaliser un peu. Commencez donc par inscrire une classe pour l'article. Et nous appellerons cela un résumé des publications. De cette façon, vous pouvez cibler avec CSS. Et nous allons mettre une marge au bas de la page. Et le tableau de bord trois entrera ensuite et nous mettrons un design de colonne. Nous commencerons donc par une rangée, puis nous mettrons un col, un tiret, un tiret cinq. Et nous pouvons toujours personnaliser cela. Et les restes seront un tiret froid, un tiret sept. Et nous allons placer tout le contenu actuel dans la deuxième colonne. Ensuite, nous allons travailler sur la façon d'afficher l'image de publication. S'il existe. Nous allons commencer par attribuer la variable des contextes de publication et nous l' utiliserons pour obtenir ImageResource. Assurez-vous d' y placer un tiret afin qu'il ne génère aucun espace car il ne s'agit que d'une variable. Cherche ensuite une image avec des images de points params. Dans le marquage pour ça. Ensuite, nous vérifierons si l'index est disponible. Nous pouvons donc le faire si point, point est tranché et mettre le point par la suite. Mettre une balise de fin, vérifier si c'est le cas, si une tranche a été fournie pour les images des paramètres, s'il y a une faute de frappe qui causera une erreur sur votre site Web. Nous allons donc vérifier qu' il s'agit en fait d'un tableau. Et ensuite, nous allons faire de l'index 0. Il suffit d'utiliser la largeur pour nous assurer que nous voulons vraiment choisir le premier élément des paramètres, la tranche de paramètres d'images. Nous essayons d'obtenir la première image utilisant la largeur au cas où cela échoue. Et nous allons mettre une étiquette de fin là-dedans. Alors voici ce qui est délicat. Nous allons donc créer une image variable. Il y aura un signe de dollar, Poste. Ressources, faites correspondre. Ensuite, nous passerons dans les contextes de points. Nous examinons le premier élément de la matrice, et nous utiliserons également un avec cela. Je suppose que ça échoue. Il ne se passera rien. Je vais donc mettre un marquage N avant mettre notre image et nous allons regarder frittage monter au cas où l'image n'est pas toute la largeur de la colonne. Nous allons donc faire un flux de tableau de bord pour le correctif d'affichage, puis nous pourrons utiliser justify content center. Joli. Si l'image est plus haute qu'elle n'est large, mettons le marquage de l'image maintenant. Donc, si vous tapez IMG et qu'il apparaîtra et mettra une image prise pour vous, pour la source, nous mettrons quelques accolades et ce sera le signe du dollar, image.Tous les rails permalien avec R majuscule et majuscule P, vous pouvez fermer les accolades bouclées qui seront ensuite mises en largeur, ce qui aide à la recharge. Vous pouvez mettre des accolades bouclées, sombres avec un W majuscule. Fermer les accolades bouclées et les mettre en hauteur. Et il fera sombre la hauteur. Majuscule H. Ensuite, en mettant un alt et un titre, cela fera, nous pouvons utiliser plusieurs lignes. Donc, pour Alt, je vais le faire dans une seconde. Mettez un titre. Et nous pouvons simplement mettre une page de signe dollar, un titre post-doc, un T majuscule car c'est une variable intégrée. Ensuite, pour tous les titres, ce que l'utilisateur réel verra l'écran si je mets la souris dessus, alternatif pour la technologie SHS. Ce que nous allons faire, c'est que nous imprimerons F et nous mettrons dans notre modèle. Le modèle sera que vous devez publier, puis pour cent S pour une chaîne. Et la chaîne sera le titre de la publication. Vous le collez après votre modèle pour imprimer f. Ensuite, nous devons mettre une classe en classe. Nous allons commencer par le flux IMG Dash Flow. Ensuite, nous créerons notre propre classe. Nous avons donc le résumé de nos parents de messages. Donc, en résumé, nous utiliserons la norme BIM qui consiste à gagner une image de soulignement et de soulignement. Le rayon est un double trait de soulignement parce que vous allez exécuter un score et le parent réel, ce serait bien d'utiliser double trait de soulignement et le double trait d'union pour différencier entre le parent et le modificateur réel. C'est BM, va ensuite tout mettre en retrait dans la balise multiligne. Ensuite, je l'enregistrerai et nous allons jeter un coup d'œil au CSS. Si vous entrez dans le dossier Assets et que vous consultez le fichier main.css. Maintenant, j'ai un main.css configuré pour vous. Et nous avons un lien vers le bas vers notre CSS personnalisé. Donc, pour commencer, le tableau de bord sombre, résumé ouvrira nos accolades bouclées et ensuite nous utilisons le trait de soulignement final, l'ouverture de l'image de soulignement près pour nous calibrer ce qui se passera quand cela sera compilé, il finira par être un résumé du tableau de bord sombre. Ensuite, ci-dessous, il y aura un soulignement sommaire de la dette, une image de soulignement. Il va assembler les deux à cause de l'enzyme. Il est donc beaucoup plus facile d'utiliser SPSS, nous pouvons l'imbriquer. La première règle doit donc être ajoutée. Nous allons essayer max, tiret, hauteur, par exemple, dix jante. Ensuite, nous ferons la forme des objets. Et nous allons contenir. Disons que l'image ne finit par être trop haute au cas où elle est plus grande que large, ce que ces images ou nous ne voulons pas qu'elle se déverse trop loin. Ce sont des choses que vous ne pouvez pas faire avec Bootstrap et c'est ce que nous utilisons notre propre CSS. Ça a l'air vraiment bien. Si nous cliquons avec le bouton droit sur l'image et que nous l'inspectons, vous verrez que la classe arrive, IMG fluide et notre classe personnalisée , largeur et hauteur, ce qui est idéal pour minimiser les reflux, le navigateur peut examiner le rapport hauteur/largeur de celui-ci. Nous avons notre image de texte alternatif pour les publications au nom de la publication. Et nous avons notre titre, qui n'est que le titre de l'article. Et vous remarquerez que l'image a été centrée. S'il est plus étroit que la colonne elle-même, elle est plus large. Et vous verrez comment l'image elle-même est centrée. Nous avons même obtenu notre titre et notre résumé. Nous pourrions envisager de supprimer le souligné de ce titre pour qu' il soit un peu plus propre. Et je vais vous montrer comment la pagination disparaît également. Si nous affichons d'autres articles sur la première page. Revenons simplement à la page d'accueil et vous verrez que je n' ai pas notre cap. Nous allons ajouter à notre frappe la balise a. Nous allons mettre dans un cours. Et nous allons faire des textes, tableau de bord, une décoration, un tableau de bord, aucun. Et ensuite, nous sauverons ça. Et j'ai ouvert le Bravo qui a l'air beaucoup plus propre et ensuite nous chercherons à assurer que la pagination fonctionne. Nous allons entrer dans le fichier de configuration. Remarquez que j'ai mis un commentaire là-dedans pour vous, contrôlez le nombre de pages sont des pages spinales. Nous allons donc simplement changer cela à 50 pour l'instant. Ensuite, tous nos messages sont affichés et il n'y a pas de pagination en bas. Nous allons revenir à cinq. Ensuite, nous allons consulter notre contenu et nos publications. Nous allons voir celle-ci et nous supprimerons l'image. On dirait un peu bizarre d'avoir l' espace là quand il est immuable. Tout ce que nous faisons, c'est que nous cherchons à inverser les images des publications à droite, uniquement sur la vue du bureau, mais sur la vue mobile, nous voulons toujours que l'image apparaisse au-dessus de la publication. Bonjour. Nous allons le faire pour notre colonne de sept largeurs, où se trouve tout le texte, nous utiliserons une classe qui est ordre tiret, tiret d'abord. Ce que cela fait pour MD, c'est moyen ou plus grand. Cela fera de cette colonne la première à être affichée. Jetons un coup d'oeil là-dessus. C'est maintenant un peu plus naturel quand on a l'image que l'on me voit. Vous pouvez configurer vos images de manière à ce qu'elles affichent une image réservée. Si vous n'avez pas fourni d'image. Je pense que ce que nous faisons est beaucoup plus propre. Vous vous demandez probablement comment contrôler la longueur des résumés affichés ? Laissez-moi le faire. Je vais faire un commentaire sur la longueur du résumé. Il s'agit de deux phrases, mais il a également arrondi les phrases. Disons simplement que vous voulez un peu plus longtemps que vous pourriez en mettre dix, par exemple, jetez un coup d'œil là-dessus. Vous remarquerez peut-être que certains sont légèrement plus longs, mais ils essaient de passer à des phrases. Il est donc un peu délicat d'essayer de le régler exactement comme vous le souhaitez. C'est un peu plus ou moins. Je vais juste changer le mien. Et je vous verrai dans la prochaine leçon. 5. Liste des données de modèle: Jetons un coup d' œil à l'ajout de données au modèle de liste. Nous essayons donc de le faire uniquement pour le modèle de liste, nous allons ajouter la date de publication des articles au bas de l'article dans le modèle de liste. Et nous allons obtenir ça à partir de la date de publication. Nous ne regardons pas la date de révision de l'article, bien que vous puissiez le personnaliser comme vous le souhaitez. Résumé du modèle List.html. Nous allons mettre des accolades bouclées. Et nous utilisons avec la date de publication des points. Nous allons le mettre intact. Et ensuite, nous allons faire une plongée. Et nous voulons forcer la date de publication au bas du résumé et également à droite. Nous allons donc faire le point S dash auto et c'est pour la marge au début. Et l'ordre de tiret vide sombre et c'est la marge ci-dessus. Et pour que cela fonctionne sur notre colonne, nous devons utiliser la colonne flex, display flex et afflige display flex et afflige, ce qui force tout à afficher vers le bas. Ce que nous allons faire, c'est pourquoi la date, et je le ferai, c'est que nous avons déjà la date de publication comme contexte actuel. Nous utilisons donc le format point. Ensuite, nous devons utiliser la chaîne de format Go Time. Et la façon dont cela fonctionne, si vous voulez afficher le jour, ce sera O2 et le mois sera R1, et le e sera 20106. Si vous souhaitez d'abord afficher votre mois, vous devez placer la R1 au début. Vous devez utiliser ces numéros. Donc, ça marche. Nous allons donc enregistrer cela et jeter un coup d'œil dans le navigateur. Nos dates sont tirées au bas de chaque poste et elles sont forcées vers le bas. Si nous effectuons un clic droit et une inspection, vous remarquerez que nous avons la force vers le bas et la force vers la droite. Voyez exactement comment je le veux. C'est un meilleur exemple. Ils ont obtenu la marge à gauche et la marge au-dessus, ce qui la force vers le bas à droite. Voyons maintenant comment réutiliser la variable. Nous allons donc également envisager de mettre cette date pour de l'argent dans notre article réel pour vous dans un instant. Nous allons donc entrer dans notre fichier de configuration. Et au fond, nous allons mettre les parents. Ensuite, nous allons créer un nouveau format de date de paramètre. Nous pouvons coller dans le format que nous venons d'utiliser. Copiez ça, collez-le là-dedans. Et puis nous le ferons, c'est que nous pouvons réellement y accéder avec des paramètres de points de sites, un format de date de point. Vous vous demandez probablement pourquoi j'ai utilisé un site avec S minuscules et pas un site de points avec les capitalistes. Et c'est parce que nous sommes dans une instruction width et réaffectons le contexte et le moyen le plus simple d'afficher les variables de site si vous n'avez pas accès au site corn Texas utilise des minuscules S pour le site. Examinons maintenant la mise en place d'une étiquette temporelle, heure et de la taper. Et ensuite, nous ferons Datetime. Je vais afficher l'heure dans un format que le navigateur comprend comme très clair pour le navigateur. Ce que nous allons faire, c'est que nous utiliserons le format de points. Et le format sera le premier tiret de 2006, le mois, qui sera i1, et le jour sera O2. De cette façon, les navigateurs expliquent l'heure dont nous parlons. que le navigateur sache comment interagir avec cela et peut-être le lire à l'utilisateur. Si besoin d'être dans un endroit particulier. Ensuite, nous allons faire glisser l'étiquette temporelle. Bonjour. Nous allons enregistrer cela et jeter un coup d'œil dans le navigateur. Cliquez avec le bouton droit de la souris et inspectez. Date et heure. J'ai un format, une année, un mois, un jour. C'est un format que le navigateur comprend. Et regardez, cela dépend du pays dans lequel votre public est présent. J'ai mis le mien vers le ciel et le format. Nous avons le premier jour, le mois et l'année. Vous pouvez formater comme bon vous semble avec votre fichier de configuration. y vais juste et tu peux réarranger les choses. Vous pouvez changer le tiret deux tirets ou tiret comme vous le souhaitez. Jetons maintenant un coup d'œil à la mise en place d'une icône au début du. Donc, ce que nous allons faire, nous allons créer une première partielle pour la créer, et nous l'appellerons SV, g, tiret, icône, HTML. La première chose que nous allons faire est créer une variable appelée SVG. Et il y aura des ressources point n dot, un peu de contexte à fournir. Ensuite, nous afficherons du contenu SVG. Et ce sera un HTML sûr pour chauffer n'y échappe pas. Nous sauvegarderons cela pour chaque recherche dans le dossier des ressources. Je vous ai déjà fourni quelques icônes. Je pense donc que l'utilisation normale est le calendrier à la date de tiret. Donc, nous allons le faire sur liste. Il est une icône partielle du plat SVG. Ensuite, nous le fournirons. Nous faisons défiler vers le haut. Connaît déjà le dossier des ressources. Nous allons donc utiliser des icônes barre oblique, calendrier barre oblique de bootstrap à Daech, date dot Vg. Et je les ai placés dans un dossier Bootstrap. Vous savez donc que si vous voulez trouver plus de ces icônes, vous pouvez accéder aux icônes Bootstrap, vous pouvez Google cela. Et vous pouvez en obtenir autant que vous le souhaitez. Je n'utilise pas de police d' icônes car cela créerait des frais généraux à l'aide de quelques icônes. Si nous n'incluons que les icônes que vous souhaitez insérer en ligne, nous n'avons pas la surcharge de toute la police d'icônes. Alors, gardons ça et jetons un coup d'œil. Il y a donc l'icône de notre calendrier. Jetons un coup d'œil à l'ajout du temps de lecture estimé sur le côté gauche. Donc ça va faire un peu de réarrangement pour l'instant. On va attraper le partiel, on va le coller. Nous allons consulter notre dossier Icones et cette fois, nous utiliserons l'horloge. Nous allons donc changer cela pour l'horloger et l'ouvrir au-dessus de la date partielle où elle devrait se trouver. Et nous utiliserons avec le temps de lecture, le R majuscule, le T majuscule dans le marquage. Et commencez par la guerre malgré leur temps de lecture avec un point. Et ensuite, nous utiliserons une minute. Et si elle supérieure à une minute, on mettra un S à la fin. Nous allons voir comment nous allons l'afficher. Nous allons donc mettre un démon et nous prendrons le temps de lecture. Pour cette div. Nous utilisons une classe d'ordre vide pour le forcer à descendre. Haut de la marge. Ou je dois aussi placer le flux parce que tout ce que nous utilisons le démarrage automatique de la marge dans un instant. Nous allons donc transformer cela en une travée et le placer à l'intérieur, à l'intérieur de notre div. Ensuite, nous placerons l'étiquette span à l'intérieur avec le temps de lecture. Dans le temps de restauration, pour une raison quelconque, ça ne fonctionne pas. Alors, dépensons quoi ? Correction de quelques indentations des espaces pour que tout soit un peu plus facile à lire. Ensuite, nous allons l'enregistrer et jeter un coup d'œil dans le navigateur. Il ressemblait exactement à ce que nous voulions. Sans Tom et à gauche, notre rendez-vous à droite. Et nous allons juste vérifier cela sur une petite fenêtre. Ils ne vont pas s'affronter. Apportez ça à petit. Et c'est très bien. 6. Modèle de publication de blog unique: Pour créer notre mise en page lorsque vous consultez un seul article de blog. Nous avons notre mise en page unique dans notre dossier par défaut, mais nous voulons le conserver là où il se trouve car c'est idéal pour consulter pages telles que la page À propos de nous ou nous contacter. Ce que nous allons faire, c'est que nous copierons ce code HTML à point unique et nous créerons un nouveau dossier dans la mise en page appelé posts. Et nous allons le coller là-dedans. Et ensuite, nous allons travailler là-dessus. Et il ne sera affiché que lorsqu' un seul article est visionné. La première chose que nous allons faire est d'ajouter l'image de publication. Je vais donc revenir dans list.html. Et nous avons un code ici pour l'image. Nous allons copier ça et nous repartirons. Nous avons donc notre titre. Et puis nous allons mettre dans une nouvelle rangée, dot dot col. Ensuite, nous le referons. Nous allons mettre notre image ici. Et puis ça devrait bien fonctionner. Nous allons donc sauver ça. Je vais jeter un coup d'œil. Assurez-vous d'avoir activé l'image pour cet article particulier précédemment désactivé à des fins de test. Nous avons donc notre titre, nous avons notre image, nous avons nos textes, ajouterons un peu de rembourrage sous l'image. Sur cette rangée, il y aura PIP3. Et ça a l'air plutôt bien. Je suis maintenant prêt à entrer et à ajouter des données à la publication, aux balises ou aux catégories de date, la date à laquelle nous avons peut-être révisé la publication. 7. Données de modèle unique: Pour ajouter des données à notre modèle de mise en page unique. Donc, si jamais vous regardez sous votre titre, nous ajouterons d'autres lignes. Nous allons donc faire de la rangée. Et puis nous ferons le point col dash md six fois plus haut par deux avec l'astérisque et touchez-le et ferons de l'espace. Ensuite, nous pouvons saisir tout ce que nous venons de créer. Et on peut le coller deux fois. Si vous entrez dans votre liste, vous remarquerez que nous avons notre heure de lecture et que nous avons notre date. nous allons simplement les appliquer dans Cette fois-ci, nous allons simplement les appliquer dans l'ordre inverse. Nous allons d'abord inscrire la date de publication. Et c'est parce que nous allons également choisir la date de la dernière modification. Collez ça dans. Nous allons nous débarrasser de la travée. Je veux juste les données réelles pour l'instant. J'y retournerai ensuite. Et pendant ce temps, nous allons coller le temps de lecture. Nous allons nous débarrasser de cette période pour l'instant. Et puis les choses sont un peu différentes ici. Nous allons ensuite mettre une dernière mise à jour supplémentaire sur Texts Net repose sur Get utilisé pour votre projet. Vous devez utiliser Git pour valider les mises à jour de votre blog. Et ensuite, vous obtiendrez l'information pour la dernière mise à jour. Donc, c'est que nous avons notre temps ici. Nous allons couper cela et nous allons créer une variable. Nous appellerons la date de publication, deux-points égaux. Et nous allons coller ça dedans. Et la raison pour laquelle nous faisons cela est parce que nous allons devoir comparer la dernière mise à jour et la date de publication réelle. Et s'il a été mis à jour pour la dernière fois le même jour que la date de publication, nous n' afficherons cette dernière fois EditText. Ensuite, ici, nous afficherons la date de publication. Je ferai de la respiration sifflante si cette fois, gardez les choses un peu plus simples. Donc, il va falloir, au lieu du format point, il sera publié au format de point de date. Nous allons ensuite créer une autre variable appelée Last-Modified. tout en minuscules. Nous allons copier ce texte vers le bas. Et nous utiliserons le mode dernier point, le tout en minuscules. Ensuite, nous pouvons descendre et mettre une date de publication conditionnelle, sinon égale, et le mois dernier. Je suis en train de baliser. Je vais le mettre dans des textes italiques. Dernière mise à jour sur la balise horaire. Alors, prenez le temps. Et à l'intérieur, nous pouvons le faire, résolvons celui-ci. Il s'agirait donc d'un format de point d'état de point. Nous allons donc le copier en point B le mois dernier. Et nous venons de passer en mode impression. Vous devez garder à l'esprit lorsque nous comparons la date de publication et le dernier mode. Où formater la date de publication et le dernier mode avec un format de date qui est le jour, le mois et l'année. Nous ne prenons pas en compte les heures, les minutes et les secondes. Et c'est vraiment important parce que si nous avons modifié la page le jour même où nous l'avons initialement publiée. Nous ne voulons pas l'afficher. Il est mis à jour pour la dernière fois le jour même où il a été publié. Et c'est ainsi que gagner en comparant les dates ici. Et il est très important, lorsque vous faites cette comparaison que votre mise en forme avec une date, juste un jour, un mois et une année seulement. Jetons un coup d'œil dans le navigateur. Nous avons donc mis à jour nos derniers textes et vous devrez vous assurer que votre projet a été initialisé en tant que référentiel Git. Et vous avez fait deux commits et vous devez probablement antidater votre Taylor publiée si vous utilisez les données, j'ai fourni un aperçu antérieur, et vous devez apporter un changement et un engagement sur l' un de vos messages. Faisons passer le temps et ensuite nous allons jeter un coup d'œil à la publication et aux tags et catégories de la publication. Donc, nous allons le faire, nous devons faire passer notre temps de lecture. Nous allons donc mettre une classe de flex d'affichage et la placer dans un point de span dot MS dash Bordeaux pour margin auto. Et ensuite, nous allons placer dans cette période la bonne partie. Ensuite, nous allons jeter un coup d'œil à la mise en place de catégories et de balises. Nous allons utiliser la largeur. Et puis entre parenthèses, termes de points, G majuscule, T. majuscule et on va regarder les catégories, ces catégories parce que c'est pour un blog. Si vous aviez suivi mon cours de recherche, il y aurait eu des entreprises et des espèces, mais je viens de tout renommer en catégories pour ce cours particulier. Nous devrons ensuite mettre le marquage. Ensuite, nous devons mettre notre icône. Nous allons donc copier la partie vers le bas et jeter un coup d'œil aux ressources et aux icônes. Et nous utiliserons un dossier pour les catégories, changera l'horloge du dossier. Ensuite, j'ai pu dépasser les catégories. Il s'agit donc d'une plage au-dessus du point, mais nous voulons utiliser l'index et les éléments. Nous allons donc faire des virgules d'index. Et nous pourrions même utiliser, au lieu d'utiliser élément, nous pourrions utiliser la catégorie si vous le souhaitez. Appelez ça est égal à point. Je vais donc mettre une étiquette de fin pour notre gamme. Pour afficher notre catégorie. Nous allons utiliser le titre des points. Mettre dans un pot, utilisera huit tirets restants humanisés, et nous utilisons le titre pour mettre en majuscule chaque mot. Je vais mettre un tuyau entre ou utiliser une virgule si vous voulez entre chaque catégorie. Et la façon dont nous allons le faire est s'il vous plaît, si vous indiquez 0, donc ce n'est pas la première fois dans l'espace de plage, l'espace du tuyau. Et donc, sauvegardez ça. Et nous allons jeter un coup d'œil dans le navigateur pour mettre à l'agonie. Ce sont donc des punnett express. Nous ajouterons une catégorie supplémentaire et nous verrons ce qui se passe. Revenez donc dans notre contenu. Et en catégories. À l'œil, ajoutons maintenant un lien autour de notre titre. Nous allons mettre un ion, je vais relier avec des accolades bouclées. Ensuite, nous ferons une classe de décoration de texte. Aucune. Sortez, fermez une étiquette. Sous le titre. Ce petit regard. Je suis allé à Cadbury en train de monter avec la pop entre eux. Je vais donc supprimer cette deuxième catégorie. Je vais mettre un deuxième marquage pour l'instant. Ensuite, nous allons mettre en place des balises et jeter un coup d'œil là-dessus. Ce que nous allons faire, c'est que nous copierons tout ce texte. Nous venons de faire passer le code dans le prochain. Nous modifions les catégories en balises. Et puis cette balise, même si nous ne l'utilisons pas, nous utilisons simplement le point à la place. Et nous allons changer notre dossier. Deux étiquettes. Si vous le souhaitez, vous pouvez faire un signe dollar, un titre et j'attribuerai le titre du point de balise, balise ce permalien. Cela n'a pas vraiment d'importance. Gardez ça. Et nous allons jeter un coup d'œil. Nous avons deux étiquettes qui apparaissent avec le tuyau. Je vais juste le pousser vers la droite. Donc, comme avant, sur la colonne va mettre d flux et ensuite nous mettrons une travée. Donc, nous allons faire Dash, Flex. Gardez à l'esprit avec la portée. Nous ne voulons pas que cela pousse vers la droite sur un site mobile. Nous allons donc faire une commande MA stash MD. Copiez ça vers le bas. Assurez-vous que tout ce qui se trouve à l'intérieur des étiquettes. C'est génial. Je vais juste supprimer cette deuxième étiquette. Et puis ces étapes sont terminées. La sauvegarde permettra de se débarrasser de cette deuxième balise. Nous allons mettre un alias à tester. Et c'est exactement comme ça que nous voulons. 8. Blog Post Image Shortcode: Nous allons maintenant créer un shortcodes. Nous pouvons facilement appeler une image dans la démarque d'un post. Donc, ce que nous allons faire, nous allons aller dans notre dossier Mises en page et nous allons créer un nouveau dossier appelé shortcodes à l'intérieur qui fera notre code court et nous l'appellerons IMG, tiret, index dot HTML. La première chose que nous allons faire est de vérifier s'il existe des paramètres de page pour les images. Nous utilisons donc une page de points de signe dollar avec un P. majuscule et ensuite nous pouvons accéder aux images de points de params. Et nous allons mettre un antagoniste pour cela. Un. La prochaine chose que nous allons faire est de vérifier s'il y a une tranche. Utilisez si le point réfléchissant est tranché et placez le point dans la mesure où nous avons déjà attribué le paramètre de page des images au point. Et nous allons mettre nos entrées et, pour cela, nous allons définir notre indice par défaut à 0. Par conséquent, si nous ne fournissons pas d'index, par défaut, la première image l'image est le paramètre. Ensuite, ce que nous ferons, c'est que nous ferons si le point du signe dollar obtient 0, ce qui signifie le premier paramètre fourni. Et je vais vous montrer que ça fonctionne dans une minute. Dans le marquage. Ensuite, dans ce cas, l'indice du signe du dollar sera égal à point et nous allons le changer en un. Et vous devez vous rappeler que cela apparaîtra sous forme de chaîne de texte. Nous devrons donc changer cela par un entier. Ce que nous pouvons faire, nous pouvons faire un point d'index. Donc, en parlant de la tranche d'images, et nous allons examiner la variable d'index. Par défaut, nous regardons 0, qui est la première image de la liste. Sinon, si un numéro est fourni, lorsque nous les appelons le code court, il examinera le premier, le deuxième troisième élément d'index de cette liste. Je vais mettre un marquage N. Ensuite, nous chercherons à obtenir l'image. Nous allons donc faire avec le signe du dollar, le point, la page, les points, les ressources, les points, obtenir le majuscule G, le majuscule M pour celui-là. Ensuite, nous pouvons simplement fournir un point. Je vais mettre un marquage N. Et c'est là que se déroule toute l'action. Nous reviendrons dans notre poste unique. Regardez cool le code de l'image. Et nous allons copier ce code. Nous allons le coller et mettre en retrait EIS, nous faisons référence aux variables d'image. Ce que nous pouvons faire, c'est que nous pouvons imaginer des colonnes égales. Nous parlons du titre postdoc. Dans ce cas particulier, il s'agira d'une page de points en dollars avec un titre de point P majuscule, et nous envisagerons de le personnaliser dans un instant. Changeons notre classe CSS , puis nous allons jeter un coup d'œil à l'ajout du code court à un post afin que nous puissions le tester. Nous allons donc entrer dans notre premier post, Amy. Maintenant, nous le faisons, c'est de le mettre dans des accolades bouclées, ouvrir et de fermer les flèches. Ensuite, vous indiquez que le nom des shortcodes sera IMG Dash, index ou tout ce que vous aimeriez le nommer. Par défaut, il recherche que l'index est 0, ou vous pouvez le fournir. Si vous souhaitez faire un autre numéro, nous allons le laisser vide pour le moment. Ensuite, nous allons envisager d'ajouter un numéro. Je vais donc l'obtenir dans le navigateur. Tante Amy, et l'image est en train d'être prise. Jetons un coup d'œil à l' ajout de CSS pour que nous puissions le centrer et limiter la taille pour qu'il ne soit pas trop grand. Nous le ferons copier d'affilée. Faites de D, adaptez, justifiez le contenu. Tellement haut. Ensuite, nous allons faire une rangée avec les flicks, justifier le contenu. Et nous ferons notre chronique appelée Bash MD. Au revoir pour l'instant. Et ensuite, nous allons sortir Imaging. Aujourd'hui. Nous allons vérifier cela. Cela fonctionne jusqu'à présent. Ensuite, nous chercherons à limiter sa hauteur car actuellement, mais la contrainte de largeur, si vous y regardez, c' est une largeur de colonne complète car elle est inférieure à MD. Si on le vérifie de cette façon, on voit que c'est cinq sur 12 de large. Maintenant, regardez la limitation de la hauteur. Retournez donc dans nos ressources, puis dans le CSS personnalisé. Je vais vous montrer comment faire le style M. Jetons maintenant un coup d'œil au coût des services publics , par exemple point IMG, tiret H, tiret dix. Et nous allons copier ce code dans. Et ensuite, nous aurons le droit de dire 15 pour celui-ci. Nous allons donc faire Dot IMG, Dash, Dash 15. Et nous allons changer notre cœur à 15. Gardez ça. Et puis le talon arrière. Débarrassez-vous de ce style de faisceau. Je vais faire IMG Dash H dash 15. Et nous pouvons revenir sur notre liste. Découvrez l'image IMG h dash ten. Et nous pouvons nous débarrasser de ce résumé de publication car nous ne l'utilisons pas actuellement. Commentaire là-dedans. Amortis. Nous allons donc vérifier ça. Il est donc maintenant limité à une hauteur de 15 à 40 pixels de haut, soit 16 pixels par 15, donc 15 ou viser haut. Ensuite, je vais vous montrer comment utiliser SPSS pour générer complètement ces classes. Ce que nous allons faire, c'est d'abord définir nos hauteurs. Exemple 5101520, essayer d'en faire trop parce que cela finira par polluer votre fichier CSS avec trop de classes. À chaque hauteur, en hauteur. Maintenant, vous devez copier et coller exactement à votre hauteur, mais vous pouvez choisir ce que vous mettez ici. Vous pouvez faire chaque H et chaque hauteur si vous le souhaitez. Je fais juste chaque hauteur, système de hauteur en hauteur le rend agréable et propre. Nous faisons l'accolade et nous ferons point, IMG, tiret, hauteur, tiret H. Ensuite, nous faisons un signe de hachage, ouvrons, fermons les accolades et nous allons attribuer la hauteur. Donc, il va s'en sortir cinq et les mettre là-dedans pour la classe. Nous obtiendrons donc IMG dash H et S5, IMG delta H dash dix et ainsi de suite. Et chaque fois que nous traversons, nous mettons des accolades bouclées. Ensuite, nous copierons et collerons dans les règles CSS. Pour notre hauteur. On va faire du hash. Chambres, embrasse une accolade puis gribouiller assigne la hauteur, puis fermez l'attelle. Ensuite, nous commenterons et sauvegarderons cela. Ensuite, nous allons inspecter. Et il est en train de le faire entrer. Si vous cliquez dessus, il vous montrera la source. Mais si nous allons dans le score de sortie en bas, vous verrez qu'il y a nos classes générées, 5101520, car vous devez déterminer ce qui fonctionne pour vous. Mais ne générez pas trop de génériques car vous n'allez remplir votre CSS qu'avec des classes supplémentaires. Jetons un coup d'œil à la discussion. Un peu de savon va faire ici. titre du signe dollar est vide. Et je le ferai si le signe du dollar en obtient un. Si nous avons un deuxième paramètre. Et nous allons faire un total égal à la largeur totale. Sinon. titre est égal à la page du signe dollar point py. Titre pour initialiser le titre ici. Dans ce que nous faisons, nous vérifions si un deuxième paramètre est fourni avec un raccourci et je vais vous montrer comment configurer un amendement. Et c'est pour le titre personnalisé réel de l'image. Sinon, nous allons simplement utiliser le titre de la page. Alors, ici pour le titre, nous pouvons cliquer sur Alt pour les deux. Il s'agira d' un titre de signe de dollar pour le titre. Jetons également un coup d'œil à la configuration. figure. Ce que nous allons faire. Nous allons faire un chiffre. Et nous allons définir la classe pour qu'elle se penche sur Bootstrap. Nous allons mettre notre immédiat à l'intérieur. Il parle de l'indentation. Et je vais mettre une classe d'image de figure. Il faut le mettre en légende. La classe sera sous-titrée pour Bootstrap. Et les textes ne seront que le titre. On peut se fixer. Ce que nous faisons, c'est que nous mettons notre premier paramètre, c' est-à-dire le numéro d'index. Et ensuite, nous ferons notre deuxième et ce sera, par exemple, une photo de moi. Crocker. Gardez ça et jetez un coup d'œil. Et nous prenons l'image de toute crampe et nous remarquons qu'elle est beaucoup plus faible et qu'elle est alignée immédiatement parce qu' il s'agit d'une légende de figure. Nous effectuons une inspection. Vous verrez que nous avons comment ils ont bootstrap figure, mais j'ai pensé à l'image. Et ensuite, nous avons notre légende ci-dessous. Vous remarquerez qu'il utilise la couleur plus claire, la plus petite taille. Et les technologies d'assistance seront en mesure de le relever. Il s'agit d'une légende pour la légende de la figure réelle de l'image. Par exemple, nous allons mettre une deuxième image dans. Amy, va saisir son nom, son nom de fichier. Et puis deux images, 1 seconde 1 po. Nous allons envoyer des textos et vous aurez une courte période. Nous recherchons le deuxième article. Et ça va être une photo de Bender. Nous allons sauver ça. Avant d'y jeter un coup d'œil, vous voudrez peut-être désactiver l'image par défaut ici. Nous allons donc faire un peu de cette rangée que nous avons retirée, cette image du haut que vous pourriez ajouter du rembourrage. Mais c'est ainsi que je retire des images du tableau d'images. Et cela fonctionne bien avec des choses comme Netlify, CMS. Nous téléchargeons des images et elles sont automatiquement placées dans le tableau permanent des images pour vous. Ajoutons un peu de rembourrage. Nous allons donc accéder à notre ligne de contenu. Nous allons faire jusqu'à trois. Maintenant, j'ai un peu de rembourrage là-dedans et vous pouvez passer par là et vous pouvez ajouter autant de personnalisation que ça ressemble. Et à la fin de ce cours, je vais vous donner une leçon rapide sur la façon de personnaliser davantage les choses. Solid laisse la configuration avec les deux images et le code court. Vous avez donc un exemple de la façon dont cela fonctionne. 9. Widget : Articles récents: Examinons les widgets. Nous allons dans notre support de mises en page, puis dans les partiels. Et nous allons créer un nouveau dossier appelé widgets. Ensuite, nous commencerons par index.html. Et ensuite, nous ferons un code HTML postdoc récent Dash. Je les appellerai dans l'index si nous ferons une plage et nous ferons le point du site. widgets de points Params placeront l'intégraine. Nous allons exécuter n'importe quel partiel, et ce sera le cas, ce qui est un pourcentage oblique. Cela utilisera print f pour cela. Je peux juste fournir le point. Et les contextes dans lesquels les partiels sont compliqués. Avec un signe de dollar. Le signe dollar revient à la racine de ce fichier particulier, de sorte que vous n'attribuez pas 0 avant que nous ne finissions dans la fourchette. La gamme dont nous avons raison de contextes. Oui, ça devient un peu compliqué. Nous pourrions mettre du code HTML à point ici, mais ce n'est pas nécessaire. Alors, allez dans et configurez notre fichier de configuration. Donc sous les paramètres et nous ferons des widgets. Et la façon la plus simple de le faire est de commencer par notre récent Dash. Nous pouvons commencer par notre code HTML. Parlons simplement des bases de cela. Nous allons faire une variable appelée récente. Et ce sera un point ou des pages jaunes. En haut de T majuscule car sa variable intégrée est Posts. Et nous examinons, par exemple, cinq premiers entrent et s'ils sont récents parce que nous ne voulons pas afficher la partielle si nous n'avons pas eu la publication là, nous mettrons dans le balisage. Et puis, pour les os nus, juste pour commencer les choses sera plus récent. Lui. Nous ferons un A et ce sera réel. Ensuite, nous utiliserons le titre des points. Nous allons simplement faire un marquage final en retrait. Et puis pour que les choses fonctionnent et que vous devez aller à la base, débarrassez-vous du Lorem Ipsum pour vos douleurs latérales. Et nous exécutons des widgets partiels index obliques et analysons les contextes de points. Nous avons une liste de publications avec des liens qui fonctionnent. Passons en revue et nous allons mettre du HTML. Nous allons faire Div Dot. Widget fera également le widget tiret, tiret, récent. Donc, en utilisant à nouveau le style BM CSS. Et dash, dash doit modifier le type. Et ce sera pour que les publications récentes de Dash soient plus correctes. Nous faisons donc un widget récent de type post, puis regarderons les en-têtes. Par exemple, nous pouvons le faire H3, et nous ferons un widget sombre, un trait de soulignement, un titre de soulignement. Ensuite, nous publierons des messages récents. Glenn a mis une URL. Nous obtiendrons notre gamme. Faites-le. Nous allons réparer une partie de l'indentation, pourrons le retirer si vous voulez l'enregistrer et jeter un coup d'œil. Ensuite, nous ferons un peu de CSS. Nous avons publié nos cinq articles récents avec leurs titres. Et ils vont écouter peu de CSS maintenant pour que cela fonctionne un peu mieux, nous reviendrons dans les ressources et le CSS dans notre CSS personnalisé. Ensuite, faites un widget point. Et ensuite, nous ferons un peu de rembourrage. Je vais mettre un reste pour l'instant. Par exemple, si vous souhaitez modifier le titre, vous pouvez le faire. Et le titre de soulignement. Nous allons laisser ça vide. Ce n'est qu'un exemple. Nous avons ensuite notre UL et nous ajouterons remplissage à gauche 0 pour remplacer la marge par défaut. 0 essayait de remplacer toutes les réinitialisations CSS que Bootstrap inclut pour nous. Le style de liste de tâches n'est pas. Ensuite, nous allons faire un LI dans la liste, ajouter un peu de rembourrage sous I 0.5, rem pour l'instant. Ensuite, nous examinerons les liens à l'intérieur du widget au lieu de b, a, et nous ferons de la décoration de texte. Aucune. Nous n'avons donc pas reçu de soulignement. Par exemple, disons que nous voulions modifier le remplacement du widget de publications récentes. Vous pourriez faire Dash, Dash, Dash, Autrement. Nous allons laisser ça vide pour l'instant, mais vous pourriez remplacer tout ce qui se trouve à l'intérieur. Et cela a beaucoup changé. Nous allons maintenant jeter un coup d'œil à ce que nous pouvons mettre la date en dessous. Ensuite, nous allons passer au widget suivant et vous pourrez personnaliser ce CSS en fonction de vos besoins. Revenez dans nos derniers articles. Faisons un peu de reformatage. Donc ce titre à l'intérieur des dividendes pour le forcer à sa propre ligne. Ensuite, nous allons faire un petit tiret de texte en sourdine. Ce qui signifie que le texte le rend aussi petit. Et ensuite, nous publierons la date. Je mets le marquage avant qu'on ne l'oublie. Nous allons passer cela au-dessus notre texte. date de publication doit toujours être publiée, mais au cas où il n'y a aucune donnée. Et puis nous mettons une heure et nous ferons datetime comme W4 au format sombre. Nous allons faire 2006 dash, un, tiret O dans un format lisible par machine. Ensuite, nous allons consacrer le temps et nous reviendrons à notre liste. Nous pouvons extraire le format de là. Donc, en utilisant notre format de fichier de configuration , vous pouvez le modifier à votre emplacement. Nous garderons cela et je vais jeter un coup d'œil au commerce inversé qui manque. Et nous sauvegarderons cela et regarderons les dates qui apparaissent ci-dessous. 10. Widget : Articles connexes: Nous allons faire un widget sur les publications connexes. Celui-ci est un peu plus complexe. Nous devons configurer une configuration pour cela. Nous avons une configuration par défaut ici. Nous allons le copier, aller dans notre fichier de configuration. Et au-dessus des params. Nous allons mettre un petit mot là-dedans. Pour adipose, incluez une nouvelle application. Nous allons mettre cela à vrai. Quatre pages qui sont plus récentes que le courant. Et voici tous les termes de recherche. Nous examinons donc les catégories, puis nous examinons les balises, les définissons à la fois à 100 et à une requête de recherche. C'est vrai. Cela ralentit un peu les choses. Nous sauvegarderons cela , puis nous allons jeter un coup d' œil à la configuration de notre widget. Nous allons donc au widget, donc nous allons en créer un nouveau lié à post.html. Ce que nous allons faire, c'est que nous allons copier en mangeant des articles récents. Alors, collez ça dans. Ensuite, nous allons entrer dans la configuration et nous ajouterons un prix de tiret éclairé. Nous allons les dire tous les deux. Regardez dans le navigateur, vérifiez qu'il fonctionne. Nous avons nos deux IOPS récents , nous pouvons maintenant personnaliser et les transformer en postes leader. Ce que nous allons donc faire, c'est que nous allons passer en revue tout ce qui concerne la duloxétine récemment et toutes les occurrences seront liées. Et nous allons changer notre CSS. Et en se dirigeant vers les publications connexes. Débarrassez-vous ensuite de notre date de publication. Nous pouvons nous débarrasser de la div autour du titre. Je vais vérifier comment les choses vont jusqu'ici. Jusqu'à présent, c'est tellement bien. Et puis on va se débarrasser de l'endroit où, du haut des poteaux. Et nous ferons des pages régulières de points de site, liées aux points. Ensuite, nous ajouterons un point comme contextes de la fonction associée. Alors, enregistrez ça et jetez un coup d'œil. Je vais à l'un des messages et vous verrez apparaître des messages connexes en dessous. Nous avons également cinq d'entre eux. Jetons un coup d'œil à la possibilité de configurer le nombre de périphériques. Nous allons donc faire des publications liées au point de site, params dot. Retournez ici. Et nous ferons des publications connexes. Cinq, ou le contrôle de commande, le nombre de widgets. Ensuite, nous en installerons un pour les publications récentes, ce sera aussi 15. Nous allons sauver ça. Et nous en aurons encore cinq et nous y reviendrons également par des messages récents. Nous pouvons copier ce texte. Prix récent. Et ça fonctionne très bien. 11. Widget : Catégories de publication: Sonnez un widget pour les catégories de publication. Nous allons donc créer un nouveau fichier HTML appelé post Dash. J'ai dû redémarrer le code HTML. Et ils ajouteront cela à notre fichier de configuration. Gardez ça. Nous y retournerons. Un autre widget va copier le code, coller, et vous pouvez voir que nous l'avons fait fonctionner et nous allons maintenant envisager de le personnaliser. Donc, ça va changer le signe du dollar. Catégories récentes de signes de dollar, vont changer CSS, post dash, baies. Ensuite, nous allons également changer de cap. Ensuite. Ou modifiez les catégories en taxonomies de points de site, catégories de points T majuscules. Ensuite, nous allons faire une fourchette au-dessus, faire point par compte et le capital B, le capital T. De cette façon, il place les catégories avec le plus grand nombre de postes en premier. De cette façon, il y a plus de chances d'amener un utilisateur à cliquer sur la catégorie réelle. Nous allons nous débarrasser de la date de publication. Et nous allons nous débarrasser de cette div, qui est autour de lui. Nettoyez ça. Ensuite, ce que nous allons faire, c'est que nous mettrons en permalien réel, titre de la page avec des majuscules. Et si vous le souhaitez, vous pouvez, entre parenthèses, indiquer le nombre réel de pages, de sorte que vous pouvez faire le nombre de points. Regardons ça. Nous avons le nombre de pages par catégorie et, comme vous pouvez le constater, elles sont commandées par compte. 12. Widget : Publier des étiquettes: C'est un peu similaire à la leçon précédente. Ce que nous allons faire, c'est que nous allons créer un nouveau fichier. Nous appellerons ça des tags post dash, pensés HDL, à notre configuration. Balises de tableau de bord. Gardez ça. Ensuite, nous allons copier le code des catégories dans des balises et l'enregistrer. Vous pouvez voir que nous avons les deux sur le site. Maintenant, je peux faire une certaine personnalisation, mettre en évidence toutes nos portes sur catégories et modifier toutes les occurrences pour dole attribuer des balises. Et ce seront des balises de taxonomie. Maintenant, nous allons changer notre titre en balises de pose et en classe CSS. Cette fois, ce que nous allons faire, c'est que nous limiterons le nombre affiché. Alors mettez ici d'abord et nous utiliserons des sites, des points, des paramètres, des posts de points, des balises. Avant de cliquer sur Enregistrer, allez dans notre fichier de configuration. Nous allons mettre des balises de post, par exemple dix. Et nous allons simplement modifier notre commentaire par le nombre d'éléments. Nous allons sauver ça. Retournez dans notre partie. Nous allons sauver ça. Et nous présentons bien maintenant notre personnaliseur. Et nous allons insérer des boutons dans chacune des balises. Ce que nous ferons, c'est que notre lien fera une classe égale. Je vais mettre btn, btn dash, primaire, BTN dash m c'est pour un petit bouton et une couleur primaire. Ensuite, nous ferons la marge, la fin d'un et une marge inférieure de deux étapes pour que multiligne doit mettre un bouton de rôle égal. C'est donc un cliché sur les technologies d'assistance à quoi cela est lié. Et nous allons dire que maintenant , le bouton fonctionne. Nous venons de supprimer la liste et les éléments de liste. Ensuite, nous allons nous débarrasser des deux étiquettes UL. Et nous allons nous débarrasser du LI et de la balise LI de clôture, l'étiquette finale est superbe. Vous pouvez ensuite les réorganiser si vous le souhaitez. Je pense que la dernière chose que nous ferons, c'est que nous ajouterons des valeurs par défaut lorsque nous utiliserons la première fonction. Nous allons mettre quelques crochets autour. Maintenant. Périmètre. Ensuite, ce que nous pouvons faire, c'est que nous pouvons mettre dans un tuyau par défaut, tout ce qui est sensé par défaut par son exemple en étain. Vous pouvez le sauvegarder. Et si vous n' aviez pas cet élément de configuration particulier présent, vous n' obtiendrez pas d'erreur car ici nous examinons la valeur par défaut, nous reviendrons dans les publications récentes et les publications associées. Et nous y ajouterons également des valeurs par défaut. Nous allons passer à des messages récents. Et nous avons notre premier, je vais mettre des parenthèses. Et nous ferons par défaut et cinq. Et puis Reddit publie. Même chose. C'est vraiment important lorsque vous utilisez des éléments de configuration que vous définissez des valeurs par défaut pour voir si j'obtiens une erreur. Vérifiez, tout fonctionne toujours. Et ça marche toujours. 13. Widget : Recherche: Le dernier widget que je vais vous montrer ce que nous allons faire pour rester simple. Nous allons aller dans, et j'ai laissé le lien vers cette page dans la section Ressources, la barre de navigation Bootstrap, et nous allons extraire leur entrée de recherche. Copiez donc ce texte. Ensuite, nous créerons un nouveau fichier de widget appelé search.html. Et nous allons le coller et nous apporterons quelques modifications. La première chose que nous ferons est que le rôle formel équivaut à la recherche. Et puis pour l'entrée, nous allons faire un nom égal à Q. Et ensuite, ce que nous allons faire, nous allons enregistrer cela et nous allons entrer dans point de configuration YAML et nous ajouterons la recherche pour être la première. Nous allons sauver ça. Nous avons fait notre travail de recherche et nous voulons que nous y ajoutions nos classes CSS pour obtenir un peu de rembourrage en dessous. Donc pour notre classe et nous ferons du widget et nous obtiendrons un tiret, tiret, une recherche et un coup d'œil. Maintenant, il tire le style mondial. Maintenant. Il ne fonctionnera pas dans le widget de recherche. Vous devrez regarder mon cours sur la recherche avec Hugo. Il y a beaucoup de choses à parcourir très rapidement et malheureusement trop volumineux pour ce cours. Mais si vous allez à ce cours, vous apprendrez tout ce dont vous avez besoin pour implémenter une fonction de recherche sur votre blog. Donc, meilleure chance avec ça. Quel est le lien ci-dessous dans la section Ressources ? Vous pouvez donc trouver mon cours sur la façon d' implémenter une fonction de recherche avec Hugo. 14. Créer un nouveau message: Vous êtes donc une excellente commande intégrée pour créer une nouvelle page, ou dans ce cas une nouvelle publication. Vous exécutez donc la commande que Hugo savait, et nous devons lui dire où placer le fichier. Donc, si nous allons dans Contenu, vous remarquez qu'il y a un dossier de publication, vous le placerez là-dedans. Et vous remarquerez à l'intérieur de chacun des dossiers que nous avons un point d'index MD créera une barre oblique dans les toasts. Ensuite, nous utilisons la date d'aujourd'hui dans un format ISO. Nous utilisons donc 2022, dash 05, dash 30. Vous pouvez mettre ce que vous voulez ici, mais j'utilise simplement un système pour faciliter la recherche des poteaux sur ce double tableau de bord. Et je mettrai le titre du billet. Nous allons donc tester le tiret, le post, la barre oblique, le point d'index, md pour qu'il entre. Si nous allons dans l'archétype des billets de programme de vacances de poulpe , c'est tout dans le dossier de la publication. Et c'est un modèle qui sera utilisé. Le total serait tout à fait ce que nous voulons, mais nous pouvons modifier cela. Nous avons notre date ou notre encart jusqu'à la date d'aujourd'hui et la date de publication sera également conservée à la date qui est idéale pour être affichée dans les publications. Le brouillon est défini sur false, ce qui signifie que la page s'affiche par défaut, ce que je veux. Mais vous ne voulez pas rédiger la vérité. Vous ne voulez pas de choses que nous avons probablement tout de suite, mais je n' ai généralement pas autant de choses. C'est vrai. J'attends autour. J'avais généralement l' habitude de poster une fois, puis je le publiais en téléchargeant le FTP ou en m'engageant à obtenir. Et nous devrons configurer manuellement nos catégories, balises et images. Entrez ensuite sur notre photo, ce qui est facile à trouver car à la fois la date et l'air total à rechercher en termes de photo, c'est notre index point MD, ou copier-coller dans l'imagerie. Si nous cliquons avec le bouton droit de la souris et que nous renommons, nous pouvons saisir le nom du fichier. Je vais coller ça dans le tableau et les balises. Je vais le copier ici. Nous avons donc des humains et les catégories vont copier. Premièrement, je ferai Punnett Express pour qu'ils puissent le relier. Mettons maintenant des virgules inversées autour de cela car il s'agit de plus d'un mot. Ensuite, nous allons mettre notre texte dans Lorem Ipsum dans le Moran, exécuter notre serveur. Nous regardons dans le navigateur. Voici notre poste de test. Et il est inclus dans la date de publication et les textes. Nous ne l' avons pas configuré pour afficher automatiquement les images. Donc, si nous retournons dans Amy Wong, c'est comme ça que nous allons sortir l'image à afficher. C'est prêt à partir. Nous avons notre titre sur moi. 15. Mise en évidence de la syntaxe de code: C'est un surlignage de code qui fonctionne immédiatement immédiatement, bien que nous puissions supprimer styles en ligne et les déplacer vers une feuille de style, vous obtiendrez probablement une légère réduction de la taille de votre code. Et l'autre raison pour laquelle vous souhaitez le faire est que si vous utilisez CSP pour des raisons de sécurité, vous ne l'êtes pas, vous avez verrouillé les styles en ligne par exemple. Par conséquent, vous devrez déplacer vos styles de mise en surbrillance de code vers une feuille de style. Quoi qu'il en soit, mettons-le dans la méthode par défaut, ça marche dès la sortie de la boîte. Il faut donc mettre trois backticks. Ensuite, nous allons mettre notre code. Je vais donc vous montrer un exemple. Il y a du code Hugo au cas où vous courez et Hugo blogue. Nous allons donc entrer dans nos partiels et ensuite nous prendrons quelque chose d'un peu plus intéressant. Par exemple, ici, copiez-le, collez-le dans trois autres backticks. Ensuite, nous devons fournir un langage pour la mise en évidence de la syntaxe. La page hoquet pour la mise en surbrillance de la syntaxe et laisse le lien vers cette page dans la section Ressources. Si vous faites défiler vers le bas, vous remarquerez que nous avons les modèles HTML et que vous devez copier ce texte exact. Collez ça dans. Nous allons le sauvegarder. Je vais regarder dans le navigateur. Et il y a notre mise en évidence de la syntaxe. Et cela est configuré pour fonctionner dès que vous le fournissez. Vous n'avez pas eu à le faire, mais il est recommandé fournir le langage réel pour essayer de mettre en évidence. Voyons maintenant comment supprimer les styles en ligne. Parce que si vous cliquez avec le bouton droit de la souris et que vous inspectez, j'ai regardé notre code, vous remarquerez que nous avons tout un tas de travées qui se produisent avec différents styles. Pour chaque période, nous pouvons réellement utiliser des feuilles de style qui, par exemple, si vous avez bloqué les styles en ligne. Ainsi, la mise en surbrillance de la syntaxe, nous avons mis un lien pour configurer la mise en surbrillance. Et ce qui nous intéresse, sont toutes les valeurs par défaut, c'est la classe no. Il est donc actuellement configuré pour ne pas inclure de classes. Nous voulons changer ce type aussi avec je l'ai probablement dit, c'est juste une préférence personnelle. Mais je pense que vous vous sentirez beaucoup plus sur la page de cette façon. Copiez donc toute cette configuration. Ensuite, nous allons entrer dans notre fichier de configuration. Et au-dessus des paramètres. Nous allons le coller dedans. Et puis vous verrez que j' ai déjà une maquette ici, mais c'est pour Goldmark. Nous configurons actuellement l'outil de surbrillance, découpons tout et nous nous débarrassons du balisage et nous allons le coller. Merci. Bien sûr, je ne l'ai probablement pas fait sous Goldmark. Maintenant, ce que nous essayons de changer, c'est le non-classes. Je vais donc mettre ça à faux. Nous allons faire un commentaire là-dedans. False a besoin d'une feuille de style. J'ai actuellement le système de style WannaCry. Cela dépend de la feuille de style que nous fournissons. Donc de retour sur la page de mise en surbrillance de la syntaxe, nous avons la génération du CSS. Nous avons donc défini les classes non sur Faux. Ce que nous devons maintenant faire, c'est générer le CSS. Ici, nous générons un style de WannaCry. Vous pouvez découvrir tous les styles différents. Il ferait le lien. Je vais juste rester avec WannaCry parce que je l'aime personnellement. Cela va générer un fichier CSS de points de syntaxe et nous allons le déplacer. Nous allons donc copier ce texte dans la commande. Création d'un nouveau terminal. Il va coller dans la commande. chercherons notre CSS de points de syntaxe. Nous allons couper ça, le placer dans notre dossier de ressources. Et le SCSS. Vous avez probablement plus de facilité si vous le renommez en SCSS. Ensuite, nous devons l'importer. Ne regardera pas l'importation de commentaires, la syntaxe mettant en surbrillance CSS. Nous utilisons chez Import. Et c'est la même photo. Il s'agit donc d'un point de syntaxe SCSS qui met un point-virgule à la fin. Ensuite, nous nous assurerons que notre serveur de développement fonctionne. Et il se plaint du fait qu'il s'agit de l'UTF 16. allons donc dans la syntaxe, CSS, puis nous pouvons changer notre encodage, UTF-8, qui est à peu près le Lego standard dans le navigateur. Et nous allons jeter un coup d'œil. Maintenant, vous pouvez dire qu'il s'affiche toujours, ce qui est une excellente nouvelle. Faisons un rafraîchissement rapide pour nous assurer que je ne suis pas allé inspecter quelqu'un d'autre. Nous avons maintenant tous nos cours configurés avec span. Et si vous regardez à droite, vous verrez nous avons chroma comme classe parente, puis Sam est l' enfant et chroma point cm vous donnera cette configuration de couleur SetSpeed avec les classes. Ils peuvent donc être réutilisés. Si vous avez beaucoup de mise en surbrillance syntaxique et que vous allez utiliser le guichet unique pour tout cela. Vous pouvez même le personnaliser si nécessaire. Cela va certainement vous aider. Si vous avez désactivé les styles en ligne avec vos en-têtes de sécurité. 16. Personnaliser les styles: Voici quelques façons différentes de modifier les styles. La première méthode consiste à utiliser les classes d'utilitaires. Donc, si vous entrez dans, par exemple, nous allons accéder à nos publications et au HTML à point unique. Et si nous cherchons à changer la façon dont les titres, bien que nous allons entrer dans notre partie totale. Et c'est actuellement un H1, mais je veux le rendre un peu plus petit. Je mets cette classe H2. Nous allons sauver ça. Maintenant, cliquez avec le bouton droit sur la publication. Laissez-nous, nous avons notre classe H2, et cela va réduire la taille de la police pour nous. Mais ce qui est vraiment important, c'est de regarder les variables et aussi les feuilles de style. Si vous accédez aux ressources et au SPSS, vous verrez que j'ai configuré une page appelée Variables personnalisées. Et c'est là que ça commence à devenir vraiment intéressant. Nous avons donc ici notre couleur primaire. Vous pouvez utiliser l'une de ces variables intégrées, mais avouons-le. Tout le monde l' a déjà fait. Et vous ne voulez pas que votre site Web ressemble à un site Web Bootstrap par défaut. Ce que nous pouvons faire, c'est que nous pouvons changer la couleur et il faut être très prudent. C'est sûrement quelque chose de bon goût. Sinon, cela ne fonctionnerait probablement pas, mais vous pouvez utiliser des essais et des erreurs. C'est donc ma principale. Nous allons sauver ça. Et je vois que toutes les couleurs primaires ont changé, mais nous pouvons faire bien plus que cela. Par exemple, ici, nous avons notre pagination. Il y a deux façons de déterminer les variables à modifier. Vous pouvez accéder à notre dossier Modules de nœuds, puis Bootstrap, SCSS, puis variables en bas. Et vous pouvez effectuer le contrôle F et rechercher la pagination. Il s'agit ensuite de copier et de coller toute cette section au bas de vos variables. Le problème que vous pouvez rencontrer est lorsque ces variables font référence à une autre variable que vous n'avez pas. Par exemple, nous avons une couleur de lien. Nous avons déjà du blanc en haut. Cela ne devrait donc pas poser de problème. Mais par exemple, la couleur du lien ne l' a probablement pas déjà. Ce que je vous recommande de faire, c'est mettre en évidence l'ensemble du lot et de les commenter, puis de déterminer quelle partie vous voulez réellement utiliser. Exemple. Nous avons ici l' arrière-plan de gris 200 et la couleur de la bordure survolée. Je vais donc les retirer. Je veux que mon aquarelle soit le fond plus sombre de 500 oméga, un peu plus sombre à 300. Nous allons donc sauver ça. Et maintenant, nous avons notre fond sombre et le contour, il est encore plus sombre. L'autre façon de le faire est de rechercher les documents pour la pagination Bootstrap. Assurez-vous d'être sur le bootstrap de cinq pages. Il est extrêmement puissant. À peu près au bas de chaque page de documentation sur Bootstrap, nous avons une section variable et vous pouvez copier et coller directement à partir de là. Le problème avec cela est, par exemple, nous avons une couleur liée et que vous l'avez déjà préparée et que vous l'avez déjà dans vos variables. Donc, ce que vous devez faire, c'est revenir dans les variables d'amorçage qui sortent des modules de nœud et faire un contrôle F pour la couleur du lien. Et vous devrez aller au premier, car c' est là qu' il est défini en premier. Et vous devrez copier et coller. Cette ligne. vais aller comme ci-dessus. C'est là que ça commence à devenir un peu désordonné. Et ensuite, nous pourrons faire commenter cette ligne. Mais en réalité, vous ne voulez probablement pas l'avoir, si vous essayez de le modifier, vous pouvez soit modifier la couleur du lien soit si vous voulez la rendre différente, vous pouvez simplement mettre autre chose dans cette ligne. Par exemple, vous pouvez simplement y mettre une couleur si vous le vouliez, un Hicks et ainsi de suite. Sinon, vous pouvez utiliser l'une de ces variables ici, succès primaire, secondaire, etc. Ou si vous souhaitez modifier tous vos liens en même temps, il suffit de changer la couleur du lien. Vous n'avez même pas besoin d'activer cette ligne car nous nous soucions simplement de changer la couleur du lien. Vous voudrez peut-être rendre cette option secondaire, par exemple, éliminer la balise par défaut. Ceux-ci. Donc, vous êtes censé le faire. Et nous allons le sauvegarder. Et maintenant, tous nos liens utilisent la couleur secondaire. Et le dernier moyen est d'utiliser des feuilles de style pour que je puisse faire des styles. Nous avons notre CSS personnalisé et nous avons des widgets, par exemple. Et je vous ai presque montré cela tout au long du moment où nous les fabriquons. J'ai utilisé ici un style de faisceau hybride. Et jetons un coup d' œil à nos widgets. Par exemple, disons que je veux avoir moins de rembourrage sous le titre. Nous allons cliquer avec le bouton droit de la souris et inspecter et nous verrons comment il est configuré. Et il y a notre frappe. C'est le bas de la marge, 0,5 rem sous le titre. Je vais donc faire le fond de la marge. Je pointe vers REM, nous allons l'enregistrer. Et c'est juste réduit de l'autre côté de l' espace sur la page. Vous voudrez peut-être vous débarrasser de tout cela afin que nous puissions remplacer les états en utilisant Bootstrap trois, mais actuellement vous le remplacez par 0,2. On peut juste mettre 0 dans un chauffage 0. Vous n'utilisez pas une unité comme Remy qui vient de mettre 0. Et vous verrez qu'il est encore réduit et nous avons complètement débarrassé de tout le rembourrage. Il n'y a rien entre le titre et le contenu. Et cela pourrait être utile si vous essayez d' économiser de l'espace sur la page.