Développement de thèmes Ghost : comment personnaliser votre publication Ghost

1. Introduction: Bonjour et bienvenue dans Ghost Theme Development : Comment personnaliser votre publication Ghost. Je suis Christopher Dodd, je suis un développeur web indépendant et professeur de premier plan ici sur SkillShare.com, couvrant tout ce qui concerne le développement Web et la freelance en ligne. Dans la classe d'aujourd'hui, nous allons apprendre les fondamentaux du développement de thèmes Ghost afin de vous donner un contrôle total sur l'apparence et la convivialité de votre publication Ghost. Pour ceux d'entre vous qui ne connaissent pas Ghost, je le décrirais simplement comme l'alternative moderne et plus efficace à WordPress. C'est super rapide et sans le gonflement prolongé de WordPress, ce qui en fait une plateforme idéale pour héberger un blog ou une autre publication en ligne. C'est précisément pourquoi j'ai décidé de transférer mon propre site Web personnel vers Ghost en 2021, et j'ai constaté une amélioration considérable de la vitesse par rapport à WordPress. Donc, si vous êtes prêt à apprendre à développer et à personnaliser les thèmes Ghost, cliquez sur la vidéo suivante et je vous verrai à l'intérieur. 2. Pourquoi utiliser Ghost: Avant de vous montrer comment installer Ghost sur votre ordinateur, je veux rapidement expliquer pourquoi je recommande Ghost, car je suis sûr que beaucoup d'entre vous n'ont pas beaucoup entendu parler de cette plateforme auparavant. Ghost a été fondée en avril 2013, environ 10 ans après WordPress, après une campagne Kickstarter très réussie visant à créer une nouvelle plateforme axée uniquement sur l'édition professionnelle. Les mots-clés se concentrent uniquement sur l'édition professionnelle. C'est important, car cela montre que Ghost est spécialisé dans la réalisation d'une chose très bien. Personnellement, depuis le passage de WordPress à Ghost en 2021, je peux affirmer confortablement que Ghost est une bien meilleure plateforme pour la publication en ligne. L'un des plus grands avantages pour Ghost est sa rapidité, 1900 pour cent plus rapide que WordPress, selon des études indépendantes. Pourquoi ? Parce que Ghost, contrairement à WordPress, est construit sur une pile technologique moderne. Lorsque j'ai déplacé mon site Web de WordPress à Ghost, mon niveau de vitesse selon GT Metrix s'est considérablement amélioré, passant d'un F et de quelques B à tous les As. On peut en dire autant pour interagir au sein du côté administrateur de Ghost. L'administrateur est une application Web d'une seule page, ce qui signifie que l'interactivité est plus fluide et plus rapide. Sans oublier que l'interface est simple et propre. Contrairement à WordPress, avec tous ses différents menus. L'administrateur Ghost ne change pas en fonction thème ou de l'intégration que vous ajoutez à votre site Web, ce qui signifie que l'expérience est beaucoup plus cohérente que sur une plateforme comme WordPress. Le compromis, cependant, est que les modifications apportées à votre site Web sont plus difficiles à faire sans connaissances en matière de codage. Heureusement pour vous, ce ne sera pas un problème après avoir suivi ce cours. Pour conclure, vous n'avez probablement pas trouvé Ghost qui atteignait la notoriété courante, étant donné qu'il s'agit d'une plateforme de développement d'une plateforme ciblée, mais pour ceux d'entre vous qui savent exploiter la puissance de Ghost, vous devriez trouver l'expérience pour vous-même et pour vous. l'utilisateur est remarquablement plus satisfaisant. 3. Outils et connaissances nécessaires: Dans ce cours, nous nous concentrerons sur les spécificités qui composent les thèmes Ghost. Bien sûr, le développement du thème Ghost inclut les trois langues du Web frontal, y compris HTML, CSS et JavaScript. Mais il ne s'agit pas d'un cours axé sur aucun de ces sujets. Avant de suivre ce cours, on s'attend à ce que vous ayez une bonne compréhension du HTML et du CSS. Pour ce qui est des outils requis, comme d'habitude, vous aurez besoin d'un navigateur Web, Google Chrome est recommandé ; et d'un éditeur de code, dans cette classe, j'utiliserai Visual Studio Code. Dans la vidéo suivante, je vais vous montrer comment télécharger et installer Ghost localement afin que vous puissiez commencer à développer des thèmes Ghost. Mais une fois notre thème créé, nous devrons le télécharger sur un hôte en ligne. Les spécificités de tout cela seront discutées tout au long de la classe. 4. Comment installer Ghost: Comme indiqué dans la vidéo précédente, nous allons vouloir installer Ghost localement. Localement, ce qui signifie que nous allons l'exécuter sur notre propre ordinateur. Il y a deux parties à cela, la première partie consiste à installer l'interface de ligne de commande, donc Ghost CLI, et la deuxième partie est que nous allons installer une instance Ghost sur notre machine locale. Nous pourrons exécuter un petit serveur ici et opérer avec Ghost comme nous le ferions sur un site en direct, sauf que tout sera uniquement local et nous aurons accès facile au code pour lequel développer notre thème Ghost. Comme mentionné ici, il n'est pas adapté à une utilisation en production. C'est quelque chose que nous utilisons pour développer les thèmes, puis lorsque nous serons prêts à publier, nous transmettrons ce code sur notre site en direct. Mais pour l'instant, nous allons commencer par installer Ghost CLI et, pour cela, nous devons nous assurer que nous avons installé une version compatible de Node et de NPM. Cette première exigence ici, sous conditions préalables, va couvrir 99,9 % des personnes qui regardent ça. Je serais très surpris si vous aviez un système d'exploitation autre que ces trois, donc vous devriez être bon pour cela. Node.js est un environnement d'exécution très courant dans le développement Web moderne. Si vous avez effectué un autre développement Web, vous devriez l'installer. Sinon, le lien est là, Nodejs.org, et vous pouvez y suivre les instructions d'installation. Sinon, si Node est installé , assurez-vous que npm est installé et que vous êtes prêt à suivre. Si vous n'êtes pas sûr que ces deux-là soient installés, ouvrons une fenêtre de terminal maintenant. Je vais juste effacer tous ces avertissements. J'en utilise un appelé iTerm, donc il peut sembler un peu différent de votre application terminal. Vous allez utiliser un terminal sur un Mac ou une invite de ligne de commande sur Windows par défaut. Mais ici, dans mon application de terminal, ce que je peux faire pour vérifier si Node et npm sont installés, c'est simplement exécuter la commande pour vérifier la version. Je peux vérifier ma version Node et vous pouvez voir qu'il est 16.9.1 et ensuite je peux aller npm-v et cela me dira ma version npm. Je vais juste zoomer ici pour que vous puissiez le voir plus clairement. Comme vous pouvez le constater lorsque nous exécutons ces commandes, nous avons des numéros de version, ce qui signifie que Node et npm sont installés. La prochaine chose que nous allons faire est d'installer l'interface de ligne de commande Ghost avec cette commande ici maintenant que Node et npm sont installés. Je vais copier et coller cette commande dans notre terminal et cela va installer la dernière version de l'interface de ligne de commande Ghost. Après environ 20 secondes qui devraient être installées et nous pouvons maintenant commencer à trouver un répertoire pour installer notre site Web Ghost. Ce que je vais faire est clair que je vais ensuite naviguer dans un répertoire que j'ai sur mon ordinateur, code/partage de compétences. C'est ici que je garde tous mes projets Skillshare et ici je vais créer un nouveau répertoire à l'aide de la commande mkdir, et je vais appeler ce site Ghost. Après avoir créé cela, je vais naviguer dans ce répertoire vide et maintenant je suis dans le site Ghost. Exécutons maintenant la commande pour installer Ghost, ghost install local et voyons si cela fonctionne. Nous obtenons une erreur assez tôt, je ne suis pas sûr que vous ayez la même erreur, mais c'est une erreur assez courante, il serait donc important pour beaucoup d'entre vous de voir comment y remédier. C'est l'erreur qui indique que la version de Node.js que vous utilisez n'est pas prise en charge. Comme vous pouvez le voir ici, voici la liste des versions de Node prises en charge et si vous vous en souvenez auparavant, nous avons vu que nous utilisions 16.9.1. De toute évidence, cela va être différent selon la version que vous avez, mais comme vous pouvez le constater, il y a une divergence et c'est pourquoi nous avons eu l'erreur. Malheureusement pour les développeurs, cette erreur n'est pas rare. Il existe de nombreux packages Node différents qui ne s'exécutent que sur des versions spécifiques de Node. Vous penseriez qu'ils fonctionneraient tous sur la dernière version de Node, mais je suppose que Node change si rapidement que vous avez besoin d'une solution pour basculer entre différentes versions de Node et pour cela, il existe un package appelé nvm. Je vais simplement vous montrer que si vous ne l'avez pas déjà, il devrait apparaître comme le premier résultat lorsque vous tapez nvm dans Google, et ici vous pouvez voir Node Version Manager. Si nous faisons défiler vers le bas, nous pouvons voir la commande pour l'installer. Je l'ai déjà installé, mais c' est la commande que vous exécuteriez si vous ne l'aviez pas déjà installée. Nous pouvons aller ici, comme vous pouvez le voir sur mon ordinateur particulier, il est dit que nvm est déjà installé et qu'il va juste essayer de mettre à jour. Pour vous, il peut s'agir d'une nouvelle installation, assurez-vous simplement que Node Version Manager est installé et de cette façon, nous pouvons sélectionner une version spécifique de Node afin d'exécuter Ghost. Un peu frustrant, mais malheureusement, cela vient avec le territoire du développement. Il est parfois nécessaire de choisir et de basculer entre les versions de votre Node. Maintenant, vous pensez que vous pourrez passer à la version Node en exécutant simplement le nœud nvm use. C'est la commande que vous utilisez pour changer la version de Node et je pense que c'était le cas, j'ai même oublié ce qu'elle disait. Laissez-moi simplement lancer Ghost install local à nouveau. Nous avons encore ces numéros de version, voilà, 14.15.0. Vous pourriez penser que vous pourriez utiliser la commande nvm use node, qui est la commande permettant de modifier une version. Je vais utiliser nvm node 14.15.0 et maintenant vous pouvez voir que nous sommes maintenant passés à cette version. Vous penseriez que cela fonctionnerait alors pour exécuter Ghost install local. Mais malheureusement, pour moi, il est dit qu'il n'est pas compatible avec la version actuelle de Node. C'est bizarre que je reçoive cette erreur différente qui n'a pas les numéros pris en charge, mais en même temps, je ne suis toujours pas en mesure d'installer une instance Ghost. Je ne peux pas expliquer pourquoi c'est le cas, mais cette version n'est toujours pas compatible avec Ghost. Ce que je ferais, c'est rechercher les versions de nœuds prises en charge par Ghost et vérifier les derniers forums. Voici un enregistrement d'écran antérieur d' un message de forum que j'ai trouvé appelé erreur de téléchargement avec Ghost CLI, j' ai trouvé une réponse de Kevin sur le personnel que la version minimale prise en charge est 14.16.1. Si vous l'installez à l'aide de nvm, puis exécutez nvm use node et que vous le définissez sur cette version, cela devrait fonctionner pour cette version particulière de Ghost CLI. Je sais que ce n'est pas la réponse la plus claire, mais malheureusement, quelque chose que Ghost n'a pas clairement indiqué sur son site Web ou dans le message d'erreur. Lançons maintenant Ghost install local. Comme vous pouvez le constater, notre installation est en cours. Je vais juste sauter ici pour que nous n'ayons pas à attendre que tout se passe. Comme vous pouvez le voir, nous sommes presque là, nous démarrons Ghost maintenant et vous pouvez voir que Ghost a été installé avec succès, pour terminer la configuration de votre composition, visitez cette adresse qui vous permettra de configurer votre administrateur Ghost. Ouvrons ça. Je vais maintenir la commande enfoncée, puis cliquer sur ce lien pour y accéder et maintenant vous pouvez voir que je peux parcourir l'installation de Ghost. Je vais cliquer sur « Créer un compte ». Je vais appeler ça Skillshare, m'appelle Christopher Dodd, et je vais mettre quelques détails ici que j'ai précédemment enregistrés, puis ici je vais sauter ça pour inviter les utilisateurs du personnel. Maintenant, je suis dans une nouvelle installation de Ghost et ici vous pouvez voir l'administrateur Ghost, dont nous parlerons dans une seconde. Si nous voulions voir le site, nous pouvons cliquer sur ce lien ici et cela nous amènera à notre site Ghost qui a été prérempli avec quelques exemples de blogposts et qui utilise le thème de Casper. Si vous souhaitez vérifier le thème que vous utilisez actuellement, cliquez dessus pour accéder aux paramètres. Notez que cette interface est susceptible de changer, mais actuellement c'est à quoi elle ressemble et va dans Paramètres, nous pouvons ensuite passer dans Thème et vous pouvez voir que Casper est installé par défaut. Dans un instant, nous allons sortir ce thème et nous allons le remplacer par notre propre thème. Mais pour l'instant, nous travaillons avec ce thème existant et nous extrayons des articles de blog depuis l'administrateur ici. Comme vous pouvez le constater, nous avons des articles de blog qui sont livrés en standard avec Ghost. Si nous voulons nous en débarrasser, nous les supprimons tous, et nous avons également des pages fournies par Ghost. Je pense que nous avons un tag ici et sous Staff, nous avons moi et l'utilisateur de Ghost. L'utilisateur Ghost est celui auquel tous ces articles et pages de blog ont été attribués et si nous cherchons d'où provient cette navigation, nous pouvons revenir dans Paramètres, cliquer sur Navigation, et vous pouvez voir ici notre la navigation vient de. C'est ce que vous obtenez prêt à l'emploi de Ghost, mais bien sûr, dans cette classe, nous allons apprendre à personnaliser cela, créer notre propre thème. Mais nous allons tous utiliser les mêmes données Ghost. Nous allons utiliser des balises, auteurs, des pages et des publications. Mais maintenant que Ghost est installé, je vais attendre la prochaine vidéo pour vous en montrer plus sur Ghost et nous allons couvrir certaines des bases du fonctionnement de tout cela. 5. Les bases de Ghost: Bon retour, tout le monde. Dans cette leçon, nous allons aborder certaines des bases des sites Ghost et du développement de thèmes Ghost. Comme vous pouvez le voir, j'exécute une instance Ghost ici et l'adresse de l'administrateur est la suivante. Si je regarde mon navigateur ici, vous pouvez voir l'adresse pour simplement consulter le site tel quel, c' est la même chose moins le fantôme slash. Slash Ghost est ce que nous utilisons pour accéder à l'administrateur. Ce que je vais faire, c'est mettre en slash Ghost, et cela nous ramènera à l'administrateur. Je veux attirer votre attention sur deux autres documents qui vont nous guider tout au long de la classe. Voici la documentation officielle. Je suis passé de l'installation de Ghost à la vue d'ensemble des thèmes. Dans la documentation du développeur, cela peut bien sûr changer, mais au moment de l'enregistrement, c'est ici dans ce menu Thèmes que vous avez tous les détails concernant les thèmes. J'ai juste cliqué sur Vue d'ensemble pour accéder à cette page. Je vous encourage à lire la documentation. Mais ce que j'ai fait en plus de cela, c'est créer mon propre guide pour le développement de thèmes fantômes. Il sera publié au moment où vous regardez ce cours, et l'URL sera un guide de développement du thème fantôme. Mais ce devrait être le dernier article sur mon blog dans un avenir prévisible. Cela devrait être assez facile à trouver en allant crystalfreelancer.com/blog ou crystalfreelancer.com, suivi de la limace spécifique ici. Dans ce guide, ce que je fais, c'est que je passe en revue les bases que nous abordons actuellement, et je divise l'article en quatre catégories : modèles, itinéraires, contexte et assistants. fur et à mesure que nous allons plus loin dans les vidéos ultérieures, une fois que nous commençons à créer des modèles qui correspondent aux itinéraires, si je fais défiler vers le bas, vous pouvez voir que j'ai créé un petit diagramme ici. Je pense que pour des choses comme la structure, avoir un diagramme aide vraiment à conceptualiser ce qui se passe, et dans ce diagramme, ce que nous avons est à gauche, nous avons les différents itinéraires. Si vous êtes sur la route de la page d'accueil, vous verrez index.hbs à moins qu'il n'y ait un modèle home.hbs. C'est ce que tout cela signifie. Ne vous inquiétez pas, nous y reviendrons plus tard dans la vidéo. Mais la base de Ghost Theme Development repose sur les itinéraires et les modèles. En accédant à ces différents itinéraires, le modèle que vous allez obtenir dépend des modèles que vous avez réellement dans votre thème et du nom, car la convention de dénomination est très importante. Mais à un niveau fondamental, vous avez ici ces deux modèles qui constituent l'épine dorsale de tous les thèmes Ghost, qui sont index et post. Parce que si nous passons ici aux bases, un blog sous sa forme la plus élémentaire est une collection d'articles de blog. Revenons à notre administrateur ici et expliquons cela dans le contexte de l'administrateur Ghost. L'élément de menu le plus important ici est vos publications. Vous avez ce petit menu déroulant ici. Vous pouvez consulter les publications en termes de brouillons programmés ou publiés. Maintenant, c'est logique, car Ghost est une plateforme de publication. C'est une plateforme de blogs. C'est pur. Cela fait vraiment bien cette forme de sites Web, c'est pourquoi je recommande à ceux d'entre vous qui optent spécifiquement pour un blog d'utiliser fantôme. Il ne fait absolument pas tout bien, mais ce qu'il fait, c'est qu'il se concentre sur les fonctionnalités essentielles d'un blog, qui est une collection de publications. Si nous entrons ici, vous pouvez voir ici notre liste de publications. Comme nous l'avons vu dans la dernière vidéo, elle a déjà été peuplée. Mais si nous entrons ici et que nous cliquons sur « Nouveau message », appelons simplement cet exemple de publication, et ici, nous pouvons insérer toutes les choses comme une image, et ici, nous pouvons insérer toutes les choses comme une image, un code HTML ou nous pouvons simplement commencer à taper. Tout cela permet d'économiser très vite. L'éditeur est très rapide. Nous pouvons également ajouter une image de fonctionnalité à notre article de blog. Ensuite, ce que nous pouvons faire, c'est que nous pouvons mettre à jour l'URL de publication, modifier la date de publication, ajouter des balises , ajouter un extrait, changer l'auteur et modifier le modèle, si d'autres tablettes ont été définies dans le thème, ce qu'ils n'ont pas fait actuellement. C'est beaucoup de détails, mais essentiellement à l'exception des pages, tous les autres types de données que nous verrons dans ce petit menu sont liés à l'organisation de nos publications. Dans un système comme par exemple WordPress ou Shopify, dans WordPress, vous avez quelque chose appelé une catégorie, puis vous avez des tags, dans Shopify vous avez quelque chose appelé une collection, puis vous avez des tags. Dans Ghost, il n'y a pas de concept de catégorie. Ce que vous avez à la place est appelé une balise principale. Pour cet article, la première balise que j'ai placée dans cette boîte est la balise principale. Ce que je vais faire, c'est simplement créer une nouvelle balise maintenant appelée Exemple balise, puis je la balise avec le démarrage. Il va y avoir deux balises, mais cette première balise est connue sous le nom de balise principale. Si vous vouliez créer des catégories mutuellement exclusives, c'est ainsi que vous le feriez. Vous devez placer la catégorie ou la balise que vous souhaitez classer la publication en tant que première balise. Ici, l'auteur est automatiquement défini car je suis actuellement connecté en tant que Christopher Dodd, mais je pourrais facilement changer cela en Ghost et ensuite faire attribuer cet article à un autre utilisateur. Je vais garder cela attribué à moi-même. C'est essentiellement pour les paramètres de publication. Jetons un coup d'œil à quoi cela ressemble. Ce sera juste une ébauche. Je ne le ferais pas sur un site normal, mais parce que nous travaillons dans le développement, je peux simplement publier ceci et il sera publié instantanément. Revenons aux publications et examinons les autres types de contenu. Comme je l'ai déjà mentionné, les balises sont la façon dont vous organisez votre contenu dans Ghost. Si je clique sur les balises ici, vous pouvez voir que nous avons les différentes balises et le nombre de messages attribués à chacun. Je veux attirer votre attention sur les balises un peu plus dans cette vidéo, car elles sont un peu différentes des balises dans beaucoup d'autres systèmes. Comme vous pouvez le constater, dans une balise, nous avons de nombreuses options de personnalisation. Nous pouvons ajouter une image de balise, ajouter une couleur, nous pouvons lui donner un nom plus convivial. Nous pouvons même lui donner une description et personnaliser ses métadonnées. Maintenant, c'est très différent de beaucoup d'autres systèmes, dont une balise n'est qu'une chaîne de caractères. C'est ça. Toutes ces autres données ne sont pas jointes à elle. Mais ce que je veux dire ici, c'est que nous n'avons pas de catégories dans Ghost. Les balises sont fondamentalement vos catégories également. balises système très flexibles fonctionnent bien pour vous offrir une grande flexibilité en ce qui concerne l' organisation du contenu de votre site Web et l'utilisation de la balise principale dont nous venons de parler, ce qui nous donne tous les avantages de cette flexibilité sans que ces catégories s'excluent mutuellement. Si vous souhaitez classer vos publications par groupes mutuellement exclusifs, vous pouvez utiliser la balise principale. Ensuite, afin de personnaliser le personnel ou les auteurs, nous pouvons accéder au menu des choses ici, et ici nous pouvons ajouter des données à l'utilisateur. Si je rentre mon nom ici, je peux changer ma Slug. Je peux me donner une image de couverture et une photo de profil. Je peux me donner un site Web de localisation, et toutes ces données sont disponibles pour que nous puissions utiliser dans Ghost Theme Development. Bien sûr, vous avez des intégrations ici et vous avez membres si vous gérez un site d'adhésion payant. Dans cette classe, nous ne parlerons pas vraiment de Ghost comme une façon de créer un site d'adhésion, nous allons simplement parler de Ghost en termes de blogs, mais c'est aussi une option ici. J'ai entendu dire que Ghost est très puissant pour cela aussi. La dernière petite chose sur laquelle je veux attirer votre attention, ce sont les pages. Les pages sont à peu près comme des publications, c'est juste qu'elles ne sont pas organisées dans notre index des collections ici. Ils se tiennent seuls. Nous devons les relier quelque part. Il n'y a pas de boucle avec toutes nos pages. sont que des messages qui restent en dehors des publications et n'appartiennent pas à la collection principale de votre site Web Ghost. Comme vous pouvez le voir, certains exemples ici sont tels que votre page À propos, votre page de contact, votre page de confidentialité. Ce ne sont pas vraiment des billets de blog. Ils vont peut-être ressembler et ressentir la même chose, mais ce sont des articles de blog en ce sens que nous n'allons pas leur donner de balises et la date à laquelle ils ont été publiés n'est peut-être pas nécessairement si importante. C'est à peu près la même chose dans n'importe quelle plateforme de blogs où vous avez vos publications et vos pages. Fondamentalement, la seule différence est que les publications forment une collection et ont des dates. Pages vous pouvez également afficher la date de publication dans Ghost Theme Development, mais ce n'est pas si courant. La différence réside dans les publications, nous voulons pouvoir les parcourir en boucle, et lorsque de nouvelles publications sont disponibles, nous pouvons les publier dans des flux RSS, des trucs comme ça. Si vous avez déjà eu de l'expérience du blogging, cela devrait être assez clair pour vous. La dernière chose que je veux simplement réitérer ici est que votre navigation se trouve dans vos paramètres ici, sorte que vous pouvez accéder aux paramètres puis cliquer sur navigation, et c'est là que vous définissez vos données de navigation. Nous avons vu, si je retourne sur notre site en cliquant sur ce lien, vous pouvez voir notre navigation ici. Si je devais supprimer quelques éléments ici, supprimons tout sauf et cliquez sur Enregistrer. Je pense que je dois cliquer sur Corbeille ici. Essayons de nouveau ici. Vous pouvez voir notre navigation se rétrécit et notre nouveau billet de blog que nous avons publié est également là. Ensuite, ce que je vais faire car nous ne voulons pas d'un post sans image, je vais juste ajouter une image en vedette ici. Je peux juste en trouver un au hasard sur Unsplash. Il suffit d'en insérer un ici. Cliquez sur « Mettre à jour ». Retournez à notre thème, oups. Laissez-moi revenir à la page d'accueil, et ici vous pouvez voir que nous avons notre exemple de publication sous Exemple Tag et ici sous Getting Started, tous nos autres articles. Maintenant, si vous vous demandez d'où vient ce démarrage, il s'agit de la balise principale. Très important ce que vous avez mis comme premier tag. Bien sûr, dans votre thème Ghost au fur et à mesure que vous le développez, vous pouvez choisir soit de mettre en vedette la balise principale, soit de la traiter comme une balise normale. C'est à vous de choisir. Mais pour ce qui est de créer ces catégories ici, vous utiliserez la balise principale. Je veux juste que cela soit clair parce que c'est quelque chose différent dans Ghost par rapport aux autres plateformes de blogs. Maintenant que nous avons regardé l' administrateur Ghost et que vous devriez en être un peu familier, vous vous y habituerez au fil du temps, sortons notre thème et commençons à le reconstruire pour que nous puissions apprendre comment tout fonctionne. . Le thème que nous utilisons, si je vais dans Paramètres et que je vais dans Thème ici, est Casper. Si j'avais un autre thème prêt à être lancé, je pourrais le télécharger et passer à ce thème. Mais pour nous, alors que nous développons un tout nouveau thème, et que nous voulons voir tous nos changements se produire dès qu'ils se produiront, je vais garder les choses faciles pour nous et nous allons simplement sortir de notre Thème Casper ici. Lorsque cela est prêt, nous pouvons l'empaqueter, puis le télécharger sur notre site en direct une fois que nous l'avons créé. Pour cela, je vais ouvrir notre projet dans mon éditeur de code. Comme mentionné précédemment, l'éditeur de code que j' utilise pour cette classe est Visual Studio Code. Je vais ouvrir une nouvelle fenêtre dans ce programme. Vous pouvez voir tous ces différents avertissements ici. Je vais fermer ça. Permettez-moi de développer cela et ce que je vais faire est de cliquer sur « Ouvrir » ici. À partir de là, allez dans mon dossier Code, allez dans mon dossier Skillshare et ouvrez le site Ghost. En fermant ce menu de bienvenue ici, vous pouvez voir que nous avons trois dossiers : Content, Current et Versions. Allons dans Content et passons dans Thèmes, et voici notre code thématique pour Casper. Nous avons beaucoup de code différent dans différents fichiers. Dans cette classe, plutôt que de changer les choses qui existent déjà, je veux commencer de bas en haut pour que vous ayez une compréhension fondamentale. Ce que je vais faire, c'est littéralement commencer à supprimer certains de ces fichiers. Je vais supprimer tous les modèles à l'exception des modèles obligatoires. Si nous revenons à l'article de blog ou à la documentation, il n'y a que deux modèles requis dans le thème Ghost, index.hbs et post.hbs. Comme mentionné précédemment, cela est logique car un blog sous sa forme la plus élémentaire est simplement une collection de publications. Si vous n'avez pas d'endroit où les gens peuvent consulter tous vos messages et que vous n'avez pas de modèle pour afficher une publication, vous ne pouvez pas avoir de site Web. Il n'y a pas trop de fichiers requis, il suffit de vous assurer que vous avez un index .hbs et un fichier post.hbs. Évisageons tous nos modèles en dehors de ceux-ci, afin que nous puissions apprendre à reconstruire. Je vais me débarrasser de tous ces modèles ici. Je vais également me débarrasser de tout ce qui se trouve dans le dossier des ressources. Nous allons mettre nos propres atouts, et ensuite, à l'intérieur de nos partiels, nous allons nous débarrasser de tout ce qui se trouve là-dedans également. Ce que je vais faire, c'est ramener cela à un niveau très élémentaire. Supprimons tout cela et j'aurai juste une page 1 qui dit Index, puis en post, je vais décomposer cela et avoir un modèle qui dit simplement Post. Étant donné que nous avons apporté des modifications à nos fichiers hbs, nous avons supprimé certains fichiers HBS, c'est une bonne idée de redémarrer notre instance Ghost. Je vais retourner au terminal ici, et je vais exécuter la commande Ghost redémarrer, qui, comme vous le soupçonnez, qui, comme vous le soupçonnez, nous arrêterons notre instance Ghost, puis la redémarrerons. Localement, cela ne devrait pas prendre trop de temps à le faire. C'est là que tu y vas. Il est redémarré. Revenons maintenant à notre site Web Ghost et voyons à quoi il ressemble. Là, vous pouvez voir dans le répertoire racine, je regarde le modèle d'index. Évidemment, il n'y a rien à part h1, mais c'est ce que nous attendons parce que nous venons de l'éviscérer. Alors si je vais à un poste spécifique, alors quel était l'un des messages que nous avions ? Si je retourne dans mon administrateur Ghost ici, et que je passe à des exemples de publications, donc en cliquant sur Afficher la publication, vous verrez que nous venons de publier. Aucune donnée dynamique, mais vous pouvez clairement voir que nous avons éviscéré le modèle d'index qui était diffusé sur la page d'accueil et que nous avons éviscéré le modèle de publication. C'est ce que je veux que vous voyiez, c'est que nous sommes maintenant en mesure d' atteindre ces deux modèles avec nos deux itinéraires principaux. Bien sûr, les itinéraires font partie des quatre catégories dont je parle dans ce guide. Nous parlons de modèles et d'itinéraires. Nous abordons beaucoup de détails sur les itinéraires car les itinéraires sont très importants dans le développement du thème Ghost. En fait, le fichier que vous modifiez vos itinéraires ne figure pas dans votre thème. Avant de commencer à modifier nos itinéraires et à mettre à jour nos modèles, je veux simplement attirer votre attention sur ce fichier. Il s'agit du fichier routes.yaml et l'endroit où le rechercher se trouve dans votre répertoire de paramètres, à l'intérieur de votre répertoire de contenu. Je vais juste cliquer dessus et jeter un coup d'œil au fichier routes.yaml. Il s'agit de la configuration par défaut des itinéraires comme nous en parlons sur le billet de blog ici, il s'agit de la configuration par défaut. Nous expliquerons plus en détail comment cela fonctionne et la syntaxe derrière YAML dans la prochaine vidéo. Mais ce sur quoi je veux attirer votre attention, c'est que nos itinéraires sont définis ici, et nous avons ici une seule route de collecte, qui charge notre index et est desservie sur la route racine. C'est ce qui détermine que nous exécutons notre index des articles de blog sur la route racine. Ensuite, ce permalien ici nous indique que nous exécutons la limace de notre billet de blog juste après la première barre oblique. Bien sûr, il peut être logique que la page d'accueil soit un index de publications et si nous entrons ici et tapez des exemples de publications, elle affichera une publication. Mais tout cela est également personnalisable dans Ghost. Nous pouvons mettre à jour ces itinéraires, ce que nous ferons dans une prochaine vidéo. En fait, je pense que c'est la prochaine vidéo. J'espère que ce n'est pas trop d'informations. Je vais le laisser là et nous allons approfondir les itinéraires et les modèles dans la prochaine vidéo. Mais ce que je voulais démontrer dans cette vidéo, c'est le fonctionnement de l'administrateur. C'est assez simple une fois que vous avez la tête autour. Nous ne faisons que gérer une collection de messages. Nous avons quelques pages sur le côté, et nous classons nos publications par tags et auteurs. Nous pouvons ajouter des données aux balises et ajouter des données aux auteurs, et nous pouvons également les afficher dans notre thème Ghost. Enfin, nous pouvons personnaliser nos itinéraires à l'aide du fichier routes.yaml, que nous apprendrons dans la vidéo suivante. Je vous verrai sur le prochain. 6. Structure du thème et le modèle par défaut: Dans cette leçon, nous allons approfondir la structure du thème et parler des différents modèles qui composent votre thème Ghost. Nous allons approfondir ce diagramme ici, et si nous avons un certain temps, nous allons aller plus loin dans le routage avancé. Mais il y a beaucoup de détails ici. Commençons donc ici par la structure du thème. Maintenant, pour expliquer ce diagramme, ce que j'ai à gauche, ce sont les itinéraires. Ainsi, où que vous accédiez à la page d'accueil ou à une page de blog , ou à une publication, vous finirez par défaut, si nous allons ici, au fichier index.hbs ou au fichier post.hbs. Je veux que vous ignorez tous ces modèles gris pour le moment et comprenez que si tout ce que vous avez dans votre thème Ghost est un index.hbs et un post .hbs, et bien sûr, un hbs par défaut optionnel, que nous couvrirons dans une seconde. Peu importe l'itinéraire vers lequel vous allez, vous vous retrouverez toujours sur l'un de ces modèles. Désormais, ces modèles situés entre le nom de l'itinéraire et ces modèles par défaut sont tous des modèles facultatifs. ces modèles optionnels vous permettent de personnaliser ce qui apparaît sur des itinéraires plus spécifiques. Par exemple, si nous ne voulions pas que notre page d'index soit sur la page d'accueil et l'une des pages spécifiques sur l'itinéraire, nous ne pouvons pas définir cela en utilisant home.hbs. C'est probablement l'exemple le plus simple de l'ensemble du diagramme. Si nous allons sur la page d'accueil et que nous n'avons pas de home.hbs, nous allons indexer par défaut. Si nous le faisons, nous devons également mettre à jour nos itinéraires. Je vais vous le montrer dans une seconde. Mais en descendant plus loin, si nous passons à l'exemple suivant, à la prochaine route, si nous examinons un itinéraire d'index, essentiellement comme regarder le blog en général ou une vue filtrée de la collection globale. Disons simplement, par exemple, que nous examinons tous ces articles de blog filtrés par un auteur particulier. S'il existe un modèle appelé auteur de cette offre .hbs, alors ce modèle sera chargé avant ces modèles. Par défaut, si nous accédons à une page d'index où que nous filtrions par auteur ou par balise, elle sera placée dans index.hbs. Mais si, par exemple, nous filtrons par un auteur donné et que nous avons un fichier auteur .hbs , le code de ce fichier auteur.hbs sera servi. Mais, par exemple, nous examinons l'utilisateur Christopher, qui est l'un de mes utilisateurs sur mon site Ghost en ce moment, c'est la limace pour mon utilisateur. Si j'ai un modèle appelé author-christopher.hbs, il sera chargé avant le fichier auteur.hbs et avant le fichier index.hbs. J'espère que ce diagramme commence à avoir un peu plus de sens ici, mais je vais vous montrer comment cela fonctionne réellement à l'intérieur du thème Ghost dans une seconde. Donc, en suivant cette même logique, vous pouvez voir si nous filtrons par une certaine balise. Par défaut, nous obtiendrons le modèle index.hbs à moins que nous ayons notre modèle tag.hbs. Et si nous filtrons par une balise donnée et que nous avons défini un modèle personnalisé pour cette balise spécifique, il servira ce modèle spécifique. En direction de ces itinéraires pour des publications et des pages individuelles, si nous accédons à une page et qu'il n'y a pas de page.hbs, aucun modèle personnalisé n'est défini sur la page et aucun modèle personnalisé spécifiquement pour cette page, nous allons le faire. poste de chargement, mais seulement si aucun de ces trois n'existe. Il y a beaucoup d'options ici pour la page, nous pouvons avoir un modèle page.hbs, nous pouvons avoir un modèle personnalisé mais qui peut s'appliquer à la fois aux publications et aux pages, et je vais vous montrer comment vous le faites en seulement une seconde. Ou nous pouvons avoir un modèle de page qui se rapporte à une page très spécifique et qui sera chargé avant tout. Il s'agit donc d'une compréhension étape par étape de la signification de ces lignes et colonnes. Allons en fait mettre cela en pratique à l'intérieur de notre thème Ghost. Donc tout d'abord, ce que je veux faire, c'est définir un fichier .hbs par défaut. Et ce que cela fait, c'est contenir un code d'emballage qui contourne n'importe quel modèle servi ici. C'est pourquoi je l'ai placé en haut. Cela signifie que default.hbs s'enroulera autour de n'importe quel modèle servi. Et c'est pratique pour des choses comme les en-têtes et les pieds de page, qui seront identiques sur chaque page. En revenant à notre code, je vais créer un fichier .hbs par défaut. Dans notre fichier .hbs par défaut, nous allons charger du contenu HTML de la plaque de cuisson ici. Je vais le mettre dans la balise doctype. Démarrez la balise HTML, en définissant Lang, et c'est notre premier petit peu de code de guidon, va approfondir le guidon et comment utiliser tous les assistants dans une vidéo ultérieure. Mais pour l'instant, j'espère que cela ne nécessite pas trop d'explications. Je vais juste jeter ça, puis je vais démarrer mon étiquette principale, nous aurons besoin d'un titre pour notre document, et je vais également définir une valeur dynamique pour cela. Quel que soit le méta-titre de la page, nous y mettrons les jeux de caractères, utf-8, définirons le champ Meta de la fenêtre ici. Encore une fois, il s'agit de tout le contenu de la chaudière, donc ce sont les choses que vous feriez sur n'importe quel site Web. Je ne vais donc pas aller trop loin là-dessus pour le moment. Ensuite, je vais mettre une étiquette spéciale pour insérer une partie du code de tête qui vient directement de l'administrateur Ghost, qui n'est que la tête de Ghost. dessous, ce que je vais faire, c'est créer un en-tête puis nous commencerons à voir cet en-tête apparaître sur chaque page. Donc, tout d'abord, j'ai dû ouvrir une balise de corps, puis créer un en-tête avec la classe d'en-tête. Débarrasse-toi de ça. Ensuite, je vais apporter ici une structure et un CSS que j'ai déjà créés. Je vais apporter des classes HTML ou CSS que j'ai déjà déterminées. Ce n'est pas une classe CSS, donc je vais copier et coller du CSS, juste pour le rendre agréable. C'est toujours mieux quand votre site Web est beau. Ensuite, je vais ajouter le logo d'en-tête ici, qui s'il y a un jeu d'images, donc si le logo du site, en mettant un autre, s'il y a un logo de site, chargeons celui-ci là-dedans. Pour ceux d'entre vous qui se demandent le symbole at indique qu'il s'agit d'un objet global. Mais encore une fois, nous en apprendrons plus sur le guidon dans une vidéo ultérieure. S'il n'y a pas de logo de site inclus sur le site Web, ce que nous allons faire, c'est afficher le titre du site. Ensuite, en dessous, nous allons créer une navigation d'en-tête, c'est mettre un assistant très pratique de Ghost qui n'est que la balise de navigation qui va générer notre navigation avec une structure HTML par défaut. Et puis après l'en-tête, ce que je vais faire est d'introduire le contenu principal à travers cette balise principale ici et d'utiliser cette balise spéciale ici avec trois accolades bouclées de chaque côté et y mettre le corps du mot-clé. Maintenant, ce que cela va faire pour chaque modèle qui inclut le fichier default.hbs va charger le contenu de ce modèle à l'intérieur de cette balise de corps ici. Il y a une autre étape que nous devons faire pour que cela se charge à la fois sur la publication et l'index, c'est-à-dire placer une balise spéciale en haut de ces modèles qui ressemble à ceci. Cela ressemble un peu à une étiquette partielle qui vous verra dans une seconde, mais elle a ce point d'exclamation. Il s'agit donc d'une balise spéciale qui indique à Ghost de charger notre modèle par défaut autour de ce modèle. Comme je l'ai déjà mentionné, je vais simplement copier et coller le CSS parce que je ne veux pas passer trop de temps dans cette classe à créer du CSS alors que nous ne sommes pas là pour apprendre cela. Donc, ce que je vais faire, c'est que j'ai un dossier de CSS ici, je vais aller dans mes ressources et le coller. Et comme vous pouvez le voir, j'utilise Bootstrap, qui est un framework CSS, vous pouvez le trouver sur getbootstrap.com. J'utilise la version 5.1.1 et ensuite j'ai un fichier CSS personnalisé avant cela. Nous n'allons donc pas parler de CSS dans cette classe, mais avoir ce CSS là-bas rendra notre projet beaucoup plus beau. Ce que nous allons devoir faire maintenant pour voir ces modifications c'est parce que nous avons ajouté un nouveau modèle, nous devons redémarrer notre instance Ghost. Je vais donc le faire maintenant. Exécutez Ghost, redémarrez, puis une fois cela fait, nous pouvons revenir à notre navigateur ici, charger un exemple de publication, et nous devrions nous attendre à voir le code par défaut. Je pense que j'ai fait une faute de frappe ici, je pense que ça doit être un espace là-bas. Excuses pour cela, rafraîchissons encore Ghost. Et puis en revenant à cet article, vous pouvez voir que notre navigation et le titre de notre site sont maintenant affichés. Et ce sera la même chose si nous passons à notre modèle d'index. Il y a une autre étape ici que j'ai oubliée pour faire entrer ce CSS. Et c'est d'aller dans notre default.hbs et d'ajouter une balise de lien pour intégrer ce CSS dans notre projet. Et nous allons relier rel style href égal. Et ici, ce que nous allons faire, c'est utiliser une aide. Nous allons utiliser l'assistant de ressources, qui va extraire le CSS des deux Bootstrap. Donnez-lui un nom de fichier ici. Cet assistant va chercher dans le dossier de ressources pour ce fichier particulier. Donc, si votre CSS est imbriqué dans un dossier CSS, il vous suffit de l'inclure, mais sinon, il s'étend au dossier de ressources. Je vais juste copier et coller cela pour gagner du temps, puis changer cela en main.css. Rafraîchissez-vous ici, et vous pouvez voir que notre en-tête est plus joliment formaté maintenant. Donc, si je vais à Home, nous obtenons notre modèle d'index. Si je vais à la publication d'exemple, nous avons toujours l'en-tête, nous obtenons toujours tout ce code mais dans le contenu principal, nous avons un titre différent. Donc, si je l'inspecte dans nos DevTools Chrome, vous verrez que nous chargeons la publication, qui est le contenu à l'intérieur du modèle de publication, à l'intérieur de la balise principale. Si je rentre chez moi, vous pouvez voir la même chose à nouveau, nous exécutons l'index à l'intérieur de main et cela est cohérent avec ce que nous avons ici. Donc tout ce qui est au-dessus de main, nous avons l'en-tête , nous avons notre tête HTML ici et cela va se charger sur chaque page parce que nous utilisons default.hbs. On dirait que nous avons passé beaucoup de temps sur ce fichier .hbs par défaut. Ce que je pourrais faire, c'est que je pourrais l'appeler ici pour cette vidéo, et dans la leçon suivante, nous commencerons à construire d'autres modèles que nous voyons dans notre diagramme ici. Nous allons créer un fichier home.hbs et certains de ces autres modèles. 7. Modèles facultatifs et routage de base: Dans la dernière vidéo, nous avons ajouté un fichier .hbs par défaut à notre thème Ghost, puis nous l'avons inclus dans notre publication dans le modèle d'index. Dans cette leçon, nous allons examiner les modèles facultatifs supplémentaires que nous pouvons utiliser pour remplacer le contenu dans index.hbs et post.hbs pour certains itinéraires. Le plus évident est la page d'accueil, et c'est celle que nous allons faire en premier. En fait, nous devons apporter une modification à notre fichier d'itinéraires, mais un changement très mineur. Il existe en fait une partie de la documentation Ghost qui vous montre comment procéder dans le cadre d'autres exemples de routage. Vous pouvez accéder à Thèmes, Routage, et nous avons ici notre configuration de base. Si nous faisons défiler vers le bas, nous avons sous la rubrique en utilisant une page d'accueil personnalisée, nous pouvons modifier notre configuration pour cela. Nous pouvons déplacer notre collection d'index hors de notre route racine et la déplacer sur le blog. Nous pouvons imbriquer les limaces de nos articles de blog dans le blog et donc nous pouvons configurer notre fichier home.hbs pour qu'il s'exécute sur la route racine. Allons-y et faisons-le maintenant. Allons d'abord dans nos itinéraires et changeons cela en blog, limace, puis blogue. Assurez-vous que vous avez la barre oblique des deux côtés, puis nous allons définir un itinéraire spécifique pour l'itinéraire racine et nous allons charger le modèle d'accueil. Maintenant, nous allons devoir créer ce modèle de maison, donc à l'intérieur je vais écrire home.hbs et comme je l'ai fait avec ces autres modèles, nous ne passerons pas beaucoup de temps à les coder dans cette leçon, nous allons arriver à dans une vidéo ultérieure. Mais je veux simplement vous montrer comment fonctionnent les itinéraires et les différents modèles servis sur différents itinéraires. Je vais juste faire la même chose que j'ai fait avant et mettre le h1 là-dedans et j'y aurai également la balise par défaut, donc il charge l'en-tête. Maintenant que nous avons créé le nouveau modèle, nous devons redémarrer notre instance Ghost, donc je vais aller ici et lancer à nouveau le redémarrage de Ghost. C'est quelque chose que nous devrons faire chaque fois que nous créerons ou supprimons un fichier dans notre thème Ghost. Maintenant, si nous revenons sur notre site Web et que nous allons dans le répertoire racine, appuyez sur Entrée, vous verrez que nous sommes maintenant sur le modèle d'accueil. Si je vais sur le blog et que vous pouvez voir que nous exécutons le modèle d'index et que je vais publier un exemple de blog, vous verrez que nous exécutons le modèle de publication. Maintenant, comme nous le voyons dans le diagramme, si nous n'avons pas de modèle de maison, nous allons exécuter index.hbs sur la route de la page d'accueil, mais si nous le faisons, cela remplacera le modèle index.hbs. En remontant à la prochaine route, nous allons charger le modèle d'index par défaut sur l'itinéraire du blog. Encore une fois, comme nous l'avons vu, nous l'avons déplacé dans nos itinéraires. fichier YAML doit être un blog plutôt que la route racine, mais ici, que nous filtrions par une certaine taxonomie ou non, nous obtiendrons le même itinéraire. Comme nous pouvons le voir dans notre fichier d'itinéraires, si j'y retourne ici, nous avons ces taxonomies ici, ce qui nous permet de filtrer l'index via des balises et des auteurs. Encore une fois, n'oubliez pas que nous avons déjà créé cet exemple de balise. Si je vais ici et que je fais un tag, exemple tag, vous verrez que nous obtenons le même modèle, nous obtenons le modèle d'index. Si j'entre ici et que j'utilise une autre taxinomie et que je pars, l'auteur Christopher, qui pour clarifier est ma limace ici dans mon utilisateur, donc vous pouvez voir l'auteur Christopher, c'est l'URL à laquelle vous allez, pour filtrer les publications par auteur. Nous verrons cela lorsque nous parlerons de la boucle d'index lorsque nous parlerons de contextes et que nous nous aidons plus tard dans la classe. Mais ce que je fais valoir ici, c'est que nous n' avons pas configuré de modèle d'auteur ou de balise, nous allons toujours utiliser le modèle d'index par défaut. Il servira toujours le modèle d'index si nous n'avons aucune de ces configurations. Configurons maintenant certains de ces modèles et voyons cela se produire en temps réel. Ce que je vais faire, c'est revenir à notre éditeur de code et à l'intérieur de notre dossier thème Casper et je vais créer un tag .hbs et créer un fichier d'auteur .hbs. Dans notre tag.hbs, je vais copier le même format que tous ces autres modèles et je vais simplement mettre la balise ici pour que nous sachions que nous sommes dans le modèle de balise et le modèle auteur ici. Redémarrez notre instance Ghost car nous avons ajouté de nouveaux fichiers, puis si je retourne sur notre site Web ici et que nous sommes sur la route Auteur Christopher ici, si je clique sur Entrée, vous verrez que le mot ici change en auteur, ce qui signifie que nous sommes maintenant exécuter le modèle author.hbs maintenant au lieu du modèle index.hbs. Bien sûr, cela ne le remplace pas pour l'itinéraire du blog. Nous avons toujours le modèle d'index standard pour celui-ci, mais si nous filtrons par auteur, nous verrons le modèle d' auteur et si nous filtrons par une certaine balise telle que l'exemple de balise, nous allons charger le modèle de balise. Cela devrait être assez clair maintenant. Nous pouvons également créer un modèle pour un auteur très spécifique ou une balise très spécifique. Je vais le faire maintenant. Nous avons ici une étiquette appelée « Commencer ». veux juste vous montrer ceci pour que je puisse vous montrer qu'il y a une différence. heure actuelle, les deux balises vont charger ce modèle de balise. Mais que se passe-t-il si nous voulons exécuter un code différent en fonction d'une balise spécifique ou d'un auteur spécifique ? Eh bien, ce que nous pouvons faire dans ce cas, c'est créer un modèle d'auteur personnalisé pour celui-ci. Je pense que j'ai cliqué sur un nouveau fichier dans le mauvais fichier. dois le faire dans notre dossier thème Casper et ce que je vais faire est de créer un modèle avec un tiret d'auteur suivi de la limace de l'auteur, donc pour moi, ce sera Christopher, hbs et ici je vais copier ce code, Allez ici et je vais juste dire le modèle d'auteur Christopher. Ensuite, je vais faire la même chose pour tag, je vais aller New File, tag dash suivi de la limace de la balise, qui est un exemple tag, suivi de point hbs et faire la même chose qu'avant ici , exemple de modèle de balise. Maintenant, encore une fois, parce que nous avons créé de nouveaux modèles, je vais redémarrer et ensuite commencer parce que nous n'avons pas remplacé ce modèle, il va toujours utiliser le modèle de balise. Mais si nous passons ici à l'exemple de balise, vous verrez que nous exécutons maintenant un modèle différent du modèle de balise standard. Si je passe ici à l'auteur Christopher, vous verrez que nous exécutons le modèle d'auteur Christopher alors que si nous allons à l'auteur Ghost, qui exécute le modèle d'auteur standard. Voici ce que vous voyez, c'est la structure du thème en action. Je sais qu'il ne se passe pas grand-chose ici parce qu'il n'y a pas de contenu. Nous y reviendrons dans une vidéo ultérieure. Mais cela devrait commencer à renforcer ce qui se passe dans ce diagramme ici. Nous avons nos fichiers principaux sur index.hbs et post.hbs, puis nous avons tous ces modèles supplémentaires que nous pouvons utiliser pour personnaliser certains itinéraires. Je vais maintenant aller plus loin dans le diagramme et regarder les modèles supplémentaires qui se trouvent au-dessus du post.hbs. Comme nous le voyons ici pour la page, si nous ne définissons aucun modèle spécifique pour la page, il sera simplement par défaut de publier, ce qui sera le même modèle qu'un post. Mais si nous définissons un fichier page.hbs, cela remplacera ce qui s'affiche sur les publications. Ce que je vais faire, c'est que je vais passer par là. Je vais revenir dans notre thème, fermons certains de ces fichiers, et je vais ajouter dans une page .hbs. Encore une fois, ce que je vais faire, c'est remplacer cela par « C'est une page », puis redémarrons l'instance Ghost. Revenons maintenant à notre site Web, si nous sommes sur un article spécifique, qui se souvient que nous avons changé l'itinéraire en blog, puis suivi de la limace de post. Nous allons être sur un post, mais si nous allons sur une page, il va dire : « C'est une page ». Le modèle suivant qui remplacera ce modèle de page et le modèle de publication est un modèle personnalisé. En revenant au diagramme, nous créons un modèle personnalisé en écrivant tiret personnalisé suivi d'un nom arbitraire que nous décidons. La façon dont nous définissons cela sur n'importe quel article ou page en particulier se trouve dans l'administrateur. Je vais vous montrer ça maintenant. Revenons à notre thème ici. Créons une personnalisation. Ce que je vais faire, vous verrez plus tard dans la classe, c'est d'avoir une mise en page alternative pour les pages et les publications qui ont un en-tête d'image. Je vais appeler ça un « custom-header.hbs ». Pour l'instant, comme nous n'entrons pas dans le code, nous entrons simplement dans les concepts d'itinéraires et de modèles, je vais appeler ce jeu de modèles personnalisés dans Ghost Admin. Encore une fois, nous avons créé un nouveau fichier Nous allons donc devoir redémarrer notre serveur. Encore une fois, cela ne devrait pas prendre trop de temps si nous l'exécutons localement, ce que nous sommes, et ensuite je vais aller dans notre administrateur ici et disons simplement celui-ci avant de poster l'exemple. Je vais cliquer là-dessus. Je vais me diriger vers les paramètres de publication ici. Faites défiler vers le bas, et je pense que je dois me rafraîchir ici. Allons-y encore, faites défiler vers le bas. Vous pouvez voir que nous avons maintenant un champ supplémentaire appelé modèle, et nous avons ce menu déroulant. Nous pouvons choisir le modèle par défaut ou celui-ci, dont le nom sera égal à ce que nous avons mis après le tiret personnalisé dans le nom du modèle. Nous l'avons appelé « en-tête personnalisé ». Je vais cliquer sur ce modèle ici pour l'en-tête, « Mettre à jour », puis lorsque nous verrons ce post, vous verrez qu'il est écrit, Modèle personnalisé, Définir dans Ghost Admin. Cela va être différent des autres posts comme exemple-post, qui utilise toujours le modèle de publication, et la bonne chose à propos de ce modèle est que nous pouvons également le définir sur une page. Tout ce que nous avons à faire, c'est d'aller sur notre page. Disons que c'est une contribution, accédez à nos paramètres de page et que nous pouvons également définir ce modèle sur un autre modèle. Nous sommes presque parcourus par le diagramme ici. Nous avons juste page-slug, post-slug, et tout comme nous l'avons fait ici pour les scories d'auteur et les balises, nous pouvons utiliser un modèle personnalisé pour une page très spécifique ou un modèle personnalisé pour un post très spécifique. Pour des raisons d'exhaustivité, examinons cela aussi, même si c'est exactement le même concept que les autres. Je vais aller ici et créer, faisons-le pour la page À propos. Le sujet de page-slug est à propos, donc nous ne faisons que page-about, puis c'est le modèle spécifique pour la page à propos. Alors faisons-le aussi pour la poste. Faisons un exemple de publication. Nous allons créer un modèle spécifique pour un post post exemple. Il s'agit du modèle spécifiquement pour exemple post. Encore une fois, redémarrez notre serveur Ghost car nous avons créé de nouveaux fichiers. , nous n'aurons pas besoin de le faire autant dans les vidéos ultérieures, car nous ne faisons que créer tous nos fichiers maintenant. Mais une fois que nous commencerons à créer du code ici, les fichiers auront déjà été créés et, par conséquent, nous n'aurons pas à redémarrer notre serveur à chaque fois pour que vous le sachiez. Si vous en avez marre de redémarrer. Revenons à notre site Web Ghost maintenant, si nous nous dirigeons vers la page À propos, vous pouvez voir que nous exécutons maintenant le modèle spécifiquement pour la page À propos. Si je vais à l'exemple de billet de blog, vous pouvez voir que nous exécutons le modèle spécifiquement par exemple post. Pour simplement différencier cela de tout le reste, si nous allons sur le blog de bienvenue, vous verrez que nous exécutons le modèle personnalisé, et si nous allons sur, disons, un autre blog qui n'a pas de modèle personnalisé dessus ou a un modèle spécifique à un post dessus. Allons simplement à celui-ci, design. Vous pouvez voir qu'il utilise le modèle de publication standard. Il sera simplement posté par défaut au .hbs s'il n'utilise pas l'un des autres modèles optionnels qui se trouvent au-dessus de post.hbs. Cela couvre l'ensemble du diagramme ici. Il existe d'autres itinéraires et modèles, mais il s'agit des principaux itinéraires et modèles. Si vous souhaitez en savoir plus sur les autres itinéraires, vous pouvez consulter la documentation. Ce n'est pas trop compliqué. Si nous nous dirigeons vers la structure, vous verrez que nous en avons d'autres ici, tels que private.hbs et error.hbs. Sans oublier que nous avons aussi l'amp.hbs. Ce sont tous des modèles supplémentaires qui ne sont pas essentiels à comprendre en termes de structure. Alors que notre guide ici, sont ceux qui sont importants à comprendre car ils se trouvent au-dessus de vos modèles principaux, qui sont index.hbs et post.hbs. Je pense que c'était un autre long et que nous n'avons pas encore atteint les itinéraires, donc nous allons entrer dans les itinéraires dans la prochaine vidéo. Mais cela devrait examiner la signification de ce diagramme et comment nous pouvons commencer à personnaliser différents itinéraires sur notre thème Ghost à l'aide de différents modèles. 8. Routage personnalisé: Dans cette vidéo, nous allons approfondir le routage. Dans la dernière vidéo, nous avons regardé notre fichier routes.yaml, qui se trouve dans notre dossier de paramètres ici, et nous avons apporté une modification. Nous avons déplacé notre modèle d'index ou notre blog, pourriez-vous dire, hors de notre itinéraire et l'avons remplacé par notre modèle de maison. Mais il y a beaucoup d'autres choses que nous pouvons faire dans les itinéraires. Nous n'aborderons pas tous les scénarios d'itinéraires de cette vidéo, car je ne pense pas que ce soit particulièrement pratique. Mais pour commencer, examinons la documentation. Si jamais vous êtes coincé sur ce qu'il faut faire avec les itinéraires, vous pouvez consulter la documentation ici ou si vous préférez une explication de ma part, vous pouvez consulter mon article dans lequel j'approfondis la configuration et la mise à jour des itinéraires. Nous allons dans les itinéraires de base, les itinéraires de base avec des données dynamiques, les itinéraires de base avec formatage personnalisé , les collections, le filtrage des collections, la liste continue. J'ai organisé mon guide d'une manière qui me semble plus logique d'une compréhension ascendante. Ensuite, je pense que ces gars sont finis dans la documentation, mais des coups différents pour différentes personnes, selon ce qui vous aide à mieux le comprendre. Mais dans cette vidéo, ce que nous allons faire, c'est que je vais vous montrer quelques exemples des choses dont ils parlent ici. Cela va vous aider à configurer à peu près n'importe quel type d'itinéraire que vous aimeriez sur votre site Ghost. Si nous faisons défiler vers le bas, nous pouvons voir la configuration de base, qui est celle que nous avions auparavant, c'est-à-dire qu'un seul index est servi sur l'itinéraire et nos itinéraires individuels sont desservis sur cette route également via leur limace particulière. Ensuite, vous avez également les taxonomies. Si vous souhaitez filtrer par une certaine balise, vous pouvez utiliser cette structure ici ou cette structure. Nous avons vu tout cela dans la dernière vidéo. Mais si nous faisons défiler vers le bas, nous pouvons utiliser des itinéraires plus dynamiques et des itinéraires personnalisés. On y va. Routage de base. Ce que nous pouvons faire, c'est que nous pouvons littéralement configurer notre propre itinéraire , puis définir un modèle qui apparaîtra lorsque nous allons sur cet itinéraire. Faisons ça maintenant. Permettez-moi de passer à mon éditeur de code. Laissez-moi simplement créer quelque chose appelé page spéciale. Allons ici, et j'appellerai ça une page spéciale. Ce nom de fichier ne suit aucune de nos conventions antérieures, il ne sera donc pas automatiquement chargé dans certaines situations. Nous n'utilisons que cela pour peupler un itinéraire. Encore une fois, je ne m'embêterai même pas avec la balise par défaut cette fois, j'appellerai simplement cette page spéciale. En fait, nous voudrions peut-être créer un modèle dans lequel nous n' avons pas l'enveloppe par défaut qui existe. est peut-être cette page spéciale. Ensuite, dans mon fichier d'itinéraires, je vais simplement ajouter cela à nos itinéraires ici avec une barre oblique de chaque côté. Je vais juste créer un itinéraire, une page spéciale, puis je vais mettre le nom du modèle sans .hbs. Je vais cliquer sur Save. Parce que nous avons apporté des modifications à notre fichier d'itinéraires, redémarrez notre serveur Ghost. Maintenant, si je retourne sur mon site Web ici, passons-le à là, et passons à cette page spéciale itinéraires. Vous pouvez voir que nous sommes sur ce modèle de page spécial, qui ne contient aucun de nos codes de plaque de cuisson. Ce n'est pas l'exemple le plus pratique, mais montre simplement que nous pouvons créer nos propres modèles personnalisés et les charger sur des itinéraires personnalisés. Une extension est celle des chaînes personnalisées, que j'aurai accès dans une seconde parce qu'elles sont un peu plus compliquées. Ce que je veux faire, c'est vous montrer comment vous pouvez diviser votre collection de messages principaux en différentes « collections » ici parce que je pense que le libellé ici de Ghost peut être un peu déroutant. n'y a pas réellement plusieurs collections du point de vue de votre administrateur. Ce que je veux dire par là, c'est que si nous allons dans l'administrateur en mettant fantôme après le nom de notre site, vous pouvez voir qu'il n'y a qu'une seule collection de publications ici. Il n'y a pas plusieurs collections. Mais ce que nous pouvons faire, c'est simuler différentes collections via notre routage et nous pouvons les diviser via des balises. Jetons un coup d'œil à la documentation, ce que je veux dire par là, si nous faisons défiler jusqu'aux collections, nous avons la collection par défaut que nous avions auparavant, nous utilisons une page d'accueil personnalisée que nous avons configurée dans la dernière vidéo, puis nous pouvons également créer deux « collections » différentes pour quelque chose comme nous avions peut-être un blog et un podcast hébergés sur ce même site Web, puis nous pourrions les diviser en utilisant cette syntaxe ici. Allons de l'avant et faisons cela maintenant uniquement à des fins de démonstration. Allons dans nos publications ici et disons que nous commençons un podcast. Je vais créer un nouvel épisode, Podcast Episode 1, puis ici, je vais lui donner la balise principale des podcasts. Bien sûr, pour que cela fonctionne, nous allons devoir passer en revue tous ces autres articles publiés et changer la balise principale en blog. Je vais le déplacer au premier plan pour en faire la balise principale. Cliquez sur Mise à jour là-dessus. Je vais juste passer rapidement ici et le faire sur chaque poste. Je ne vous ennuierai pas en vous laissant me regarder le faire en temps réel. À moins d'en avoir manqué un, nous devrions avoir tous nos articles de blog avec Blog comme balise principale. Je pense que nous pouvons voir ici, dans le résumé, que c'est vrai. Ce podcast épisode 1 est un podcast. Disons simplement que nous ne voulons pas afficher le podcast dans le même flux que les blogs, et que nous ne voulons pas afficher les blogs dans le même domaine que les podcasts. C'est logique, non ? Ce que nous pouvons faire, c'est créer ou simuler ces différentes collections. Si je vais dans mon fichier routes.yaml, ce que je peux faire ici est d'ajouter un filtre afin qu'il n'affiche que les articles qui ont été marqués avec un blog. Si nous revenons à la documentation ici, nous avons l'exemple ici. C'est tout ce que nous devons ajouter. Comme le montre l'exemple, si nous avions un modèle personnalisé uniquement pour le blog et un modèle personnalisé uniquement pour le podcast, c'est là que nous le mettions ici également, mais nous pouvons utiliser le même modèle d'index pour les deux. Ce n'est pas un problème. Ce que je vais faire, c'est copier la structure de notre podcast, puis remplacer toutes les instances du blog par des podcasts. Nous simulons maintenant deux collections différentes sur notre site Web et nous le faisons via la balise principale. Redémarrons notre instance Ghost afin que nous puissions voir ces changements sur notre site Web. En revenant sur notre site Web ici, une page spéciale fonctionne toujours. C'est génial. Si nous allons sur Blog maintenant, nous verrons, et c'est quelque chose pour lequel nous devons réellement avoir une boucle de publication. Je vais passer un peu plus loin, juste pour que vous puissiez voir ça fonctionne réellement. J'allais attendre que nous écrivions du code, mais je vais devoir écrire un peu de code pour que vous puissiez voir ce qui se passe ici. Je vais juste créer pour chaque boucle afin de pouvoir vous montrer quels messages sont renvoyés sur ce modèle. Je vais juste écrire un titre et formatons-le comme une liste. Tout ce code fait consiste à parcourir tous les titres de publication diffusés sur cet itinéraire particulier. Si je retourne ici, rafraîchissez-vous. Vous verrez sur le modèle de blog, nous pouvons voir tous les titres des articles qui ont la balise principale du blog. Mais si nous allons maintenant aux podcasts, vous verrez que nous n'avons que le titre de l'épisode du podcast. Comme vous pouvez le voir ici, nous utilisons toujours le même modèle, l'index des mots apparaît sur les deux, mais ce que nous faisons est de simuler deux collections différentes via notre fichier routes.yaml. Pour être clair, si nous entrons dans notre administrateur, ils vivront tous dans la même zone. Il n'y a qu'une seule collection ici, contrairement aux autres plateformes de publication. C'est quelque chose d'important à noter. C'est pourquoi j'aime utiliser le mot simuler différentes collections car sur le back-end, il n'y a qu'une seule collection et nous ne faisons que simuler différentes en fonction de la balise principale. Je pense que les taxonomies sont assez faciles à comprendre et il n'y a pas beaucoup d'options pour les modifier. Nous pouvons nous débarrasser complètement des taxonomies ou nous pouvons changer ces mots ici. Mais à part cela, il n'y a pas grand-chose que vous pouvez changer avec les taxonomies. Le troisième type de parcours que je vais parcourir dans cette vidéo avant de passer à autre chose est celui des chaînes. canaux, comme il est indiqué dans la documentation, si nous faisons défiler vers le bas, au-delà des taxonomies, sont un flux personnalisé de contenu paginé correspondant à un filtre spécifique. La meilleure façon d'y penser est un ensemble de résultats de recherche permanents. Nous pouvons supprimer un filtre dans une partie de notre collection et créer un itinéraire permettant d'afficher cette tranche de contenu filtrée. Ici, dans la documentation, vous pouvez voir que c'est exactement la même chose qu'un itinéraire personnalisé, sauf que nous allons placer le canal du contrôleur en dessous, puis nous allons définir le filtre. Allons-y et faisons-le maintenant. N'oubliez pas que nous avons créé notre propre tag et notre propre auteur, créons une chaîne personnalisée. Je vais juste appeler ça un canal personnalisé. Mais vous pouvez faire cette route comme vous voulez, évidemment. Ensuite, je vais écrire le canal du contrôleur. Cela va dire à Ghost qu'il s'agit d'un canal et non d'un itinéraire personnalisé normal. Ensuite, ce que je vais faire, c'est ajouter le filtre. Ce sera une balise, doit être un exemple de balise, puis nous ajoutons le plus ici pour ajouter une autre condition avec l'auteur principal, qui est exactement comme la balise principale de Christopher. Nous pouvons également personnaliser cela si nous le voulons. Nous pourrions ajouter un autre modèle. Nous pourrions créer un modèle d'index secondaire si nous ne voulions pas qu'il soit par défaut sur le modèle d'index normal ici. Mais je pense que ça devrait aller bien. Ensuite, si je me rafraîchis ici parce que nous devons actualiser chaque fois que nous changeons le fichier routes.yaml, et nous allons sur ces itinéraires dans notre site Web, canal personnalisé. Maintenant, vous pouvez voir que nous avons juste un exemple de post car c'est le seul article qui a été marqué avec une balise exemple et qui est par l'auteur principal de Christopher. En fait, il n'y a qu'un seul article de l'auteur de Christopher et qui a été étiqueté exemple tag. Mais vous comprenez le point. Il filtre toutes nos publications et crée un itinéraire spécifique pour cet ensemble de contenu filtré. C'est vraiment important car si vous avez une publication volumineuse et que vous mettez beaucoup de contenu ici, vous voudrez l'afficher de différentes manières. La façon dont vous organisez votre contenu, évidemment principalement via des balises, vous pouvez également filtrer via l'auteur, mais les balises constituent la base de votre organisation. Grâce aux itinéraires, nous pouvons utiliser ces balises, utiliser ces auteurs, créer des canaux personnalisés et des collections personnalisées. Il y a quelques autres exemples dont je pourrais parler ici, mais je pense qu'il serait préférable de les lire. Beaucoup d'entre eux ne s'appliqueront pas à votre situation spécifique, mais les principes fondamentaux ici, les itinéraires personnalisés, les canaux personnalisés, qui est essentiellement un itinéraire personnalisé avec un canal de contrôleur et un filtre, puis diviser votre collection en différentes collections, que j'aime appeler simuler, et utiliser une étiquette particulière ou autre qualité définissante pour diviser la collection en ces différentes collections. J'ai l'impression que c'est ce que vous devez savoir en termes de routage dans Ghost. Comme je l'ai déjà mentionné, je pense que le routage et la structure de gabarits personnalisés dans Ghost sont quelque chose de tout à fait unique à cette plateforme et cela vous offre une grande flexibilité en termes de référencement ou de façon dont vous souhaitez organiser votre contenu. C'est un système vraiment intelligent qui, une fois que vous avez pris la tête, il est très puissant et vous pouvez commencer à personnaliser de nombreuses façons. Encore une fois, si la documentation sur le site officiel n'a pas de sens pour vous, vous pouvez vous référer à mon guide, qui l'explique d'une manière plus logique pour moi. Mais en termes d'apprentissage, certaines personnes aiment apprendre par la documentation, certaines personnes aiment apprendre visuellement, certaines personnes aiment apprendre à travers des guides comme celui-ci, donc tout ce qui vous aide à comprendre les concepts. Comme toujours, si vous ne comprenez rien, vous pouvez toujours poser une question ci-dessous. Mais entre ces deux ressources, vous devriez être en mesure de comprendre le routage personnalisé. Nous allons juste le laisser là et passer à l'écriture du code maintenant. Je vous verrai dans la prochaine vidéo. 9. Codage dans le contexte de publication: Dans les trois leçons précédentes, nous avons configuré notre thème fantôme avec un tas de modèles personnalisés, comme on peut le voir ici. Et nous avons mis à jour notre fichier routes.yaml pour créer nos propres itinéraires personnalisés. Dans cette vidéo, nous allons commencer à coder nos modèles, car évidemment, nous avons simplement mis au minimum ici juste pour illustrer le point des itinéraires et des modèles. De toute évidence, nous ne voulons pas que ce contenu soit le seul contenu affiché sur la page À propos. Il est temps de commencer à introduire une partie du contenu dynamique de notre administrateur fantôme et à l'afficher dans notre thème. Sinon, à quoi bon ? Ce que je vais faire, c'est aller à la documentation et la page sur le contexte est déjà ouverte. Le contexte est également la prochaine section de mon guide. Rappelez-vous les quatre sections des modèles, itinéraires, des contextes et des aides. Le contexte est fondamentalement comme la portée dans le développement de thèmes fantômes. Ce que nous devons savoir, c'est quelles sont les données dont nous disposons dans quels modèles. Comme il est indiqué dans la documentation officielle des fantômes, il existe six contextes différents, et je vais dans chacun d'eux plus en détail dans mon guide ici. Si vous souhaitez voir la liste complète des attributs dans chaque contexte, vous pouvez accéder à la documentation. Mais restons coincés et commençons à coder nos modèles. Au fil du temps, nous allons approfondir la compréhension de ce que ces contextes signifient réellement. Si je me dirige vers mon éditeur de code ici, je vais fermer toutes mes fenêtres ouvertes ici, ou plutôt ouvrir des onglets. Je vais aller dans le modèle index.hbs. Maintenant, comme nous l'avons vu pour que je puisse démontrer les chaînes, j'ai dû mettre dans notre première boucle Foeach. Mais je n'ai pas beaucoup parlé de la façon dont cela fonctionne. Évidemment, sur des modèles comme index ou tout autre modèle d'index personnalisé, nous allons parcourir une boucle de publications. Le premier tag que nous allons voir est celui de Foreach. Ce que cela fait, c'est qu'il parcourt chaque publication qui sera affichée sur l'itinéraire particulier qui consulte ce modèle. Ensuite, dans ce bloc, nous aurons accès à tous les attributs du contexte particulier de ce que nous parcourons en boucle. Dans les thèmes fantômes, la seule fois où nous utilisons réellement une boucle Foeach est parcourir les différents articles de notre collection globale. Ensuite, à l'intérieur de chaque itération de la boucle, nous avons accès à tous les attributs du contexte de publication. Très bien, revenons à la théorie ici et regardons les contextes. Nous pouvons passer au contexte de la publication ici. Si nous faisons défiler vers le bas, nous pouvons voir la liste des attributs de l'objet. Comme vous pouvez le constater, j'ai utilisé Tidal dans cette boucle particulière, mais nous avons accès à l'URL, l'image en vedette. Nous avons accès à toutes ces données à chaque itération de la boucle post. Maintenant, bien sûr, nous avons accès à ces informations sur un modèle de publication ainsi que pour un post individuel, je vais vous montrer comment ouvrir ce contexte très prochainement. Mais pour l'instant, comprenez cela à l'intérieur de cette boucle Foreach pour chaque itération de cette boucle. Ainsi, le contenu de ce bloc, nous avons accès aux contextes de publication. Cela nous permettra d'extraire des données de chaque publication contenue dans notre site Web fantôme. Ce que je vais faire, c'est que je vais créer quelque chose de mieux qu'une simple liste. Ici, saisissons un blog. Vous pouvez voir ici notre liste de billets de blog, mais aucun d'entre eux n'est lié. C'est donc pratiquement inutile. Ce n'est pas très utile pour nous en ce moment. Une chose que je veux faire avant de continuer, je l'ai juste pensé, c'est de me débarrasser de cet épisode de podcast et de supprimer toutes les balises du blog, car nous n'allons pas lancer de blog et de podcast sur ce sujet. site Web. C'était juste à des fins de démonstration. Alors supportez moi pendant que je fais cela, je vais avancer rapidement et je vous rencontrerai après avoir supprimé les tags du blog de tous nos articles. C'est ce qui est fait. La principale raison pour laquelle je voulais nettoyer cela, c'est parce que nous allons afficher la liste des balises sur chaque message individuel. Je ne voulais pas avoir de blogue sur eux. Maintenant que j'ai actualisé la page, vous pouvez voir que nous avons perdu tous nos articles de blog ici. J'ai juste besoin de revenir dans mon fichier routes.yaml et de le remettre à ce qu'il était avant. Je vais enlever le filtre et enlever les effets de cette collection de podcasts. Je vais prendre certains de ces autres itinéraires ici parce que nous n'avons pas besoin de les utiliser. Ce n'était qu'une preuve de concept. Je vais me débarrasser de la page spéciale ici. Supprimez celui-ci. C'est tout ce dont nous avons besoin pour notre thème fantôme particulier. Je vais bien sûr redémarrer notre instance fantôme car nous avons apporté modifications au fichier d'itinéraires et supprimé un fichier de guidon. Si je me rafraîchis ici, vous pouvez voir la liste complète de tous les articles que nous avons sur notre site. Commençons à les construire. Si je ferme le fichier routes.yaml. Ce que je vais faire, c'est commencer à utiliser certains des attributs que nous avons sur l'objet avant-poste et à créer une belle carte postale que nous pouvons ensuite utiliser pour cliquer pour accéder à la page de liste de publication unique. Voici les gars de référence. Si jamais vous êtes perdu des informations que vous pouvez obtenir d'un post particulier, elles sont répertoriées ici dans la documentation fantôme. Mais pour l'instant, je vais commencer à écrire ces articles. Au lieu d'une liste ici, ce que je vais faire, c'est tout d' abord un peu de formatage. Je vais mettre tout cela dans un conteneur de largeur de page afin qu'il ne prolonge pas toute la largeur de la page. À moins que nous ne soyons sur un écran plus petit, bien sûr. Ce que je vais mettre ici, c'est tous des messages. Ensuite, je vais ajouter un peu de description. Vous trouverez ici tous les messages. Très bien, je vais créer un conteneur pour ces publications. Ces noms de classes concernent des classes que j'ai déjà configurées dans un fichier CSS. Si vous vous demandez d'où vient ma prise de décision à ce sujet, c'est pourquoi. Mais pour vous, cela va être différent selon les styles et la structure que vous voulez pour votre propre thème fantôme. Mais pour moi ayant un intérieur à div avec la classe de messages, je suis capable de les formater en ligne. Ensuite, ce que je vais faire à l'intérieur de chaque itération de cette boucle, c'est ouvrir une carte postale, puis lui donner la classe supplémentaire de carte, qui est une classe bootstrap. Nous allons lui donner un bon formatage. Ensuite, je vais ouvrir une étiquette si. Cela nous permet de vérifier d'abord si l'attribut est réellement défini. S'il y a une image en vedette, nous allons exécuter le code à l'intérieur de ce bloc ici. Et si ce n'est pas le cas, je vais mettre une déclaration L, nous allons exécuter le code à l'intérieur de ce bloc. Je souhaite toujours placer l'image pour montrer s'il n'y a pas d'image en vedette. Je vais juste mettre en image SRC. Disons simplement que c'est notre image réservée. Ce site Web via.placeholder.com nous permet de placer une image réservée de toutes les dimensions que nous voulons. Je vais donc mettre cette dimension dans cette dimension car elle correspond aux photos que nous avons déjà notre site fantôme. Ensuite, pour notre affirmation, si vraie, je vais mettre en place, j'aimerais généralement optimiser ces images en fonction de certaines tailles d'écran. Mais pour l'instant, je vais juste lui donner un seul SRC et je vais utiliser l'aide de l'URL de l'image. Nous ne sommes pas encore allés nous aider, mais il existe de petits mots clés qui nous aident à faire quelque chose dans le développement de thèmes fantômes. Ensuite, je vais prendre l'image en vedette. Je vais demander la taille moyenne. Aussi, je vais ajouter une autre condition ici pour l'alt s'il y a un alt. Je vais en ouvrir un autre si ici. Si une image en vedette alt a été définie pour cet article particulier, alors ce que je veux voir, c'est la balise alt. À l'intérieur de la balise alt, je veux mettre la valeur de l'image en vedette alt. Je vais également lui donner un cours de formatage. Je vais lui donner une image de carte postale, qui est une classe que j'ai définie, puis la classe bootstrap de l'image de carte haut. Si nous le voulons, nous pouvons sauver cela et jeter un coup d'œil à ce que nous avons obtenu jusqu'ici. Nous pouvons y retourner et vous pouvez voir que rien ne se passe pour le moment. Nous avons nos cartes postales et on dirait que nous avons peut-être fait une erreur ici sur notre SRC. Mon erreur a été de dire une image en vedette. Ce nom serait plus logique pour moi, mais dans Ghost, c'est juste une image de fond. Je vais le sauvegarder, revenir en arrière, et maintenant vous pouvez voir que les images apparaissent pour chaque article. Continuons à construire notre carte ici. Après l'image présentée, ce que je vais faire, c'est ouvrir une div avec la classe du corps de la carte. Ce que je vais faire, c'est simplement suivre la structure du composant de la carte telle qu'elle est présente dans Bootstrap Version 4 Je crois, pas de 5.1.1. Si vous avez la même version Bootstrap, vous obtiendrez le même résultat. Je vais le faire assez rapidement ici car il s'agit d'une classe HTML et CSS. Je veux juste vous montrer comment nous apportons certaines de ces données dynamiques de Ghost. Nous avons un h5 avec une classe de carte de titre de carte. Je vais imbriquer un lien pour notre URL, puis, bien sûr, y mettre un titre. Ensuite, en dessous de celui-ci, je vais ajouter une balise p avec la classe de texte de la carte et insérer l'extrait de l'article. Maintenant, si nous sauvegardons et actualisons notre page dans notre navigateur, vous pouvez voir que nous avons ces cartes ici avec l'image, le titre et un extrait de la publication. Si je clique sur le titre ici, il m'amènera au modèle de ce post, pour lequel nous n'avons pas encore créé le code. Nous allons nous appuyer sur ce point dans les prochaines vidéos. Mais pour l'instant, codons notre modèle de publication parce que c'est important que nous ayons raison. Nous avons ce modèle alternatif en cours d'exécution. Comme vous pouvez le voir dans le titre que nous avons précédemment configuré, il est indiqué que le paramètre de modèle personnalisé va à admin. Si nous examinons l'exemple de publication, il indique que ce modèle est spécifiquement par exemple post. Je vais naviguer vers le troisième, qui, comme vous pouvez le voir, c'est simplement utiliser le modèle de publication standard. Commençons à coder celui-là aussi. Si je vais dans le fichier post.hbs, en me souvenant des gars, qu'au niveau de base, tout ce dont notre site Web a besoin est un index.hps et un post .hbs. Si vous savez coder ces deux éléments, théoriquement, vous pouvez créer l'ensemble du site Web. Ce que je vais faire, c'est faire comme nous l'avons fait avec l'index, ouvrir un conteneur de page et voici où, au lieu de créer une boucle, ce qui nous donnera accès au contexte d' un nouveau post à l'intérieur de chaque itération de la boucle, ce que nous faisons, c'est que nous accédons à un seul message ici. Ce que nous devons faire pour accéder au contexte de publication, même si nous sommes sur un seul message, c'est ouvrir une balise qui ressemble à ceci, la publication de hachage. C'est très simple. Ensuite, nous fermons avec une barre oblique. Cela nous permet d'accéder au contexte de publication comme nous l'avions fait ici pour chaque publication. Nous pouvons désormais accéder à tous les mêmes attributs dans un seul message. Je retournerai ici et ce que je vais faire, c'est ajouter un code de chauffe-plat. Je vais avoir un en-tête de message. Désolé, je vais revenir en arrière et donner une classe d'en-tête de post, ramener ce h1. Mais maintenant, il va dire que je vais donner à celle-ci une classe de titre de poste. À l'intérieur, nous allons mettre le titre de la publication. Au lieu de mettre un titre statique, un titre codé en dur, nous allons évidemment laisser passer le titre du post lui-même. Ensuite, parce qu'il s'agit d'un billet de blog, nous allons indiquer la date de publication. Je vais mettre cela dans une période et nous utilisons l'aide ici de date pour formater notre publication à la date. Nous avons l'attribut publié à et en utilisant l' assistant de date avec cet attribut ici de format, nous pouvons ensuite définir notre format pour la date. Je vais juste le régler sur quadruple M, double D et quadruple Y. double D et quadruple Y. Nous allons passer à côté de cette section d'en-tête , puis créer une section avec la classe de contenu de publication. Ensuite, ici, ce que je vais faire, c'est insérer le contenu de la publication et cela se fait pour l'attribut content. Je vais cliquer sur Enregistrer là-dessus, rafraîchir la page ici et voilà, nous avons le titre de la publication. Nous avons la date à laquelle l'article a été publié et nous avons tout le contenu qui est automatiquement renseigné dans notre tag ici, publiez le contenu. Vous pouvez bien sûr vérifier cela à l'aide de vos DevTools. Bien sûr, je recommande Google Chrome, mais ce que vous préférez utiliser. Vous pouvez voir ici tout le code que nous avons configuré dans le modèle, mais avec les valeurs dynamiques qui arrivent à l'intérieur de ce balisage. Si je retourne sur le blog et que je clique sur le prochain article, vous verrez que c'est le même modèle mais avec un contenu différent. Il y a un peu de nettoyage qui doit se produire ici avec les différents liens et autres choses. Mais vous comprenez le concept, nous mettons en revue le contenu dans ce modèle. Nous passons en revue le titre et la date de publication, et nous avons maintenant un site Web en quelque sorte fonctionnel. Pour finir cette vidéo car on a l'impression que c'est déjà assez long. Ce que je vais faire, c'est de mettre du code pour la page À propos. Maintenant, ce qui est drôle avec la page À propos, c'est que le contexte de la page est pratiquement identique au contexte de publication. C'est pourquoi, si nous revenons à notre diagramme ici, nous pouvons charger une page sur le modèle de publication car nous utilisons le même contexte, qu'il s'agisse d'une page ou d'une publication. Voyons cela en action maintenant. Je vais faire défiler vers le contexte, pour revenir à ce que nous avions auparavant, qui était le contexte de la page. Le contexte de page, tel qu'il est écrit ici, est pratiquement identique au contexte de publication et est accessible à l'aide de la même expression de bloc. Ce que je vais faire, c'est d'aller de l'avant et de copier le code de post.hbs vers page.hbs. Ce que je vais faire car la grande différence entre une publication et une page est principalement la date. Je vais juste supprimer la date de ce modèle particulier, cliquer sur enregistrer là-dessus. Maintenant, si nous revenons à notre page À propos, vous verrez que nous n'obtenons pas le résultat recherché, car nous utilisons en fait un modèle spécifique pour la page À propos. Mais passons à une autre page, je crois qu'il y en avait une sur la vie privée. Désolé, je l'ai mal orthographié. Si nous accédons à la page Confidentialité, vous pouvez voir ici que nous avons le même format. Nous sommes à l'intérieur de notre conteneur, nous avons notre titre et nous avons notre contenu pour la page. Donc, la seule différence entre les pages et publications est que nous ne pouvons pas parcourir une liste de pages, mais nous pouvons parcourir la liste des publications en boucle. Nous avons accès aux contextes de publication ici. Nous avons accès au contexte de publication au sein d'une publication individuelle, et nous y avons également accès lorsque nous travaillons avec des pages. Le contexte de publication est en fait identique au contexte de la page. Vous pouvez soutenir qu'il n'y a pas de contexte de page, c'est juste le contexte de publication utilisé pour les pages. Je vais le terminer pour cette vidéo parce que nous avons trié notre bloc de construction principal. Nous avons notre page de blog où nous pouvons voir tous nos différents articles et nous pouvons maintenant cliquer dessus et consulter un article individuel. où nous n'avons pas encore couvert, c'est tous ces modèles facultatifs supplémentaires. Comment travaillons-nous dans le contexte de l'auteur ou travaillons dans le contexte de balise ? Que devons-nous faire à propos de ces modèles personnalisés spécifiques qui aboutissent à certains auteurs, certaines balises, à certaines pages et à certaines publications ? Nous parlerons de tout cela dans la prochaine vidéo. 10. Codage dans les contextes d'auteur et de balise: Dans la dernière vidéo, nous avons commencé à coder nos modèles index.hbs, post.hbs et page.hbs et nous avons travaillé avec le contexte de publication. Les contextes de publication s'appliquent à ces trois modèles, que nous soyons en boucle ou que nous soyons dans une seule publication ou une seule page. Dans cette vidéo, nous allons parler des autres contextes, auteurs et balises, et si nous avons le temps, nous allons créer notre thème à l'aide de ces modèles supplémentaires que nous avons créés pour des publications, pages et auteurs spécifiques. Ce que je vais faire, c'est que je vais retourner sur mon site Web ici et je vais naviguer vers l'un de nos itinéraires d'auteur. Si nous passons à la route de l'auteur Christopher, vous pouvez voir que nous avons un modèle spécifique. Je veux aller sur le modèle d'auteur habituel, auquel je crois que si nous tapons Ghost, nous devrions pouvoir accéder. Vous y allez. Je vais commencer à travailler sur le modèle auteur.hbs ensuite et le contexte sur lequel je vais travailler est le contexte de l'auteur. Allons dans la documentation. Cliquez sur Contextes, faites défiler vers le bas et vous pouvez voir la liste ici. Nous avons un index, qui ne semble pas avoir de page sur cette documentation. Nous avons une page qui est essentiellement la même que la publication. Poster, évidemment. Ensuite, nous avons l'auteur et le tag. Nous avons également des erreurs, mais nous n'allons pas en apprendre davantage sur les erreurs dans cette classe. C'est très simple. Nous n'avons même pas besoin d'entrer dans les contextes à l'aide de la balise que nous avons vue dans la vidéo précédente. Nous pouvons simplement afficher ces balises à l'intérieur de n'importe quel modèle d'erreur sur lequel nous travaillons. n'est qu'un détail mineur que nous n'allons pas approfondir dans cette classe. Mais ce que nous allons couvrir, c'est le contexte de l'auteur et de la balise. Si je clique sur le contexte de l'auteur, comme il est indiqué ici, « Les auteurs de Ghost obtiennent chacun leur propre page, qui affiche une liste de publications publiées par cet auteur. » Essentiellement sur le modèle d'auteur, nous avons accès à ce contexte d'auteur, mais nous avons également accès aux contextes de publication via une boucle de 4h. Si je fais défiler ici, voici quelques-uns des attributs de l'objet auteur. Ce que je vais faire, c'est créer une page de liste pour notre auteur. Pour commencer, copions le code ici sur notre index.hbs. Je vais annuler ces deux-là et ouvrons auteur.hbs. Collons ce code ici. Au lieu de tous les messages, je vais dire « Tous les messages par », et vous trouverez ici tous les messages par. Sauvons ça. Rafraîchissons ici. Vous pouvez voir ici tous les articles de l'auteur Ghost. Nous n'avons pas encore introduit ces valeurs dynamiques, mais vous pouvez voir dans la boucle, cela exclut tous les messages écrits par des auteurs autres que Ghost, et ce n'est essentiellement qu'un seul article. Tous les articles précédant cet article sont maintenant affichés sur cette page. Ce que nous devons faire, c'est remplir ces valeurs dynamiques. Je vais vous montrer deux façons de le faire. Sans ouvrir un bloc, nous pouvons simplement passer en revue les contextes de l'auteur en exécutant l'auteur, puis l'attribut, je crois que c'est le nom, et ensuite nous pouvons simplement le copier ici. Cliquez sur « Enregistrer » dessus, actualisez la page et vous voyez tous les messages de Ghost. Vous trouverez ici tous les articles de Ghost. S'il y avait un autre auteur qui utilisait le même modèle, vous direz le nom de cet auteur au lieu de Ghost, mais j'espère que vous obtiendrez le point. Il s'agit d'une valeur dynamique. Ce que je vais faire, c'est que je vais rendre cela un peu plus réaliste. Je vais le faire aussi, au lieu d'avoir à mettre l'auteur. devant le nom à chaque fois, je vais ouvrir le contexte de l'auteur. Je fais exactement de la même manière que j'ai ouvert les contextes de publication dans la vidéo précédente en mettant un tag ici, commençant par le hachage puis en mettant l'auteur. Ensuite, je vais le fermer ici. Ce que cela devrait faire, c'est nous donner le même résultat. Je vais mettre ce code en retrait, rafraîchir et vous voyez que nous avons le même résultat. Ce que je vais faire, c'est que je vais rejeter cette page et apporter également la photo de l'auteur. Ce que je vais faire, c'est que le conteneur ici va être un en-tête, puis je vais avoir deux colonnes. Je vais avoir une colonne pour l'utilisateur et donner une carte à l'auteur. Ensuite, je vais faire passer ce contenu sur le côté dans une deuxième colonne. Ce que je vais faire, c'est au lieu d'avoir tous les messages par nom, ce que je vais faire, faites glisser ceci de notre petite expression de bloc d'auteur ici. Créez une div avec la classe d'en-tête de page. Mettez-ça là-dedans. Je vais toujours avoir tous les messages de l'auteur et le remettre là. Ensuite, ce que je vais faire, c'est créer un conteneur avec la classe de page avec la barre latérale. Ensuite, ici, après avoir ouvert une div, la première colonne, je vais sortir du contenu de l'auteur. Mettez-ça là-dedans. Ensuite, dans la deuxième colonne, je vais mettre le reste de ce code ici. Chaque div représente une colonne dans ce cas. Je peux juste l'indenter correctement là, supprimer une partie de cet espace large, et ici, dans notre petite barre latérale, je peux mettre une carte d'auteur. Encore une fois, je vais utiliser la classe de cartes et cela me donnera accès au style dans Bootstrap. Ouvrez une carte. La première chose que je vais vouloir faire est de créer une image avec la classe de carte img top et le SRC va venir de l'auteur. Je vais utiliser l'assistant URL de l'image, puis accéder à l'attribut dans le contexte de l'auteur de l'image de profil. Ensuite, pour l'ALT va juste dire « image du nom », qui sera le nom de l'auteur. Ensuite, comme avant, je vais configurer le corps de la carte avec un h5 avec la classe de titre de la carte, à l'intérieur, je remettrai le nom de l'auteur. Si l'auteur a une biographie, je veux la montrer. Je vais sortir un élément HTML avec la classe de texte de la carte à l'intérieur. J'ai juste besoin de mettre « bio ». Ce code HTML ne s'affiche que si une valeur est définie dans la biographie. Enfin, je vais mettre dans une zone méta d'auteur ici et je vais mettre un code qui pourrait paraître un peu funky ici. J'utilise essentiellement l'assistant pluriel ici pour montrer un nombre avec la bonne pluralisation. Il va prendre le titre de pagination de ce que nous examinons actuellement. S'il est vide, il va dire qu'il n'y a pas de messages. Ensuite, en définissant pour singulier, nous voulons le nombre suivi d'un post et pour le pluriel, il va dire le nombre de messages avec des messages. Comme vous pouvez le voir ici, il faut un certain nombre et s'il est zéro, il ne produira aucun message. Si c'est singulier, il va dire un post et s'il est au pluriel, il va dire ce nombre de publications, donc cette aide nous aide à produire des pluriels. Nous allons cliquer sur « Enregistrer » là-dessus, et rafraîchissons. On dirait que nous avons manqué quelque chose ici, laissez-moi y retourner. Je vais simplement déplacer ça un peu pour que nous puissions voir plus de l'écran ici. Nous y voilà, je vois que nous avons mal orthographié le singulier. Si j'économise, rafraîchissez-vous ici, vous verrez que nous avons notre carte ici. La mise en forme n'est pas ponctuelle, donnez simplement une largeur maximale de 18, rafraîchissement REM ici. Obtenir des résultats funky, je n'ai pas mis en place la bonne div. Je pense que c'est ici, et maintenant nous obtenons le résultat auquel nous nous attendions. Comme vous pouvez le voir ici, ce que nous avons, c'est dans la première colonne que nous avons l'utilisateur. C'est Ghost avec sa petite image ici, c'est sa bio, qui est définie par Ghosts eux-mêmes et c'est le nombre de publications que cet utilisateur a écrites. Ensuite, bien sûr, vous avez la liste des publications générées par la boucle for-each et cela sera limité aux publications de l'utilisateur de Ghost. Allons maintenant et faisons cela pour le modèle de balise, chose très similaire. Je vais copier sur l'auteur et au lieu du nom de l'auteur, nous allons le changer en nom de balise. Au lieu de tous les messages par, nous allons dire tous les messages avec la balise de. Vous trouverez ici tous les articles avec la balise de vous assurer que vous changez d'auteur de la balise. Maintenant, ici, au lieu d'entrer dans le contexte de l'auteur, nous allons entrer dans le contexte de balise. Encore une fois, il suffit de changer l'auteur du mot-clé en balise, et maintenant de remplacer certaines de ces valeurs. Au lieu de l'image de profil, qui est celle que nous avons disponible dans le contexte de l'auteur, nous avons plutôt une image de fonctionnalité, puis au lieu d'un lanceur de nom, on dira « lanceur » pour le nom de la balise. Ce que je vais faire aussi, c'est vérifier que nous avons un ensemble d'images en vedette. Laissez-moi le faire, c'est comme avant. Si l'image d'entité, puis ceci, puis finissez à cela si bloc, comme tel. Très bien. Cool au lieu de la bio, nous allons faire une description et ensuite, bien sûr, nous allons nous débarrasser de cette méta d'auteur. Je vais cliquer sur « Enregistrer » là-dessus. Passons à une balise qui n'est pas exemple de balise, car n'oubliez pas que nous avons une configuration de modèle spéciale pour cela, donc la seule autre option est de commencer. Ici, vous pouvez voir tous les articles avec la balise de démarrage. Vous trouverez ici tous les articles avec la balise de démarrage. C'est assez explicite, non ? Ici, vous pouvez voir que nous avons le nom de notre étiquette ici. Si nous voulions ajouter une image, il est détecté qu'il n'y a pas d'image définie car nous y avons mis notre instruction if. Mais si nous le voulions, nous pourrions entrer dans notre administrateur, entrer dans nos balises, commencer. Je vais juste en télécharger un depuis Unsplash. Cherchons simplement pour commencer, voir ce qui se passe. Ça a l'air bien. Nous allons cliquer sur « Enregistrer » là-dessus. Revenons ici. Vous pouvez maintenant voir que nous avons une image qui se remplit dans la zone supérieure de cette image de carte. C'est essentiellement comme ça que vous travaillez avec la balise et le contexte de l'auteur. Si vous utilisez le modèle d'auteur ou le modèle de balise, ou un modèle de balise spécifique comme nous pouvons le voir ici. Ou un modèle d'auteur spécifique comme nous pouvons le voir ici. Vous avez ensuite accès au contexte de l'auteur ou de la balise. Maintenant, avant de passer à autre chose et de parler de requêtes personnalisées et de partielles, je veux simplement construire le reste de ce thème. Je pense que nous n'avons pas passé trop de temps dans cette leçon, donc nous avons le temps de remplir rapidement les autres modèles supplémentaires qui se trouvent à l'intérieur de notre thème à l'heure actuelle. Je remarque que nous n'avons rien fait avec la page d'accueil. Disons simplement bienvenue et ensuite nous mettrons le titre du site. En utilisant cet objet de site global, en saisissant le titre, il suffit de cliquer ici. Vous y allez. Il est dit bienvenue sur Skillshare. Vous pouvez voir qu'il y a un petit problème. Je pense que nous avons un peu d'erreur dans nos hbs par défaut. J'ai accidentellement mis le logo du tiret d'en-tête dans AH réf. Excuses si vous l'avez remarqué dès le début et que vous criiez dehors. Mais si je me rafraîchis ici, vous verrez maintenant que pour cliquer ailleurs, puis cliquer là, cela nous ramènera à la page d'accueil. Ensuite, sur cette page d'accueil, qui ajoutera une requête personnalisée dans la vidéo suivante. Mais pour l'instant, mettons tout cela dans un conteneur de largeur de page. Enregistrez, et maintenant il se trouve dans le conteneur de largeur de page. Très bien, alors quels sont les autres modèles que nous n'avons pas encore personnalisés ? Si je vais à la page À propos, par exemple, nous avons cette page/about.hbs. Je pense que dans ce cas, je veux que la page à propos de .hbs ressemble exactement à la même chose. Je pourrais simplement supprimer complètement celle-ci, rafraîchir mon instance fantôme. Maintenant, si je reviens à la page À propos, nous avons juste un modèle de page normal en cours d'exécution pour la page À propos. De plus, je souhaite ajouter une navigation pour le blog maintenant. Faisons un blog, puis ajoutons cette route là. Appuyez sur « Sauvegarder » sur cette tête ici. Maintenant, si nous cliquons sur « Blog », vous pouvez voir que nous avons tous nos articles. Nous n'avons pas le moyen de naviguer vers des auteurs spécifiques et nous n'avons pas le moyen de naviguer vers des balises spécifiques. Ce que je pourrais faire, c'est que je pourrais faire une pause là, puis nous le ferons dans la prochaine vidéo. Nous allons ajouter les balises et l'auteur à ces publications. Ensuite, nous allons personnaliser les modèles spéciaux que nous avions. Par exemple, notre modèle d'en-tête personnalisé, que nous avons ici, que vous n'avez pas encore personnalisé, et je vais également poster un modèle. Ces autres fonctionnent bien. Mais ces deux autres que nous devons également personnaliser. Cette vidéo est longue, donc je pourrais la couper là, les gars, et nous le ferons dans la prochaine vidéo. 11. Requêtes et partiels personnalisés: Le temps a eu le meilleur de moi dans la dernière vidéo, mais c'est bon. Nous allons simplement prendre une vidéo supplémentaire pour couvrir les requêtes personnalisées en partiels, puis nous utiliserons la vidéo pour terminer notre thème fantôme, remplir ces modèles supplémentaires, puis nous aurons un thème fantôme simple mais terminé. Là où vous voulez l'emporter par la suite en termes de style et d'imagerie supplémentaires et de modèles personnalisés, mais au moment où nous aurons fini, vous devriez avoir une compréhension assez solide du fonctionnement des thèmes fantômes. Ce que je veux faire, c'est passer des requêtes personnalisées et des partielles dès maintenant, puis nous allons personnaliser ces modèles spécifiques dans la prochaine vidéo. Tout d'abord, vous auriez remarqué que nous avons du code copié et collé pour la carte postale hibou. La carte postale sera toujours exactement la même, que nous soyons sur le modèle d'auteur, le modèle de balise ou le modèle d'index. Cela signifie que c'est un candidat parfait pour quelque chose appelé partiel. Comme vous pouvez le voir, nous avons configuré notre dossier ici pour nos différents partiels. Nous utilisons des partials pour découper petits morceaux de codes que nous pouvons ensuite réutiliser dans notre projet. Au lieu d'écrire ce code et de le copier et de le coller dans plusieurs modèles, je vais le mettre dans sa propre partie. Je vais appeler cette carte post-card.hbs. Je vais prendre notre carte HTML et le code du guidon là-bas, le découper et le mettre ici. Corrigeons tout le retrait, sauf ça. La façon dont nous appelons une partielle, maintenant que nous l'avons déplacée là-dedans, c'est en utilisant ce signe plus grand que. Nous mettons le signe plus grand que, ouvrons une chaîne, et ici nous mettons le nom de la carte postale partielle. Maintenant, si nous allons à l'index qui est notre page de blog, la carte postale partielle ne peut pas être trouvée. Je crois que c'est parce que nous n'avons pas actualisé notre serveur. N'oubliez pas que nous avons ajouté un nouveau fichier, donc nous devons actualiser notre instance fantôme. Bon petit rappel là. Actualisez. Maintenant, vous pouvez voir que nous avons exactement la même apparence sur ce modèle d'index. Ce que je vais faire maintenant, c'est que je vais remplacer le code dupliqué par ce petit code par le partiel. Cela va rendre notre base de code beaucoup plus propre. L'autre chose que nous pouvons faire, que je vous montrerai dans la vidéo suivante, est de créer des partiels personnalisés pour la navigation et la pagination, qui si nous les utilisons dans fantôme sans ces partiels, il produira du code par défaut que nous utilisons. Je n'ai même pas besoin de se fixer. Ils sont comme des partiels spéciaux du système. Je parle, par exemple, moment où nous allons à default.hbs et que nous avons cette balise de navigation ici. C'est presque comme une version spéciale d'une version partielle, mais sans avoir à la définir dans notre dossier partiels. Si nous voulions personnaliser notre navigation, nous pouvons en définir une partielle pour cette navigation ainsi que pour la pagination, que nous aborderons dans la vidéo suivante. Restez à l'écoute pour ça. Cependant, c'est essentiellement la base des partiels, en retirant le code que vous copiez et collez à plusieurs endroits, en le plaçant dans un seul emplacement et en l'appelant simplement là où vous en avez besoin. Le deuxième concept dont je veux parler dans cette vidéo est celui des requêtes personnalisées. Les requêtes personnalisées nous permettent de tirer des données du site Argos et de les placer sur n'importe quel modèle. Je pense qu'une application pratique est pour une page d'accueil. Parfois, lorsque vous êtes sur la page d'accueil d'un blog, vous voulez voir le dernier article. En utilisant une requête personnalisée, nous pouvons réellement le faire. Je vais aller dans la documentation pour les requêtes personnalisées, que je crois que nous pouvons trouver dans un contexte ou assistants pensent peut-être nous aider ici. On y va. Au sein des assistants fonctionnels, nous pouvons faire une requête personnalisée avec cela, obtenir de l'aide. Je vais cliquer là-dessus. Nous pouvons lire comment obtenir certaines informations de notre back-end et les produire où nous le voulons. Inside out va thème. On y va. Des exemples simples ici nous pouvons obtenir nos publications et cela nous permet de créer une boucle de publication. Ici ne sont pas codés que je vais naviguer vers notre modèle home.hps. Ce que je vais faire, c'est de construire un peu ça. Je vais ajouter une div avec une classe d'en-tête de maison. Ensuite, après le H1, je pourrais faire une description du site. Supprimez la description, l'attribut de l'objet global du site et placez-le là-dedans. Après cet en-tête, je vais ouvrir l'aide. Je vais demander les publications et je vais m'assurer qu'elles contiennent des balises et des auteurs. Nous utiliserons ces données dans la prochaine vidéo. Je vais fermer ce bloc là-bas. Ensuite, je vais mettre H2 et dire les derniers messages. Ensuite, nous pouvons créer une boucle pour chaque et avoir accès aux publications même si nous ne sommes pas sur un modèle d'index. Je peux aller chercher chaque poste, fermer le bloc là. Je vais aussi mettre ça dans une div avec la classe des postes en ligne. Encore une fois, toutes ces classes, c'est juste pour le formatage et la structure. Cela concerne le CSS que j'ai dans mon fichier principal. Ne vous laissez pas confondre par ça. C'est juste moi qui donne un peu de formatage à ça. Dans cette boucle, je peux produire la partielle que nous avons créée après la carte. Il y a deux autres choses que je veux faire ici. Je veux limiter cette situation à trois résultats. Les trois derniers, et assurez-vous qu'ils sont triés par la dernière publication. Publié à la page décroissante. Gardez ça. Retournez sur notre page d'accueil. Vous pouvez voir, bienvenue sur Skillshare pensées, histoires et idées, qui est la description par défaut d'un site Web fantôme. Nous pouvons évidemment aller dans les paramètres de notre site Web et modifier cela. Nous allons voir les détails généraux de la publication, le titre et la description. Disons simplement qu'au lieu de Skillshare, c'est un site fantôme et disons qu'il s'agit d'un exemple de site fantôme, enregistrez ces paramètres, revenez en arrière et vous verrez que cela met à jour la page d'accueil. Il met à jour le logo, il met à jour tout. C'est un exemple de site fantôme. Mais surtout, ce que nous avons ici est une liste des trois derniers articles sur le site Web, afin que les utilisateurs puissent voir un aperçu des publications sur le site Web sans avoir à naviguer sur la page du blog. Celui-ci est un peu court ou plus court que les autres. Mais dans la vidéo suivante, nous allons couvrir ce que nous n'avons pas terminé dans la dernière vidéo, qui consistait à créer ces modèles personnalisés. Celles spécifiquement pour l'exemple sont spécifiquement destinées aux modèles personnalisés définis dans l'administrateur fantôme. Ajoutez la possibilité de naviguer vers différents auteurs et étiquettes à partir des cartes postales elles-mêmes. Dans la vidéo suivante, nous allons le couvrir. Ensuite, nous terminerons notre projet et commencerons à prendre notre parti en direct. 12. Terminer le thème: Dans cette dernière leçon, avant de commencer à regarder l'hébergement et la mise en ligne de notre site, je vais ajouter quelques liens vers l'auteur et les balises ici pour chaque publication, puis nous devons également mettre à jour ces modèles personnalisés. Après cela, nous devrions avoir un thème fantôme qui fonctionne bien. De toute évidence, il y a beaucoup d'autres choses que nous pourrions faire ici, mais cela permettra d'achever un projet de base pour nous. La première chose que je veux faire est que nous puissions naviguer vers les auteurs individuels et la page de balise individuelle, ce que je veux faire est d'ajouter le tag et l'auteur à nos cartes postales. Je vais aller sur le blog ici pour que nous puissions voir toutes les cartes postales. Je vais entrer dans mon éditeur de code, une fois que je vais passer à la carte postale et je vais commencer à ajouter du code sous l'extrait. Le premier que je vais faire est un lien vers l'auteur. Je vais le formater comme un bouton Bootstrap. Je vais donner à ça la classe de btn btn-primaire. C'est les champs href, classe. Ensuite, je vais définir le href, qui sera l'URL principale de l'auteur. Il affichera simplement l'auteur principal, qui est un concept similaire à la balise principale, au cas où il y aurait plusieurs auteurs. peux fermer cela et ensuite je vais dire par auteur principal .name. Avant de laisser cela là, il y a une considération à prendre en compte, c'est que nous ne voulons pas avoir de lien vers l'auteur principal lorsque nous visionnons actuellement cette carte postale sur la page de l'auteur. Si nous sommes dans le contexte de l'auteur, nous ne voulons pas vraiment voir de lien vers l'auteur, car il s'agirait simplement d'un lien circulaire. Ce que nous pouvons faire, c'est de vérifier si nous sommes dans le contexte de l'auteur en utilisant cette aide spéciale. Mais dans ce cas, nous voulons vérifier que nous ne sommes pas dans ce contexte d'auteur. Nous pouvons mettre ce petit personnage ici pour chercher le contraire. Ce code va s'exécuter ici si nous n'avons pas accès au contexte de l'auteur. Je vais fermer l'est là et maintenant pour les étiquettes. Je vais aller aux balises de carte et ici tout ce que nous avons à faire est de mettre les balises de mots clés et d'écrire des balises comme ça, comme vous le verrez dans la documentation, produira une liste de balises séparées par des virgules, et chaque balise va être un lien vers cette balise. Si je me rafraîchis ici, vous pouvez maintenant voir que nous avons un bouton pour voir l'auteur et nous avons nos différentes balises qui ont été définies sur ce post. Si je clique sur le bouton « Acheter un fantôme » ici, vous verrez que nous avons déjà configuré notre modèle. Si je clique sur « Commencer », et que vous voyez que nous avons notre modèle de démarrage que nous avons vu auparavant. Mais n'oubliez pas que nous avons créé un modèle différent pour Christopher Dodd. Mon itinéraire d'auteur a un modèle différent et nous avons un modèle différent, par exemple une balise. Je voulais d'abord les mettre là-dedans afin que nous puissions facilement y accéder. Pour revenir au blog ici, nous devons personnaliser ces modèles. Nous devons également personnaliser l'exemple de publication. Nous avons défini un modèle spécifiquement par exemple post et nous devons également modifier ce modèle personnalisé que nous avons défini dans l'administrateur fantôme. Nous avons quatre modèles que nous devons réparer ici. Allons dans le code et résolvons le, que devrions-nous faire en premier ? Faisons le modèle d'auteur Christopher. Allons dans Auteur-Christopher.HBS. Parce que je sais que nous allons parcourir un index, je vais copier et coller du code de notre index ici et le mettre ici. Au lieu d'avoir un en-tête ici, j'ai créé une classe dans notre en-tête CSS pour auteur. Je vais dépasser cette largeur de page pour créer un en-tête pleine largeur. Je vais entrer dans le contexte de l'auteur, puis le fermer pour ne pas oublier. À l'intérieur, je vais créer une div avec la classe d'en-tête d' auteur et à l'intérieur duquel je vais avoir un h1. Je vais en mettre un petit ici aussi. À l'intérieur du petit, je vais dire des messages avant et après la petite sortie, le nom de l'auteur, qui étant donné ce modèle ne s'applique qu'au modèle d'auteur pour Christopher, nous n'avons pas vraiment besoin de valeurs dynamiques. On pourrait les coder en dur. Mais je pense qu'il est un peu plus propre d'avoir les valeurs dynamiques au cas où nous voudrions modifier cela ou copier-coller ce code. L'autre chose que je veux faire est d'avoir l'image de l'auteur, donc nous avons la couleur d'arrière-plan. C'est quelque chose que nous devrons être dynamiques car nous pourrions toujours changer l'image de couverture de l'auteur. Je vais utiliser à nouveau l'assistant URL de l'image, puis insérer l'image de couverture, qui est un attribut de l'objet auteur. En appuyant sur « Enregistrer » là-dessus, revenez ici. Vous pouvez maintenant voir que nous avons cet en-tête. Il indique les publications par et qui porte le nom de l'auteur, puis il contient la liste des publications. Vous ne pouvez pas le voir pour le moment, mais c'est censé être une image d'arrière-plan. J'irai dans mes paramètres ici, irai dans Staff, voir Christopher Dodd, et nous allons changer la couverture. Nous allons télécharger une image. Nous avons ici un dossier avec quelques exemples. Disons simplement que c'est mon image de couverture. Maintenant, si je vais ici, ça ne s'affiche pas et c'est parce que j'ai mis par erreur la couleur d'arrière-plan ici, pas l'image de fond, rafraîchissant ici et vous pouvez voir maintenant que j'ai cette bannière ici. Si nous allons sur notre page d'auteur Ghost, vous pouvez voir que nous avons le modèle standard qui la carte d'auteur dans cette colonne de gauche ici. Mais si je vais spécifiquement voir Christopher Dodd, j'ai cette mise en page à la place. Cela nous permet de personnaliser certaines mises en page. Peut-être que cet auteur est particulièrement spécial et a besoin d'un modèle personnalisé. Eh bien, dans ce cas, nous pouvons le personnaliser en utilisant notre connaissance de la structure thématique que nous avons établie plus tôt dans cette classe. Faisons la même chose pour notre étiquette maintenant. Tag-example-tag, je vais fermer à nouveau ces fichiers ouverts. Dans tag-example-tag, copions simplement le même format que celui de l'auteur Christopher. Je vais déplacer ça. Au lieu d'écrire ici, nous voulons mettre la balise car nous entrons maintenant dans les contextes de balise et au lieu de l'image de couverture, nous devons utiliser l'image appropriée pour une balise qui est une image de fonctionnalité que nous avons vue auparavant. Ensuite, nous n'aurons pas de messages par ici, nous allons juste avoir le nom de la balise. C'est un peu mal choisi ici parce que nous copions un en-tête que nous avons configuré pour l'auteur. En fait, nous pouvons aller dans notre fichier CSS et juste le réparer maintenant, en-tête auteur, si je voulais être un peu plus propre ici. Disons simplement un en-tête d'image. Je vais arranger ça pour vous maintenant. Utilisons plutôt l'en-tête de l'image de classe. Comme nous l'utilisons sur plus que le modèle d'auteur. Appuyez sur « Enregistrer » et passez ici. Voici un lien vers les différents modèles de balises. Nous pouvons accéder au modèle de balise standard, qui est en cours d'exécution pour tout autre élément que l'exemple de balise. Mais si nous voulions voir cette option spéciale, nous pouvons cliquer sur « Exemple-tag » et vous pouvez voir que nous avons notre en-tête maintenant. Le formatage n'a pas été rencontré, ce qui est probablement dû à une mise en cache intense des fantômes. Je vais juste ouvrir DevTools, ce qui me permet de vider le cache et de le recharger dur. Une fois qu'il a vidé son cache et qu'il ait été rechargé, vous devriez commencer à voir ces modifications CSS prendre effet. On y va. Nous avons maintenant notre joli petit en-tête avec le nom de la balise et l'image de la balise en arrière-plan. Maintenant, nous avons nos modèles spécifiquement pour l'exemple de publication, puis nous avons notre modèle d'en-tête personnalisé que nous avons défini dans l'administrateur fantôme. Je vais commencer par celui-là parce que ce sera le même format. Je vais passer à l'en-tête personnalisé. Encore une fois, je vais copier à partir d'ici. Je vais m'en débarrasser ici parce que nous ne parcourons pas une liste de messages en boucle. Je vais changer cela pour publier afin que nous puissions accéder au contexte de publication. Je vais aller jusqu'au bout parce que nous aurons besoin d'accéder aux contextes de publication tout au long de la journée. Je vais conserver cet en-tête d'image et au lieu de l'image de couverture, l'image d'entité est l'attribut du contexte de publication. Encore une fois, ne pas poster par. Nous allons juste avoir le titre du billet de blog, puis nous allons copier en face du modèle de publication ici, ce bout de code. Sauvons ça, revenons. Ici, vous pouvez voir que nous avons le titre à deux endroits, donc je vais simplement supprimer le titre ici. Enregistrez et ici, vous pouvez voir que nous avons notre modèle alternatif, qui place l'image en vedette derrière le titre, puis le titre est superposé dessus. Il a toujours la date, il a toujours le contenu, mais nous en avons aussi. Faisons maintenant le modèle final. Allons dans le blog, passons dans un article d'exemple. Pour l'exemple de publication, ce que nous allons faire, c'est revenir dans le code. Disons simplement que le modèle, par exemple, sera le même que la publication, mais nous n'aurons qu'une liste d'articles associés en bas. Nous le ferons uniquement pour ce modèle spécifique. Ce que nous allons faire, je fermerai tout cela à nouveau, et passons à poster un exemple de publication et nous copierons le contenu à partir du modèle de publication standard. Je vais le faire. Allez ici, collez ça, et maintenant nous aurons exactement le même look qu'avant. Mais cette fois, ce que je veux faire, c'est que je veux ajouter, et c'est une autre requête personnalisée que nous avons appris dans la vidéo précédente, ce que je vais faire, c'est que je vais écrire un message en dessous ici. Ce que je ferai avant cela, c'est que je vais créer un article avec une classe de, ce sera une valeur dynamique, la classe post_, et ensuite je résumerai notre article là-dedans. De cette façon, nous allons le différencier de ce que nous allons faire ci-dessous, c' est-à-dire ouvrir une requête personnalisée. Allons chercher les messages. allons inclure les balises et les auteurs parce que nous voulons y avoir ces attributs afin que nous puissions y accéder et avoir les liens que nous avons créés au début de cette leçon, puis je vais filtrer par balise principale. Si la balise principale est égale à la balise principale de cet article , je souhaite afficher à nouveau ces publications similaires. Mettons fin à ça. Obtenir des messages en vedette est la classe. Ensuite, je vais juste ajouter dans le titre ici des articles similaires. Créez ensuite un conteneur pour ces publications et configurons la boucle. Nous allons l'avoir comme nous l'avons fait sur la page d'accueil. Je vais saisir cette boucle ici et montrer les trois derniers que nous avons qui partagent la balise principale du post que nous regardons. Je vais cliquer sur enregistrer là-dessus, rafraîchir ici et vous pouvez voir qu'il passe par le post d'exemple original. Il suffit de supprimer l'exemple de publication. Je vais ajouter un autre filtre ici qui dit que l'ID n'est pas post.id. Nous sauvegardons cela, nous n'obtiendrons pas d'articles similaires, donc ce que je pourrais faire est de faire le contraire et de mettre ceci sur le modèle de publication standard et cet autre peut être une version propre . Il suffit d'enrouler cela avec une balise d'article , une classe, une classe post_class, puis en dessous, je vais poster ça dans. Prenez ce code, mettez-le dans l'article, corrigez un peu d'imbrication ici. Ensuite, si je clique sur « Enregistrer » là-dessus, vous verrez , par exemple, des messages, nous avons juste le post sans articles similaires, mais si je vais sur mon blog et que je vais à l'un de nos articles de bienvenue, celui-ci est bien sûr sur un autre donc je dois ajouter exactement le même code à notre en-tête personnalisé. Je pense que nous devons nous débarrasser de l'espace blanc ici, ça ne semble pas aimer ça. On y va. Nous avons récupéré notre auteur maintenant et nos étiquettes ici. Nous avons des articles similaires ici. Si nous passons à notre modèle personnalisé ici, nous n'avons pas le même résultat. Je pense que c'est parce que nous sommes toujours dans le contexte post. Je vais juste déplacer ça ici car nous n'en avons pas besoin ici. Enregistrez, rafraîchissez-vous ici, et maintenant vous pouvez voir que nos articles similaires sont parus. Ils arrivent sur le modèle d'en-tête personnalisé, ils arrivent sur le modèle de publication standard, mais ils ne parviennent pas sur l'exemple de publication. Bien sûr, ce n'est qu'un exemple de la façon dont nous pouvons avoir différents articles de blog affichant différents modèles. Je voudrais ajouter quelques autres choses ici. Je sais que cette vidéo va être particulièrement longue, mais je veux vous montrer certaines choses qui vont rendre ce site encore plus complet. Une des choses que je veux faire, ici, je viens de remarquer que nous avons à nouveau le même problème. Permettez-moi de revenir à la page d'accueil ici. Assurez-vous qu'il n'y a pas d'espace entre les balises et les auteurs. On y va, ça l'a corrigé. Ce que je vais faire, c'est quelque chose que j'ai remarqué, c'est que lorsque nous cliquons sur un article, il n'y a pas de navigation qui retourne sur le blog. Bien sûr, nous pouvons cliquer ici dans l'en-tête, mais je pense que quelques chapelures seraient bien ici. Je vais donc ajouter de la chapelure aussi. Je vais utiliser le format standard dans bootstrap. Je vais entrer, disons tout d'abord le post. En fait, je vais utiliser cela sur tous les modèles de messages, donc je vais peut-être commencer directement à faire un partiel. J'appelle ça la chapelure. HBS. Ensuite, je vais commencer à écrire du code bootstrap standard. Je vais avancer rapidement parce que la structure est juste des composants bootstrap standard. Ensuite, je m'entrerai avec vous à la fin pour vous expliquer. Très simple. La seule valeur dynamique est le titre de la publication actuelle. Sinon, nous allons juste avoir une barre oblique et un lien vers le blog. Nous pouvons maintenant inclure cela ici dans notre post. Je vais le mettre juste au-dessus de l'en-tête du message ici. La syntaxe d'inclusion d'une partie, comme nous l'avons vu précédemment, ouvre ce signe supérieur à, puis placez le nom de votre partiel entre guillemets doubles. Voyons juste que ça a fonctionné. Là, vous pouvez voir que nous avons une jolie petite chapelure formatée et ajoutons cela à tous nos modèles de publication personnalisés. Nous y allons, exemple post. Ensuite, pour notre en-tête personnalisé, n'oubliez pas que nous pouvons également utiliser cet en-tête personnalisé sur les pages. Je veux faire un chèque supplémentaire ici pour m'assurer que ce n'est pas sur une page. Je vais le faire si ce n'est pas la page, alors nous mettrons la partie de la chapelure. Nous ne voulons pas que la chapelure montre si nous sommes sur une page. Bien sûr, c'est une préférence personnelle. Vous pouvez toujours avoir la chapelure, mais cela n'aurait pas de sens avec le lien vers le blog. Si j'allais sur ma page à propos, par exemple, et que je le modifiais par notre modèle d'en-tête personnalisé, je ne verrais pas ces chapelures. Alors que si je vais dans le post ici où je sais que nous exécutons ce modèle personnalisé, je peux voir que la chapelure apparaît. Encore une chose minuscule et ensuite nous terminerons, c'est que je crois que nous allons avoir besoin d'une pagination ici. Comme nous l'avons vu précédemment avec la balise de navigation, si nous ajoutons simplement une balise avec le mot pagination ici, cela fonctionnera, mais cela ne sera pas aussi beau que nous pourrions l'espérer. Ce que je vais faire, c'est ajouter une pagination , puis je vais la personnaliser en créant une partielle distincte. Tout d'abord, pour réellement édicter la pagination, car pour l'instant, il n'y a qu'une seule page, je vais limiter les publications à six publications par page. La façon dont nous faisons cela est dans notre fichier package.json, faites défiler vers la fin, il devrait y avoir cet objet de configuration, sinon, simplement le créer. Vous pouvez voir ici les publications par page. Je vais régler ça à six. Je crois que nous devrons redémarrer notre serveur Ghost après l' avoir modifié , alors en cours d'exécution, Ghost redémarre. Maintenant, si je passe sur notre page de blog, vous pouvez voir que nous ne voyons que les six derniers articles. Nous allons avoir besoin d'une pagination pour accéder aux autres publications. Je vais entrer dans notre fichier index.hbs et après cette boucle, j'ajouterai dans la balise simple, pagination. Rafraîchissant ici, regardons à quoi cela ressemble. Ici, vous pouvez voir que nous sommes à la page 1 de 2, et nous pouvons rechercher des publications plus anciennes, et ici il produit automatiquement des publications plus récentes. Je vais juste rendre ça un peu plus agréable en utilisant les classes Bootstrap. Pour cela, nous devons configurer une partielle afin de personnaliser la pagination. Je vais faire de la pagination.hbs et pour celui-ci, pour gagner du temps, je vais copier et coller du code, puis je vais l'expliquer. Il s'agit simplement de la structure Bootstrap standard pour la pagination. Ce que nous faisons ici en ce qui concerne le code du guidon, c'est que s'il y a un élément précédent, nous voulons avoir un lien vers ce dernier ici. Le texte vers ce lien va être précédent et nous utilisons l'assistant URL de page pour y insérer le lien vers la page précédente. Ensuite, nous aurons la page actuelle comme point, puis s'il y a une page suivante, nous allons faire le contraire de ce que nous avons fait ici et avoir un lien vers la page suivante. Bien sûr, nous venons de créer un nouveau fichier Nous allons donc devoir actualiser notre serveur. Ensuite, en vous dirigeant vers notre page d'index ici, vous pouvez voir que nous avons maintenant une pagination au format Bootstrap plus agréable. Vous y allez. Fonctionne parfaitement et vous montre sur quelle page vous vous trouvez actuellement. Comme je l'ai dit au début de cette leçon, il y a beaucoup plus de personnalisation et de fonctionnalités que nous pouvons offrir à notre site Ghost, mais cela couvre essentiellement tous les points principaux, tous les fondamentaux pour vos besoins de développement de thème Ghost. Pour résumer, nous avons créé les modèles les plus importants comme le modèle de publication. Nous avons créé le modèle d'index. Nous avons créé un modèle d'accueil qui répertorie les trois derniers articles. Nous avons un modèle de page standard qui montre notre page à propos, puis nous avons des modèles pour les auteurs utilisant le contexte de l'auteur. Nous avons un modèle alternatif pour l'auteur, plus précisément par la limace de Christopher. Nous disposons d'un modèle pour filtrer par une balise donnée, puis, encore une fois, nous avons un modèle alternatif pour filtrer par une balise spécifique. Enfin, nous avons deux modèles de publication alternatifs. Nous avons celui-ci avec l'en-tête personnalisé et ensuite nous avons celui-ci, qui est essentiellement le même qu'un modèle de publication normal, mais sans les articles similaires. Je tiens à noter ici que j'ai utilisé un peu de syntaxe qui n'a pas nécessairement été expliquée. Je voulais sauter ici et rendre cela aussi pratique que possible et vous montrer comment nous développons notre thème Ghost. Mais si jamais vous êtes confus au sujet de certains des assistants que j'ai utilisés ici ou de la syntaxe, le meilleur endroit pour regarder est la documentation. Quelque chose que nous n'avons pas abordé dans cette classe était la liste des différents assistants, mais comme vous pouvez le voir ici, nous avons beaucoup de choses ici en ce qui concerne la vérification du contexte de l'itinéraire actuel. Nous avons vu cela un peu dans cette classe, testant évidemment des conditions très simples avec des instructions if en utilisant get pour créer des requêtes personnalisées, mais vous avez également d'autres choses comme les objets du site, que nous avons utilisé un bit, navigation. Nous avons toutes sortes de données différentes auxquelles nous pouvons accéder et ces assistants utilitaires ici, ce que nous avons vu. Des choses comme l'ajout de code de Ghost automatiquement dans la tête, mise en place de classes CSS dynamiques, nous pouvons même rendre le temps de lecture estimé d'un post. Ce sont toutes des options dans Ghost, et si vous voulez les rechercher, elles sont ici dans les aides. J'en parle également dans mon article. Si vous souhaitez en savoir plus, vous pouvez en savoir plus sur les différents contextes et comment les thèmes Ghost sont codés à l'aide du guidon ici. Le guidon est livré avec sa propre syntaxe, mais a également été étendu dans les thèmes Ghost. La théorie derrière tout cela, je vous encourage à lire dans ce guide, elle sera publiée au moment où vous regardez cette vidéo, mais je ne veux pas trop m'enliser pour rendre ce cours très théorique. Les commentaires sur certains de ces cours que j'ai suivis auparavant indiquent que les gens veulent que cette théorie soit mise en pratique. Je ne me suis pas trop concentré sur la syntaxe du codage des thèmes Ghost, mais je pense que ce qui est très important à noter est comprendre si je fais défiler ce diagramme ici, et le routage, car cela forme la structure de votre thème Ghost. Si vous ne comprenez pas ces principes fondamentaux , alors vous pouvez vous demander ce que vous êtes censé faire pour créer différents modèles pour différents itinéraires. C'est très puissant et est au cœur de Ghost. Les autres choses comme la syntaxe spécifique à utiliser pour vérifier les choses, vous pouvez facilement rechercher et nous avons vu quelques exemples de codage de notre propre petit thème Ghost ici. Je vous encourage, comme nous allons entrer dans le projet de classe, à créer votre propre version, mais dans la leçon suivante, nous allons apprendre comment publier ce texte en direct sur un site Web sur Internet afin que nous peut réellement présenter notre thème Ghost au monde entier et, espérons-le, l'utiliser dans un environnement de production. Je vous verrai dans la prochaine vidéo. 13. Comment publier votre thème en direct: Dans cette leçon, nous allons parler de la mise en place thème Ghost dans un environnement de production, c'est-à-dire en ligne notre site Web Ghost et de le publier sur Internet. J'ai ouvert quelques onglets qui vont nous aider dans ce but. J'ai ici l'article de Ghost sur l'installation de Ghost. Ici, vous pouvez voir que nous avons fait l'une des options ici, à savoir l'installation locale. Mais si vous faites défiler vers le bas pour l'hébergement Cloud, il y a trois options dont nous parlerons en une seconde. Ensuite, nous allons également examiner l'intégration GitHub Ghost et cela nous permet de réaliser une intégration continue simple du thème Ghost, en le déployant directement sur notre site Web Ghost. En gros, ce que nous devons faire lorsque nous apportons des modifications à notre code de thème Ghost localement, c'est pousser ce code vers notre référentiel et GitHub Actions le construira pour nous et mettra automatiquement à jour notre site Web Ghost en direct. Il s'agit d'une intégration très puissante en termes de mise à jour de votre site au fil du temps. Une fois que vous serez en direct, vous voudrez peut-être apporter des modifications ici et là. Vous le ferez une fois de plus localement, puis si vous apportez simplement ces modifications à GitHub avec cette intégration, elles seront directement sur votre site Ghost. Maintenant, revenons au premier article ici, comment installer Ghost. La première ligne, comme il est dit, le moyen le plus rapide de commencer à configurer un site sur Ghost est sur Ghost Pro. faisant défiler à nouveau les options Cloud, DigitalOcean est ce que j'utilise et j'utilise DigitalOcean car c'est moins cher que Ghost Pro. Mais bien sûr, c'est un peu plus difficile à mettre en place et ce n'est pas quelque chose que nous allons aborder dans cette classe. Il s'agissait autrefois d'un service fourni par Ghost Valet Cord Ghost et ils s'occupaient de toute l'installation pour vous moyennant des frais uniques. Cela ne semble plus être disponible. Donc, le deuxième site Web que j'ai créé sur DigitalOcean, j'ai dû passer par moi-même les étapes et c'était un processus un peu délicat pour quelqu'un qui ne connaissait pas trop les configurations de serveur. Pour ce cours, ce que je vais recommander et ce que je vais faire avec vous, c'est d'utiliser Ghost Pro, ce qui sera le moyen le plus simple de mettre en place votre site Web et il utilise essentiellement Ghost lui-même pour gérer le hébergement pour vous. Comme il est dit ici, l'hébergement géré officiel, je vais cliquer sur cette option et comme vous pouvez le constater, il y a un coût à cela. Malheureusement, tout hébergement de site Web, il y aura un certain coût. Si nous faisons défiler vers le bas, nous aurons au minimum besoin du plan de création, car nous utilisons des thèmes personnalisés. Si nous supprimons le rabais annuel sera de 31$ par mois. Avec un rabais annuel, il sera d'au moins 25$ par mois. Mais la bonne nouvelle, c'est pour nous aider à apprendre comment le faire, nous pouvons le tester en commençant un essai de 14 jours. Je vais cliquer sur celui-là et vous pouvez suivre aussi longtemps que vous n'avez pas fait l'essai avant lui et créons un compte. Je vais appeler ce chrisskillshare et ensuite utiliserons un, j'utiliserai simplement le mot de passe suggéré et le copierai quelque part pour ne pas perdre ça. Il va demander les détails de votre carte, car après l'essai de 14 jours, elle débitera automatiquement votre carte Si vous ne voulez pas que cela se produise , assurez-vous de l'annuler avant les 14 jours. Je trouve que beaucoup de gens n'aiment pas cela, mais si vous configurez simplement un rappel sur votre téléphone ou votre ordinateur pour vous assurer que vous annulez avant la fin des 14 jours, alors vous ne serez jamais facturé et je n'ai jamais été facturé tout ce que je ne voulais pas être facturé, simplement parce que je me souviens toujours de mettre un rappel. Pour ceux d'entre vous qui s'inquiètent particulièrement de la facturation de votre carte, assurez-vous d'insérer ce rappel. J'ai enregistré les détails de ma carte ici. Je vais juste mettre ça, les détails confirmés, puis je vais continuer. Ici, vous pouvez choisir le type de personnalité que vous êtes. Je vais toucher Developer parce que c'est ce que je suis. Maintenant, cliquez sur Continuer et nous pouvons maintenant donner un nom à notre site. Je vais juste appeler ça Ghost Site. Ensuite, je cliquerai. Faisons ça. Quelque chose ne va pas avec Stripe, semble-t-il. Essayons encore une fois. On dirait que ça a fonctionné la deuxième fois. Il est en train de tourner en ce moment, terminant notre installation et finalise notre configuration. Ensuite, comme nous l'avions fait sur notre ordinateur local, nous avons une nouvelle installation. Si je vais dans les publications ici, vous pouvez voir que nous avons tous les mêmes messages par défaut que nous avions auparavant, les mêmes pages par défaut, et bien sûr, le membre du personnel de Ghost et notre utilisateur ici que nous avons définis lors de notre première connexion. C'est ce qui est génial avec Ghost Pro. Pour en arriver là, utiliser DigitalOcean ou Linode prend quelques étapes supplémentaires. Alors que l'utilisation de Ghost Pro nous permet de faire fonctionner un site Web Ghost très rapidement. Comme vous pouvez le voir ici, nous pouvons accéder à notre site, ghost-site.ghost.io. C'est plutôt cool que le site fantôme soit disponible en tant que nom de site Web. Mais le temps que vous regardiez ce cours, ce site devrait probablement être en panne de toute façon. Nous avons le même point de départ que lors de l'installation locale. Maintenant, ce que nous allons faire, c'est que nous allons emballer notre thème et télécharger sur ce site Ghost en direct. Rappelez-vous que nous allons dans les paramètres ici pour regarder les thèmes et à l'intérieur du thème ici, nous avons Casper. Maintenant, l'une des choses que je n'ai pas faites quand nous sommes entrés dans le thème Casper l'origine, c'est que je n'ai pas modifié les détails dans le fichier package.json, donc je vais passer à l'éditeur de code maintenant. Fermons tout sauf le fichier package.json. Si je fais défiler vers le haut, vous pouvez voir que notre thème s'appelle toujours Casper. Je vais commencer à renommer cela, disons un thème fantôme personnalisé, et modifions également certains de ces autres détails. Thème Ghosts personnalisé par Chris Dodd. Vous n'avez pas besoin d'y mettre une démonstration. Disons simplement que c'est la version 1.0. Débarrassez-vous de ces captures d'écran. Au lieu de l'auteur, nous allons y mettre notre nom, notre adresse e-mail, nous débarrasser de l'URL. Nous pouvons probablement laisser tous les autres ici. Débarrasse-toi de ça. Ces liens sont spécifiquement destinés au thème Casper, je vais donc m'en débarrasser également. Il suffit de supprimer tout ce qui est spécifique à Casper et surtout de changer quelque chose comme son nom. Maintenant, ce que nous allons faire, c'est que je vais ouvrir une fenêtre du Finder. Une seconde pendant que je réorganise ma fenêtre ici, puis nous allons aller sur notre site Ghost ici. Une fois que nous sommes dans le dossier de notre site Ghost, nous pouvons cliquer sur les thèmes de contenu actuels pour accéder à notre dossier Thèmes. Ici vous pouvez voir notre dossier thème Casper ici, mais bien sûr, nous avons fortement modifié le code dans notre dossier Casper ici, donc je vais tout d'abord le compresser, puis je vais renommer le thème , thème personnalisé. Nous avons maintenant notre thème emballé dans un dossier zip. Nous pouvons maintenant le télécharger sur notre site Ghost en direct. Je vais me rendre sur notre site Ghost, la version de production. Assurez-vous que vous utilisez la version de production, pas la version locale, car nous n'avons pas vraiment besoin de télécharger un thème dans notre version locale. Nous l'avons déjà sur notre ordinateur. Ce que je vais faire, c'est cliquer sur ce bouton vert pour télécharger un thème. Prenez cette version zip du thème, puis il va me demander si je veux l'activer et je vais cliquer sur Oui pour l'activer. Maintenant, je peux cliquer sur ce bouton ici et maintenant nous pouvons voir notre site Ghost se charger dans notre thème. Une chose à noter ici, c'est que la navigation est différente, comme vous pouvez le voir ici, et donc ce que je vais faire est de reproduire notre navigation ici sur notre site en direct sur ce que nous avions construit sur notre site local. Cliquez sur Paramètres ici, accédez à la navigation et supprimons ces liens. Je crois que nous avions à la maison, à propos et sur un blog. Blog ici, cliquez sur Enregistrer. Maintenant, si nous revenons sur notre site, vous pouvez voir, rafraîchissons encore une fois. Vous pouvez maintenant voir que nous avons la même navigation ou une navigation similaire à celle que nous avions sur notre installation locale. Mais il y a une autre chose que nous devons changer ici, c' est-à-dire télécharger notre fichier d'itinéraires mis à jour. Si nous allons dans Paramètres ici, puis que nous faisons défiler vers les laboratoires, ne sais pas pourquoi c'est dans les laboratoires, car c'est une chose assez importante que nous devrions faire. Mais ici, sous les fonctionnalités bêta, nous allons passer aux itinéraires et nous allons télécharger notre propre fichier routes.yaml. Ici, vous pouvez voir à l'intérieur des paramètres de contenu notre fichier d'itinéraires, nous le chargerons. C'est maintenant téléchargé. Cela signifie donc que si nous nous dirigeons vers la page d'accueil de notre site Web, nous verrons la page d'accueil. Mais maintenant, notre index sera déplacé vers la route du blog, comme nous l'avions fait localement et maintenant notre site devrait être exactement le même que ce que nous avions localement. Pour rafraîchir ce que nous avons fait dans cette vidéo, nous avons préparé notre fichier package.json ici. Mise à jour de tous les détails afin qu'ils ne soient plus spécifiques à Casper. Nous avons créé un zip du dossier thème. Nous avons renommé ce dossier en nom de thème personnalisé, dans ce cas, thème personnalisé, puis nous avons téléchargé notre thème sur l'administrateur Ghost. Si je vais ici, que je vais dans les thèmes, nous pouvons voir que nous avons notre thème Ghost client là-bas. Nous avons ensuite mis à jour notre navigation, bien sûr. Mais finalement, vraiment important, nous sommes allés dans des laboratoires et mis à jour notre fichier d'itinéraires également. N'oubliez pas que les itinéraires sont très liés au thème, mais qu'ils ne se trouvent pas dans le dossier du thème, doivent donc être téléchargés séparément. C'est ce qui est nécessaire si vous exécutez un Ghost Pro, je recommande Ghost Pro si vous pouvez vous le permettre pour la simple raison qu'il est si facile à installer, je veux dire qu'il est créé par Ghost. Ils rendent donc très facile la mise en place et le fonctionnement du site Ghost. Le même processus sur un autre hôte, comme nous l'avons vu auparavant, comme DigitalOcean ou Linode prend un peu plus de temps et je ne vais donc pas passer par cette classe. Ce que j'utilise personnellement, c'est DigitalOcean et me permet de payer aussi peu que 5$ par mois pour gérer mon site Web plutôt que le minimum que je pense avoir vu était, si je vais sur la page tarifaire Ghost Pro ici, 25, donc je paie cinq fois moins pour le configurer sur DigitalOcean. Mais la différence, c'est que j'ai dû passer comme un après-midi ou une matinée à essayer de trouver comment le configurer sur DigitalOcean. C'est un peu plus de travail de le configurer sur DigitalOcean ou Linode. Si vous pouvez vous le permettre et que vous voulez le faire , utilisez Ghost Pro. Mais pour moi, j'étais prêt à avoir la peine de trouver comment le faire fonctionner sur DigitalOcean afin de payer moins cher à long terme. C'est là vos options. Je vais le laisser là pour cette leçon et dans la prochaine leçon, nous parlerons de l'intégration GitHub. Dans la leçon suivante, nous parlerons de créer un flux de travail GitHub dans lequel nous pourrons simplement créer des modifications à notre thème local, les pousser vers GitHub, puis il mettra automatiquement à jour notre site Ghost sans que nous un flux de travail GitHub dans lequel nous pourrons simplement créer des modifications à notre thème local, les pousser vers GitHub, puis il mettra automatiquement à jour notre site Ghost sans que nous ayons pour aller ici et télécharger manuellement un fichier zip à chaque fois. Si vous voulez apprendre comment faire cela, je vous retrouverai dans la prochaine vidéo bonus. 14. Bonus : configurer l'intégration Github: Comme promis dans cette leçon bonus, nous allons examiner comment utiliser l'intégration GitHub pour publier les modifications apportées à nos thèmes Ghost via un seul Git, Commit et Push. Git est quelque chose que je recommande à tout le monde d'utiliser. Beaucoup d'entre vous, je suis sûr que vous l'utilisez déjà, mais c' est un bon moyen de suivre les changements apportés à votre projet. GitHub est le premier site Web qui vous permet d'héberger des référentiels distants. Pour ce faire, vous aurez besoin d'un compte GitHub. Je ne vais pas voir comment vous en configurez un, mais vous aurez besoin d'un compte GitHub. Si vous voulez mettre la vidéo en pause et faire cela, je vous attendrai de l'autre côté. Sinon, si vous possédez un compte GitHub, commençons à configurer cette intégration GitHub. Nous avons juste besoin de suivre ce guide ici sur le site Web de ghost.org. C'est sous Intégrations/GitHub, et passons en revue et suivons ce document. La première étape consistera à créer une intégration personnalisée dans notre site Ghost en direct. Comment cela fonctionne, c'est que nous allons modifier le code sur notre ordinateur local, nous allons faire un commit Git et le transmettre à GitHub. Ensuite, une fois qu'il atteindra GitHub, cela affectera notre site en direct. Pour que cela affecte notre site en direct, nous allons devoir configurer une intégration personnalisée afin que nous ayons ces autorisations afin d'affecter notre site en direct. Comme il est dit ici dans Ghost Admin, nous allons naviguer vers les intégrations et créer une nouvelle intégration personnalisée appelée Actions GitHub. Je vais essayer de les gérer côte à côte. peut-être un peu serré, mais il serait bon de les avoir côte à côte. On dirait que ça va être très serré. On y va. Nous allons aller plus loin ici, cliquer sur « Intégrations », puis faire défiler vers le bas jusqu'à Ajouter une intégration personnalisée. Nous allons appeler l'intégration, comme il est dit dans le document Github Actions. Créez celui-là. Faites défiler vers le haut, puis nous allons ensuite copier et coller les détails de l'intégration dans les variables d'environnement de nos référentiels GitHub. Nous devons en fait créer un référentiel GitHub pour que cela fonctionne. Ce que nous allons faire, c'est que je vais étendre cette fenêtre à nouveau, accéder à mon compte GitHub , me connecter et j'ai une authentification Je vais donc devoir autoriser avec mon application Authenticator. Maintenant, nous allons créer un nouveau référentiel en utilisant ce symbole plus ici, et appelons ce thème fantôme personnalisé, puis thème personnalisé créé dans ma classe Skillshare Ghost Theme Development. Je vais laisser ça au public pour vous, pour que vous puissiez regarder le code. Je sais que certains d'entre vous le demandent de temps en temps, donc je publierai ce code dans ce dépôt. Si vous voulez vous rendre à cette adresse, il s'agira ensuite d'une adresse publique, donc vous pourrez y aller. Nous allons y aller et je ne vais pas suivre ces instructions mot à mot, je n'aime pas créer une branche principale, j'aime utiliser la branche principale. J'ai parcouru cette première partie ici, mais ce que je vais faire, c'est que je vais aller dans, ouvrons à nouveau notre terminal, peut-être créer un nouvel onglet ici, puis naviguer vers notre dossier où nous avons le code du thème. CD code/skillshare/ghost-site, puis de l'intérieur, je crois son contenu, puis les thèmes, puis à l'intérieur des thèmes, jetons un coup d'œil, casper. Allons-y Casper ici. Ensuite, nous allons initialiser notre référentiel Git. Mais avant cela, je vais juste agrandir cela, puis lancer git init pour créer un nouveau référentiel Git, git y ajouter tout, puis faire notre commit initial. Maintenant, nous pouvons ajouter cette adresse ici, quelle qu'elle soit pour vous, l'ajouter, puis nous pouvons faire git push -u origin master. On y va. Cela devrait maintenant être poussé vers notre référentiel GitHub, et si nous les actualisons, nous devrions maintenant avoir ce thème ici. Il s'agit d'une copie de la même lecture de Casper, donc je pourrais faire un peu de nettoyage après ça. Mais à part cela, nous avons notre thème personnalisé Ghost. Nous allons faire cette prochaine étape que cela a indiqué dans la documentation, alors en faisant glisser cela, il a dit d'aller dans nos paramètres, puis d'aller dans Secrets. Nous sommes un peu fatigués ici, mais c'est à l'intérieur de ce menu. Je vais dans Paramètres, cherche des secrets, puis si je fais défiler vers le bas, je peux créer un nouveau secret de référentiel et suivre exactement ce qu'il dit ici. Je vais créer un secret appelé GHOST_ADMIN_API_URL, et je vais copier les détails de notre intégration. Je vais prendre l'URL de l'API, cliquer sur « Ajouter un secret », puis nous allons en ajouter une autre pour ADMIN_API_KEY, donc copier exactement cela, puis prendre notre clé ADMIN_API_KEY ici et la mettre dans ce champ de valeur. Cela devrait suffire à donner à GitHub suffisamment d'autorisations pour réellement affecter notre site Ghost en direct. Passons maintenant à l'étape suivante, qui consiste à installer l'action de déploiement du thème Ghost. Nous allons aborder notre thème ici. Assurez-vous que nous sommes dans le dossier thème et que nous allons créer ce nouveau fichier, qui était .github/workflows/main.yml. Voyons si nous pouvons le faire depuis le code VS. On y va. Il a fait le chemin pour nous et tout, donc nous pouvons simplement copier tout cela, coller dans notre fichier ici. C'est tout ce que nous devons faire là-bas, sauf que nous n'avons pas de branche principale, donc je vais m'en débarrasser, et ça devrait être tout. Ce que je vais faire, c'est ouvrir à nouveau notre terminal, et je vais ajouter la modification, puis valider cela, ajouter du code pour les actions GitHub, puis m'assurer de git push. Cela va charger ce fichier spécifique dans notre référentiel Git. Je vais encore agrandir ça. Revenez dans notre code ici, et vous pouvez maintenant voir que nous avons un dossier .github avec nos flux de travail, et nous avons ce code pour l'action GitHub. Cela devrait suffire pour que nous puissions maintenant apporter des changements ici et à les intégrer sur notre site Ghost. Je vais me rendre ici à Thèmes, et comme vous pouvez le voir ici, nous avons déjà poussé ce thème à notre administrateur. Comme vous pouvez le voir ici entre parenthèses, c'est un peu déroutant car il y en a quelques-uns du même nom. Mais maintenant, nous avons ce thème fantôme personnalisé. Apportons maintenant un changement assez évident et voyons comment cela affecte notre côté live lorsque nous utilisons l'intégration GitHub. Disons simplement qu'au lieu de ce style d'en-tête, passons cela à, disons que nous allons faire une couleur d'arrière-plan de blanc, inverser les couleurs en gros, pour que nous puissions le faire. Cela ne fonctionnera pas pour la navigation, nous allons devoir nous assurer que la navigation est également de cette couleur, et donc cela devrait le trier. Reproduisons cela dans notre fichier CSS. Il s'agissait d'en-tête et d'en-tête A. C'est juste à des fins de démonstration, vous pouvez faire tout ce que vous voulez au fur et à mesure de votre projet. s'agit simplement de démontrer que le changement se produira lorsque nous publierons sur notre référentiel GitHub. Je vais faire ces interrupteurs blancs, FFF. Maintenant que nous avons apporté un changement, vous pouvez voir ici que nous y avons apporté un changement. Nous allons retourner dans notre terminal, Git ajoute pour mettre en scène toutes ces modifications, qui n'est qu'un, puis valider l'en-tête des mises à jour. Ensuite, nous allons git push, et notre action GitHub devrait alors fonctionner. Nous pouvons en fait examiner le statut de notre action GitHub. Je ferme cette tête ici, rafraîchis, cliquez sur « Actions », et vous pouvez voir ici que nous avons un flux de travail en cours d'exécution. Il dit que cela a commencé il y a 15 secondes et maintenant c'est terminé, donc il devrait y avoir une coche verte à côté, et si nous allons sur notre site Ghost et que nous nous rafraîchissons, je suis presque sûr que c'est le deuxième ici. Vous pouvez maintenant voir que notre style d'en-tête mis à jour est maintenant disponible sur notre site. C'est ainsi que nous pouvons utiliser GitHub pour publier les modifications apportées à notre site Web. Une fois que nous aurons cette activité active, tous les changements que nous apportons à ce thème seront en ligne sur notre site Web. C'est peut-être une bonne idée d'avoir quelques branches, une pour la mise en scène et une pour le live. Sinon, si je maintiens ce thème activé et que je fais des modifications localement que j'ai ensuite poussées vers GitHub, cela sera également modifié sur notre site Web Ghost, qui nous permettra d'apporter continuellement des modifications au fil du temps. C'est tout pour cette leçon de bonus de financement. Dans la vidéo suivante, nous allons terminer le cours avec notre conclusion, et je vais vous parler de votre projet de classe. Je vous verrai dans la prochaine vidéo. 15. Conclusion et projet de cours: Ceci conclut cette classe sur la façon de personnaliser votre composition fantôme. Pour votre projet de classe, je vous encourage à créer votre propre thème fantôme en utilisant les connaissances que vous avez acquises dans ce cours. Si vous êtes bloqué à tout moment, vous pouvez vous référer à la documentation officielle ou à mon guide ultime sur le développement fantôme publié sur mon site Web. Bien sûr, si cela ne vous aide toujours pas, vous pouvez laisser un commentaire dans la boîte de discussion ci-dessous, et je ferai de mon mieux pour vous orienter dans la bonne direction. Comme toujours, merci d'avoir regardé et j'espère vous revoir à certains de mes autres cours.