Accentsconagua

Mise à jour Quoi de neuf dans les thèmes Ghost

Création de sites web
Share

Depuis que notre série de tutoriels de création de thèmes Ghost originale a été publiée fin 2013, un lot de nouveaux changements sont passés par l'API de thématisation. Il y a de nouvelles exigences pour les thèmes, quelques éléments qui sont obsolètes et une grande pile de nouveaux assistants, contextes, modèles et fonctionnalités ajoutées..

Dans ce tutoriel, nous allons prendre «UberTheme», le thème traité dans la leçon six de la série, et le mettre à jour pour le mettre en conformité avec les exigences actuelles, et inclure quelques-uns des derniers ajouts à Ghost..

Nous ne mettrons pas en œuvre chaque nouvelle fonctionnalité dans notre thème car il y en a trop pour un tutoriel, mais nous allons passer en revue plusieurs de ces nouvelles fonctionnalités.

Nouvelles exigences:

Fichier “package.json”

Les thèmes nécessitent maintenant un fichier “package.json” pour définir le nom du thème. Ce fichier peut également contenir le numéro de version du thème.

Dans le dossier racine de votre UberTheme, créez un fichier nommé “package.json” et ajoutez le code suivant:

"name": "UberTheme", "version": "1.0.1"

Pour le moment, les thèmes n'utilisent que ces deux champs, mais à mesure que l'écosystème Ghost se développe, des champs supplémentaires seront ajoutés pour afficher les informations relatives aux développeurs et faciliter la gestion des mises à niveau et de la compatibilité..

Plus d'informations peuvent être trouvées dans les documents de développement Ghost.

Utilisation de l'aide asset

Lors du chargement de CSS, de JS ou d’images à partir du dossier «assets» du thème, vous devez maintenant utiliser le atout assistant. Cela facilite la mise en cache, garantit des chemins de chargement corrects et assure que les thèmes sont structurés de manière uniforme afin que les utilisateurs puissent compter sur la recherche d'un dossier «actifs» correctement utilisé dans n'importe quel thème..

Ouvrez le fichier «default.hbs» d'UberTheme pour le modifier et localisez les lignes 12 à 14:

  ! Scripts

Editez-les pour utiliser le atout assistant comme suit:

  ! Scripts

En savoir plus dans les documents de développement Ghost.

Obsolète

Nous n'avons en fait utilisé aucun des éléments suivants dans UberTheme, vous n'avez donc pas besoin de modifier le thème en raison de la dépréciation. Toutefois, dans vos autres projets sur les thèmes Ghost, assurez-vous de ne plus utiliser ces fonctionnalités:

pageUrl Helper

Auparavant, cette aide pouvait être utilisée dans les modèles de pagination. Maintenant, utilisez L'URL de la page au lieu.

author.email

Cet assistant est supprimé et ne génère plus qu'une chaîne vide. Vérifiez vos sections auteur et assurez-vous qu'il n'est pas utilisé.

Des classes modèle d'archive et page

Auparavant, ces classes étaient sorties si vous utilisiez le body_class aide, mais ne sont plus en place.

Sur les pages, post-modèle Classe

le post-modèle classe utilisée pour être sortie via le body_class assistant sur les pages, mais apparaît maintenant que sur les messages.

Nouveaux contextes et modèles

Ghost a un certain nombre de «contextes» dans lesquels vous pourriez vous retrouver lorsque vous naviguez sur un blog. Par exemple, lorsque vous lisez un seul message, vous vous trouvez dans le contexte "message". Il existe maintenant plusieurs contextes récemment ajoutés qui affichent différents types de contenu. Ci-dessous, nous allons couvrir les nouveaux contextes “auteur”, “page”, “tag” et “home”.

En plus de ces nouveaux contextes, il existe également plusieurs nouveaux modèles que vous pouvez ajouter à votre thème pour améliorer le contrôle de la présentation. Notez que si vous ajoutez de nouveaux modèles à votre thème, vous devrez redémarrer Ghost pour que ceux-ci soient récupérés par le système et deviennent opérationnels..

Pages statiques / Contexte de page et modèles de page personnalisés

Ghost prend désormais en charge les pages statiques ainsi que les publications, le rendant parfait à bien des égards pour créer un site de petite entreprise typique de cinq pages. Pour créer une page statique, commencez par ajouter un article puis cliquez sur le petit équipement icône dans le coin inférieur droit de l'interface d'édition. Cochez ensuite la case dans la barre latérale des paramètres intitulée Transformez ce post en une page statique.

Ajoutez un modèle «page.hbs» à votre thème pour contrôler le style de page statique ou laissez-le utiliser le modèle «post.hbs»..

Dans UberTheme, dupliquez le modèle «post.hbs» existant et renommez-le en «page.hbs». Nous allons supprimer le balisage de ce modèle dont les pages n'ont pas vraiment besoin, c'est-à-dire la date affichée, les balises, la barre de partage, les informations sur l'auteur et la pagination..

Localisez le élément de la ligne 7 et supprimez-le:

Supprimez maintenant tout le chemin de la ligne 12:

#if tags

… Jusqu'à la ligne 38, juste avant la fermeture étiquette:

  /si

Puis supprimez également de ce qui est maintenant la ligne 14 à la ligne 18:

#if pagination 
 pagination 
 /si

Vos pages doivent maintenant apparaître uniquement avec le titre et le contenu de la page:

Des modèles pour des pages spécifiques peuvent également être créés avec la syntaxe de dénomination de fichier "page - slug. Hbs", par exemple. "Page-contact-us.hbs".

Plus d'informations dans les documents de développement Ghost.

Page auteur / contexte et modèle d'auteur personnalisé

Maintenant que Ghost prend en charge plusieurs utilisateurs, il est possible de voir une liste de tous les messages écrits par un auteur particulier. Afin de fournir un accès facile à ces listes de publications d'auteur, vous devez ajouter l'attribution d'auteur à l'affichage des publications de votre thème..

Premièrement, nous allons ajouter une attribution d’auteur à UberTheme en éditant le fichier «index.hbs» et en ajoutant le code suivant juste avant le contenu étiquette:

Écrit par auteur

Vous voudrez aussi faire la même addition dans le fichier “post.hbs”.

À partir du dossier «LESS» de votre projet de thème, modifiez également le fichier «layout.less» et ajoutez ce style pour mettre en italique le texte de l'auteur:

.author font-style: italic;

Vous devriez maintenant avoir une attribution d'auteur en haut de vos posts, comme ceci:

Vous remarquerez que le nom de l'auteur est automatiquement lié. Ce lien permet d'afficher tous les articles de l'auteur en question. Par défaut, cette liste de publications d’auteurs utilise le modèle «index.hbs», mais vous pouvez également personnaliser la présentation avec un modèle nommé «author.hbs»..

Pour les modèles spécifiques à l'auteur, utilisez la syntaxe de dénomination de fichier "author - slug. Hbs", par exemple. «Auteur-kezz.hbs».

Encore une fois, on peut en trouver plus à ce sujet dans la documentation du développeur Ghost..

Pages de balises / Contexte de balises et modèles de balises personnalisés

Lorsque vous utilisez le Mots clés aide à afficher les balises associées aux publications, chaque balise sera désormais liée à une page contenant tous les publications portant la même balise.

Créez un fichier de modèle «tag.hbs» si vous souhaitez personnaliser l'affichage de la page de balises de votre thème ou laissez-le basculer dans le fichier «index.hbs»..

Pour ajouter une page de balises à UberTheme, dupliquez le modèle «index.hbs» et renommez-le en «tag.hbs». Directement après l'ouverture

tag ajouter ce code:

#étiquette 
 
Articles étiquetés: name
 
 /étiquette

Cela ajoutera un en-tête à vos pages de liste de balises indiquant le nom de la balise actuelle..

Dans votre fichier "layout.less", après la .article_uber style de sélecteur, ajoutez ce code:

.tag_heading taille de la police: 2rem; rembourrage: 0 0 2rem 0; text-align: center; marge inférieure: 0,25 rem;

Lorsque vous accédez à une page de liste de balises, vous devriez maintenant avoir une section d'en-tête comme celle-ci:

Pour créer différents modèles pour des balises spécifiques, utilisez la syntaxe de dénomination de fichier «balise - slug. Hbs». Cela peut être très utile, par exemple, pour créer des galeries d'images à partir de messages étiquetés «galerie», par exemple, à l'aide d'un modèle nommé «tag-gallery.hbs»..

Home Context / Home Template

Vous souhaiterez peut-être utiliser un modèle différent pour votre page d'accueil que pour les listes de publication ultérieures que vous parcourez. Par exemple, vous pouvez avoir une grande image de couverture ou un diaporama sur votre page d'accueil que vous ne voulez pas que les visiteurs aient à défiler à nouveau sur la page suivante de messages.

Pour personnaliser l’affichage de votre page d’accueil, créez un modèle nommé "home.hbs"..

Plus d'informations dans les documents de développement Ghost.

Pages d'erreur personnalisées

Si vous souhaitez contrôler la présentation exacte des pages d'erreur, vous pouvez maintenant créer un modèle nommé «error.hbs»..

Pour en savoir plus, consultez la documentation pour développeurs Ghost (pouvez-vous deviner?)!

Nouveaux aides

Ghost a introduit plusieurs nouveaux assistants; type de balises de gabarit qui vous aident à afficher certains types de contenu dans votre thème.

navigation Helper

Il est maintenant possible de créer des menus de navigation de base dans Ghost, en allant sur Paramètres> Navigation dans la zone d'administration.

Pour faire apparaître un menu de navigation dans votre UberTheme, ouvrez le fichier “header.hbs” du dossier “partials” et ajoutez ce code avant la dernière balise div:

Dans le dossier «LESS» du projet, ouvrez «layout.less» et localisez le .header_uber classe. Dans ce document, à la ligne 33, modifiez le rembourrage en bas valeur de:

padding-bottom: 3 * @golden + 0em;

… à:

padding-bottom: 1.5 * @golden + 0em;

Ajoutez ensuite le code suivant pour styler votre nouveau menu de navigation:

ul.nav list-style-type: none; marge supérieure: 1,5 * @golden + 0em; rembourrage: 0; affichage: flex; justifier-contenu: centre; bord supérieur: 0,0625 solide éclairé (@ color_03, 33%); bord inférieur: 0,0625 solide éclairé (@ color_03, 33%); couleur de fond: éclaircir (@ color_03, 42%); li marge: 0 0,25 em; rembourrage: 0.75em 1em; une text-decoration: none;

Remarque: Nous utilisons ici flexbox pour une mise en place rapide et facile des menus, mais si vous avez besoin de prendre en charge des navigateurs traditionnels, vous pouvez utiliser une approche différente..

Votre thème devrait maintenant avoir un menu de navigation qui ressemble à ceci:

En savoir plus sur la navigation dans le… vous savez.

image Helper

Ghost offre maintenant la possibilité d'ajouter une image sélectionnée à n'importe quel message. Pour ajouter une image, cliquez sur la petite icône représentant un engrenage en bas à droite de l'interface de post-édition, puis cliquez sur le bouton Ajouter une image carré en haut de la barre latérale qui apparaît. Vous pouvez également faire glisser une image dessus.

Pour afficher l’image de la publication, utilisez la commande image assistant. Dans UberTheme, ouvrez le fichier “index.hbs” et localisez le fichier contenu tag sur la ligne 12:

 contenu

Juste au-dessus, ajoutez un élément d'image à l'aide de la commande image assistant dans le src attribut. Nous allons également utiliser le titre de l'article dans le alt attribuer, et l'envelopper avec un #if image… / if assurez-vous qu'il y a une image à montrer:

 #if image Titre / if content

Vous devriez maintenant pouvoir voir toute image de message ajouté juste en dessous du titre du message dans votre thème, comme ceci:

Allez, docs.

#has Aide

Le nouveau #a helper vous permet de vérifier si un article a un auteur en particulier et / ou certaines balises associées. Cela vous permet, par exemple, de créer différents types de présentation pour différents auteurs ou, dans le cas de balises, de configurer différents types de publications similaires aux thèmes Tumblr ou aux formats de publication WordPress..

Par exemple, vous pouvez faire en sorte que tous les messages marqués «photo» soient présentés avec une mise en page spéciale, que tous les messages marqués «vidéo» soient présentés à leur manière et que d'autres messages retombent dans le balisage par défaut:

#has tag = "photo" Présentation photo spéciale après else # tag = "vidéo" Présentation vidéo spéciale ici else Revenir à la présentation par défaut / a / a

Docs.

# Aide

Jusqu'à présent, nous avons examiné de nombreux nouveaux «contextes» au sein d'un site Ghost, tels que «post», «auteur», «page», «tag» et «maison». le #est helper vous donne un moyen de contrôler la sortie dans un modèle en fonction du contexte dans lequel le modèle est utilisé..

Par exemple, au lieu de créer un modèle «tag.hbs» différent, comme ci-dessus, vous pouvez ajouter les éléments suivants à votre fichier «index.hbs»:

# "balise" # tag 
 
Articles étiquetés: name
 
 / tag / is

le # "balise" La ligne vérifie si le contexte actuel est une «balise», c’est-à-dire que le téléspectateur regarde une liste de publications sous une certaine balise et n’affiche alors le titre de la balise..

Lire la suite.

Aides # # Prev_post et #next_post

Si vous le souhaitez, vous pouvez maintenant ajouter un Prochain Post et un Post précédent lien permettant aux lecteurs de passer directement d’une publication à l’autre. Ces liens doivent être ajoutés au modèle “post.hbs”.

Voici un exemple de mise en œuvre de ces liens (à partir de la page de documentation Ghost):

#poster 
Titre
 
 contenu 
 #prev_post title / prev_post #next_post title / next_post / post

Modèles de remplacement

Tous les modèles que nous avons abordés jusqu’à présent correspondent à certains contextes. Cependant, certains peuvent être utilisés pour contrôler la sortie de certains assistants, par exemple:. la navigation et pagination. Par défaut, Ghost gère automatiquement la sortie de ces aides, mais vous avez la possibilité de définir votre propre sortie dans votre thème..

Modèle de navigation

La sortie de balisage par défaut du la navigation assistant est:

     #foreach navigation 
  • étiquette
    •  /pour chaque

Pour utiliser votre propre balise de navigation à la place, créez un fichier nommé «navigation.hbs» et placez-le dans le répertoire partials de votre thème..

Lire la suite dans la documentation.

Modèle de pagination

La possibilité de créer un modèle personnalisé pour le pagination helper n’est pas vraiment nouveau, mais c’est quelque chose que nous n’avons pas couvert précédemment dans la série et mérite donc d’être mentionné ici. Le défaut pagination Le code dans Ghost est:

Remplacez ce code par le vôtre en créant un modèle nommé «pagination.hbs» dans le dossier «partiels» de votre thème..

Plus ici dans les docs.

Fonctionnalités supplémentaires

En plus de nouveaux contextes, modèles et aides, Ghost a également ajouté quelques éléments supplémentaires au mixage..

Postes en vedette

Si vous souhaitez marquer un article spécifique comme «En vedette», l'interface d'administration existe désormais de deux manières..

Dans l'espace d'administration répertoriant tous vos messages, cliquez sur la petite étoile dans le coin supérieur gauche de la fenêtre d'aperçu..

Dans l’éditeur de messages, cliquez sur la petite icône représentant une roue en bas à droite de l’écran, puis cochez la case intitulée Mettre en vedette ce post.

Dans votre thème, si vous souhaitez utiliser un balisage différent pour les articles en vedette, vérifiez si un article est en vedette avec #if en vedette

#foreach posts #if en vedette  autre  / if / foreach

Les articles en vedette portent aussi la classe En vedette vous permettant de les cibler pour un style différent dans votre CSS. Pour que cette classe soit sortie, incluez le post_class aide sur vos messages. 

Par exemple, dans les fichiers «index.hbs», «post.hbs» et «page.hbs» de UberTheme, changez cette ligne:

… à:

Par défaut, les publications en vedette ne sont pas placées au-dessus des autres publications, elles occupent leur position habituelle en fonction du moment où elles ont été publiées. Cependant, si vous souhaitez que les articles en vedette soient publiés en premier, vous aurez besoin de deux boucles: une pour les articles en vedette et une pour les articles ordinaires..

#foreach posts #fourni ! - Afficher les messages en vedette ici - / if / foreach #pour les publications #unless en vedette ! - Afficher les articles réguliers ici - / si / foreach

Tout le monde chante maintenant: lisez la documentation.

Favicons personnalisés

Pour définir un favicon personnalisé, placez votre fichier «favicon.ico» dans le dossier «assets» et chargez-le dans le dossier. section de votre thème avec

asset "/favicon.ico"

En savoir plus sur Wikipedia (blague, essayez les documents Ghost).

Emballer

C'est beaucoup de nouveaux pouvoirs ajoutés au développement de thèmes Ghost, avec une pléthore de nouvelles opportunités pour le développement de thèmes créatifs.!

Pour résumer, nous avons:

  • Fichier “package.json” et atout utilisation d'assistance maintenant requise
  • Navigation ajoutée, avec la possibilité de personnaliser sa sortie HTML
  • Images en vedette ajoutées
  • Nouveaux assistants permettant plus d'options dans le balisage
  • Pages statiques et modèles personnalisés pour celles-ci
  • Marquer des pages et des modèles personnalisés pour eux
  • Créez des pages et des modèles personnalisés pour eux
  • Modèle de page d'accueil
  • Modèle d'erreur personnalisé
  • Postes en vedette
  • Favicons personnalisables

Même avec tout ce que nous avons couvert ici, il y a encore plus de nouvelles aides et fonctionnalités disponibles dans Ghost, ainsi que plus de détails sur tout ce qui précède, alors assurez-vous d'avoir une bonne lecture sur themes.ghost.org pour en savoir plus. et outs.

Ci-joint à ce didacticiel, vous trouverez un téléchargement du fichier source où vous pourrez obtenir le thème mis à jour, ainsi que le fichier «layout.less» modifié. Utilisez UberTheme comme terrain de test pour vous familiariser avec tout ce qui est nouveau dans Ghost, puis allez-y et créez des thèmes géniaux.!

Marché Envato

N'oubliez pas de vérifier la catégorie Ghost sur Envato Market!

Création de sites web
×