Organisation des fichiers et dossiers thématiques Ghost

Ceci est la deuxième partie de notre série de tutoriels sur la conception de thèmes Ghost. Tout ce qui précède suppose que vous avez une compréhension fondamentale de Ghost. Sinon, avant de continuer, prenez le temps de lire Comprendre Ghost: Stades of Design).

Comme nous l'avons vu dans la partie précédente, la conception d'un thème pour Ghost se fait en deux étapes: création de fichier de modèle et style..

Dans ce tutoriel, nous allons nous concentrer sur la première étape en vous guidant pas à pas tout au long du processus de configuration des modèles de votre thème. Vous en apprendrez plus sur le fichier modèle et le système partiel de Ghost, ses balises de modèle de guidon et comment écrire le squelette de marquage de votre thème..

Remarque: Ce tutoriel est réalisé sur une machine Windows, veuillez donc suivre les étapes équivalentes sur votre système d'exploitation préféré.

Vous aurez également besoin d'avoir votre éditeur de code préféré à portée de main; ce tutoriel sera réalisé dans Sublime Text 2.

Installer Ghost localement

La première chose à faire est d’installer Ghost sur votre ordinateur local. Il est très facile de le faire, tant que vous avez les conditions préalables requises sur votre système. Il n’est pas nécessaire d’exécuter XAMPP ou l’équivalent pour exécuter Ghost sur votre ordinateur local, car il s’exécutera lui-même..

Remarque: Parfois, lorsque vous créez un nouveau thème, redémarrez Ghost, puis sélectionnez le nouveau thème dans admin, il se peut que le CSS soit toujours chargé à partir du thème précédent. Si vous rencontrez ce problème lors de la réalisation de cette série de didacticiels ou à tout moment lors de la création d'un nouveau thème, il vous suffit de relancer Ghost. Un redémarrage supplémentaire doit effacer le cache pour que le CSS du nouveau thème soit visible.

Une fois que vous avez suivi les instructions et installé Ghost sur votre ordinateur local (et vérifié que tout fonctionne correctement), vous êtes prêt à commencer à créer votre thème Ghost en commençant par les étapes ci-dessous..

Commencer un nouveau thème vide

Pour commencer, nous allons créer et activer un thème Ghost vierge avec le minimum absolu de fichiers requis..

Étape 1:

 
Dans l'Explorateur Windows (ou équivalent), accédez au dossier dans lequel vous avez installé Ghost. Vous devriez voir la structure suivante dans votre dossier principal Ghost:

Étape 2:

Naviguez dans le dossier "contenu> thèmes", où vous verrez le dossier du thème par défaut "casper".

Étape 3:

À cet emplacement, créez un nouveau dossier et nommez-le comme vous souhaitez que votre thème soit appelé. Dans ce tutoriel, nous allons créer un thème nommé "UberTheme" et voici donc le nom du dossier que nous allons créer:

Ajouter les fichiers requis

Nous allons maintenant ajouter les fichiers de modèle requis, sans quoi vous obtiendrez des erreurs si vous essayez d'activer votre nouveau thème..

Les deux fichiers indispensables à l’exécution d’un thème Ghost sont les suivants:

• index.hbs: contrôle l'affichage de vos derniers messages / page d'accueil
• post.hbs: contrôle l'affichage des messages individuels visualisés individuellement

Étape 1:

Dans votre éditeur de code préféré, créez un nouveau fichier, puis enregistrez-le dans votre dossier "UberTheme" sous le nom "index.hbs". Vous n'avez pas encore de code à ajouter au fichier pour que le fichier que vous créez soit vide..

Étape 2:

Créez un deuxième nouveau fichier, puis enregistrez-le également dans votre dossier "UberTheme", cette fois sous le nom "post.hbs". Comme le fichier "index.hbs" que vous avez créé à l'étape précédente, ce fichier sera également vide / vide..

L'intérieur de votre dossier "UberTheme" devrait maintenant ressembler à ceci:

Activer le thème de la tournée

Nous devons maintenant démarrer / redémarrer Ghost pour que "UberTheme" apparaisse dans la liste des thèmes disponibles dans le panneau d'administration afin que nous puissions le sélectionner et l'activer..

Étape 1:

Si Ghost est déjà en cours d'exécution, fermez-le en appuyant sur CTRL + C dans votre terminal, puis, à l'invite, tapez "y", puis appuyez sur Entrée..

Étape 2:

Démarrez / redémarrez Ghost en tapant "npm start" dans votre terminal..

Pointe: Si vous ne savez pas comment ouvrir le terminal pour pouvoir effectuer l'étape ci-dessus, accédez au dossier "Ghost", maintenez la touche MAJ enfoncée, cliquez avec le bouton droit de la souris sur le menu d'options de Windows, puis sur le bouton gauche de la souris. "Ouvrir la fenêtre de commande ici".

Remarque: Les étapes ci-dessus supposent que vous avez visité Comment installer Ghost pour des instructions sur l'installation et l'exécution de Ghost..

Étape 3:

Rendez-vous sur votre panneau d'administration Ghost (en vous connectant si nécessaire), généralement situé à l'adresse http: // localhost: 2368 / ghost.

Étape 4:

Cliquez sur le bouton "PARAMÈTRES" dans le menu supérieur de votre panneau d'administration:

Cela vous mènera à la section "Paramètres> Général" de votre panneau d'administration.

Étape 5:

Faites défiler vers le bas de la page, puis recherchez et développez la liste déroulante "Thème". Vous devriez voir "UberTheme" comme une des options:

Étape 6:

Sélectionnez "UberTheme" dans la liste, puis cliquez sur le bouton bleu "ENREGISTRER" en haut à droite de la page..

Étape 7:

Dans votre navigateur, visitez la partie avant de votre installation Ghost, généralement située à l'adresse http: // localhost: 2368 /.

Résultat: vous ne devriez voir qu'une fenêtre de navigateur blanche et vierge.

Si vous ne voyez pas de fenêtre de navigateur blanche et blanche et que vous voyez quelque chose qui ressemble à l'image ci-dessous, veuillez suivre les étapes ci-dessus et vous assurer que vous avez nommé vos fichiers de modèle correctement:

Complétez la structure des fichiers et des dossiers

Les seuls fichiers absolument nécessaires sont les fichiers modèles "index.hbs" et "post.hbs", comme décrit dans la dernière section..

Cependant, vous souhaiterez utiliser deux autres fichiers dans pratiquement tous les thèmes, même s'ils ne sont pas strictement obligatoires. Nous allons donc les ajouter maintenant. Nous organiserons également une structure de dossiers pour contenir ultérieurement les fichiers supplémentaires ajoutés à votre thème..

Thème Wrapper File

Il ne vous reste plus qu’un fichier de modèle principal dans le dossier racine de votre thème: le fichier "default.hbs"..

Ce fichier crée le code "wrapper" pour votre thème, c’est-à-dire le code de tête et de pied qui sera enroulé autour de chaque page d’un site exécutant votre thème. Il contiendra votre standard , et sections, ainsi que des balises de modèle qui généreront un code Ghost important.

Nous verrons plus tard ce qui doit être écrit dans ce fichier. Pour l'instant, créons simplement le fichier vide lui-même.

Étape 1:

Dans votre éditeur de code préféré, créez un nouveau fichier, puis enregistrez-le dans votre dossier "UberTheme" sous le nom "default.hbs"..

Créez votre dossier Partials

Avec les modèles de guidons, vous avez la possibilité de créer ce que l’on appelle des fichiers modèles "partiels". Ces fichiers de modèles partiels vous permettent de diviser votre thème en composants plus petits pour une structure plus modulaire et mieux organisée..

Par exemple, vous pouvez diviser votre mise en page en sections "en-tête", "principale" et "pied de page", avec le code correspondant à chaque élément contenu dans son propre fichier partiel. Vous verrez ce processus en pratique plus tard. Pour l'instant, nous allons simplement créer le dossier qui sera utilisé pour contenir ces fichiers "partiels".

Étape 1:

Dans l'Explorateur Windows (ou équivalent), accédez au dossier "UberTheme"..

Étape 2:

Créez un nouveau dossier et nommez-le "partiels".

Remarque: Il est important de s'assurer que ce dossier est nommé correctement et qu'il se trouve dans le dossier racine du thème, sinon Ghost ne pourra pas trouver vos fichiers de modèle partiel..

Structure du dossier des actifs

Lorsque nous avons atteint le stade du style, tous vos fichiers liés au style seront placés dans votre dossier "assets", y compris les fichiers CSS, JS, les polices et les images..

Remarque: Vous n'êtes pas obligé de nommer le dossier "assets" - vous pouvez le nommer comme vous le souhaitez. Nous suivons simplement les directives de meilleures pratiques de Ghost dans ce tutoriel..

Étape 1:

Dans l'Explorateur Windows (ou équivalent), accédez au dossier "UberTheme"..

Étape 2:

Créez un nouveau dossier et nommez-le "actifs".

Étape 3:

Naviguez dans votre dossier "assets".

Étape 4:

Créez un nouveau dossier et nommez-le "css".

Étape 5:

Créez un nouveau dossier et nommez-le "polices".

Étape 6:

Créez un nouveau dossier et nommez-le "images".

Étape 7:

Créez un nouveau dossier et nommez-le "js".

Votre fichier de thème et votre structure de dossiers doivent maintenant ressembler à ceci:

Ajouter votre fichier de style

Techniquement, l'ajout de votre fichier de feuille de style pourrait être appelé une partie du processus de style. Cependant, nous allons écrire le section dans la prochaine étape du tutoriel, et dans le cadre de cela, nous voudrons lier la feuille de style de votre thème et vérifier son chargement.

Pour cela, nous allons créer une feuille de style qui ajoutera une couleur d’arrière-plan à votre thème afin que nous puissions ensuite nous assurer qu’elle est liée à votre thème. section correctement.

Étape 1:

Dans votre éditeur de code préféré, créez un nouveau fichier..

Étape 2:

Ajoutez le CSS suivant au fichier:

body background-color: # F0F0F0; 

Étape 3:

Enregistrez le fichier dans votre dossier "UberTheme> assets> css" sous le nom "style.css"..

Écrire le fichier default.hbs

Nous allons maintenant écrire le code de modélisation de votre thème, en commençant par le fichier "default.hbs". (Voir ci-dessus pour un résumé de ce que ce fichier est pour).

Remarque: Pour différencier les balises html des balises de modèle de guidon, nous utiliserons soit le terme "balises HTML", soit "balises de modèle", afin que vous sachiez à quel type il est fait référence..

Étape 1:

Dans votre éditeur de code préféré, ouvrez votre fichier "default.hbs" à partir du dossier racine du thème, c'est-à-dire "UberTheme"..

Étape 2:

Ajoutez le code suivant:

    ! Paramètres du document   ! Balises Meta réactives       

Tout ce que nous avons fait ici est d’ajouter les balises essentielles doctype, html, head et body. Nous avons également ajouté des balises méta de base pour définir le jeu de caractères, activer Chrome Frame (si disponible) ou le mode Edge (le plus haut disponible) pour IE et initialiser notre affichage réactif..

Remarque: Dans le code ci-dessus, vous verrez également deux exemples de la manière dont les commentaires peuvent être écrits dans les fichiers de guidon (commentaires "Paramètres de document" et "Balises méta réactives"). Les commentaires sont différenciés lorsqu'un point d'exclamation est ajouté immédiatement après l'ouverture de deux ensembles d'accolades, la fin du commentaire étant marquée par deux ensembles fermants d'accolades. Voici un autre exemple:

 ! Votre commentaire ici

Étape 3:

Ajoutez l'extrait suivant juste au-dessus du ! Balises Meta réactives code:

 ! Méta de page  

Cela ajoute des balises meta html spécifiques à la page..

Étape 4:

Ajoutez l'extrait suivant au-dessus du ! Balises Meta réactives code et directement en dessous de la page méta les lignes de balises HTML que vous avez précédemment ajoutées:

 ! Modes  

Cela ajoute le lien externe à votre feuille de style.

Remarque: Vous n'avez pas besoin d'un chemin complet vers votre feuille de style, seulement d'un chemin relatif au dossier racine de votre thème..

Étape 5:

Ajouter ce qui suit au-dessus de la fermeture balise html:

 ghost_head

Ghost utilise cette balise pour afficher le style et les métadonnées importants dans la section head..

Remarque: Pour ceux qui ont un fond de thème WordPress, vous pouvez comparer cela à l'inclusion de wp_head () dans tous les thèmes sections.

Étape 6:

Remplacez le balise html avec le code suivant:

Cette balise de modèle générera un nom de classe CSS différent en fonction de la zone du site en cours de chargement:

• Sur la page d'accueil: "home-template"
• Sur les pages de publications plus anciennes accessibles via la pagination: "archive-template"
• Sur un seul post: "post-template"

Étape 7:

Sous le

 ghost_foot

    ! Paramètres du document   ! Méta de page   ! Modes   ! Balises Meta réactives    ghost_head   
 corps 
 ghost_foot  

 !< default