Share
Dans ce tutoriel, je vais vous expliquer tous les aspects clés de l'utilisation du support AMP intégré de Ghost..
Remarque: cet article suppose que vous sachiez déjà comment créer des pages valides AMP et, en tant que tel, sera consacré aux détails propres à l'utilisation simultanée de Ghost et AMP. Si vous êtes nouveau sur AMP, consultez:
Je suppose également que vous savez comment créer un thème Ghost typique. Sinon, vous pouvez apprendre comment en lisant:
En réalité, Ghost prend en charge automatiquement l’AMP, sans que vous ayez à lever le petit doigt. La version AMP de tout article peut être visitée simplement en ajoutant / amp / à son URL. La version normale de tout article comprendra aussi automatiquement un lien dans la section permettant à Google de savoir que cette version AMP est disponible.
Grâce à cette fonctionnalité automatisée, si vous visitez une publication Ghost utilisant Chrome avec l'extension AMP Validator installée, une petite icône de lien bleue indiquant qu'une version AMP de la page a été détectée s'affiche..
Cliquez sur l'icône pour accéder à la version AMP de la publication. L'icône devient alors verte pour indiquer un code AMP valide..
Ce support AMP automatisé ne concerne toutefois que les publications uniques. D'autres types de contenu, tels que votre page d'accueil ou vos pages de balises, n'auront pas de version AMP, sauf si vous développez manuellement l'intégralité de votre thème pour qu'il soit entièrement construit à partir de code compatible AMP..
Par défaut, la présentation des publications AMP sur Ghost est contrôlée par un modèle interne. Pour voir comment ce modèle est assemblé et obtenir une référence sur le fonctionnement de AMP avec Ghost, vous pouvez trouver ce modèle par défaut dans votre installation Ghost à l'adresse suivante: /core/server/apps/amp/lib/views/amp.hbs
Si vous préférez utiliser vos propres balises et styles pour vos publications AMP, vous devez créer un modèle nommé "amp.hbs".dans le dossier racine de votre thème.
Votre modèle AMP ne pourra pas s’étendre sur le modèle standard «default.hbs», comme vous le feriez habituellement lors de la création de modèles de thème Ghost. Plutôt, il devrait être créé comme un document HTML autonome complet avec ses propres html, tête et corps éléments.
La raison en est que vous devez vous assurer:
Accentsconagua
tête sectionUn fichier «default.hbs» dans un thème Ghost typique ne répondrait pas aux exigences ci-dessus, d’où la nécessité de disposer d’un «amp.hbs» autonome..
Il y a plusieurs choses à prendre en compte avec CSS dans vos modèles AMP.
Premièrement, si vous chargez une police personnalisée à partir de l’une des sources approuvées, assurez-vous de le faire d’une manière AMP valide. Par exemple, une police Google peut être chargée via une URL telle que //fonts.googleapis.com dans votre modèle «default.hbs», mais pour réussir la validation dans votre modèle «amp.hbs», vous devez le changer en https://fonts.googleapis.com
L’autre considération primordiale est que vous aurez besoin de tous vos CSS personnalisés en ligne entre balises dans le section, avec votre CSS ne dépassant pas 50kb et ne brisant aucune règle CSS AMP.
Il y a deux façons d'aborder cela:
Si votre site "normal" a vraiment besoin de CSS lourds, vous aurez peut-être besoin de la première option, mais sinon, il vous sera peut-être plus facile d'utiliser la dernière..
Garder la feuille de style de votre site inférieure à 50 Ko pourrait sembler décourageant, étant donné que certains frameworks CSS populaires sont plus proches de 120 Ko à 150 Ko, mais si vous partez de l'objectif 50 Ko, c'est tout à fait réalisable. Par exemple, le CSS non minié du thème par défaut Ghost Casper est 45.5kb.
Si vous souhaitez utiliser cette approche, vous pouvez créer un modèle partiel nommé «css.hbs» et placer tout le code CSS de votre site directement à l'intérieur. Ensuite, dans votre modèle «default.hbs», vous pouvez charger ce CSS avec:
Et dans votre modèle «amp.hbs», utilisez plutôt:
Pour tirer le meilleur parti de votre CSS, vous pouvez également le réduire avant de le placer dans ce partial. Vous serez en mesure de surveiller la taille de fichier de ce partiel pour avoir une bonne idée si vous êtes dans la limite de 50 Ko..
Dans la section head de votre modèle «amp.hbs», vous devez inclure l'expression. amp_ghost_head au lieu de l'habituel ghost_head. Cela garantira qu'aucun JS n'est émis en tête, ce qui briserait la validation AMP.
Et, contrairement aux modèles Ghost classiques, vous devez omettre le ghost_foot expression tous ensemble.
Tout le contenu d'une publication peut être exposé dans le modèle «amp.hbs» à l'aide de l'expression de bloc. post… / post. Entre ces balises, vous pouvez utiliser les aides suivantes pour générer du contenu:
Vous pouvez également accéder à tous @Blog des données globales depuis le modèle «amp.hbs», telles que @Titre du Blog et @ blog.url, que ce soit à l'intérieur ou à l'extérieur du post… / post expression.
Comme vous le savez, AMP nécessite que ses propres éléments personnalisés soient utilisés à la place des éléments HTML classiques. Cela signifie que vous devez vous assurer que les bons éléments AMP sont utilisés pour deux aspects de vos sites Ghost:
Dans votre message, Ghost peut détecter automatiquement les images, les iframes, les gifs et les éléments audio, puis les réécrire dans leurs homologues AMP..
Pour l'activer, vous devez inclure amp_components dans votre tête, juste avant la fermeture balise, qui générera tous les scripts supplémentaires des éléments personnalisés AMP requis. Vous aurez également besoin d'utiliser amp_content au lieu de contenu de sorte que le balisage correct pour les éléments personnalisés est produit.
En ce qui concerne le code dans votre modèle «amp.hbs», vous devrez toutefois ajouter manuellement les éléments AMP requis. Par exemple, si vous souhaitez inclure l'image sélectionnée du message, vous utiliserez:
Cela couvre l'essentiel de l'utilisation du support AMP intégré de Ghost. Faisons un bref récapitulatif des points clés:
amp_ghost_head au lieu de ghost_head ghost_footamp_components juste avant la fermeture post… / post expression de bloc et tout @Blog données globales.amp_content pour afficher le contenu. Cela devrait être placé à l'intérieur du post… / post bloc.Cela nous amène à la fin de ce rapide tutoriel. Restez à l'affût pour plus de conseils sur l'utilisation d'AMP avec d'autres plateformes de création de sites.!
