Share
In diesem Lernprogramm werde ich Sie durch alle wichtigen Aspekte der Verwendung der integrierten AMP-Unterstützung von Ghost führen.
Hinweis: In diesem Artikel wird davon ausgegangen, dass Sie bereits mit der Erstellung von gültigen AMP-Seiten vertraut sind und sich daher auf die Details konzentrieren, die für die gemeinsame Verwendung von Ghost und AMP gelten. Wenn Sie neu bei AMP sind, überprüfen Sie Folgendes:
Ich gehe außerdem davon aus, dass Sie über Kenntnisse verfügen, wie Sie ein typisches Ghost-Thema erstellen können. Wenn nicht, können Sie wie lesen, indem Sie lesen:
Tatsächlich bietet Ghost eine automatische AMP-Unterstützung, ohne dass Sie einen Finger heben müssen. Die AMP-Version eines Posts kann nur durch Anhängen aufgerufen werden /Ampere/ zu seiner URL. Die reguläre Version eines Posts enthält automatisch einen Link in der In diesem Abschnitt wird Google mitgeteilt, dass diese AMP-Version verfügbar ist.
Wenn Sie aufgrund dieser automatisierten Funktionalität einen Ghost-Beitrag mit Chrome besuchen und die Erweiterung AMP Validator installiert ist, wird ein kleines blaues Link-Symbol angezeigt, das darauf hinweist, dass eine AMP-Version der Seite erkannt wurde.
Klicken Sie auf das Symbol, um zur AMP-Version des Beitrags zu gelangen. Dann wird das Symbol grün angezeigt, um den gültigen AMP-Code anzuzeigen.
Diese automatisierte AMP-Unterstützung gilt jedoch nur für einzelne Posts. Andere Arten von Inhalten wie Ihre Homepage oder Tag-Seiten haben keine AMP-Versionen, es sei denn, Sie entwickeln Ihr gesamtes Design manuell, um vollständig aus AMP-kompatiblem Code zu bestehen.
Standardmäßig wird die Präsentation von AMP-Posts in Ghost von einer internen Vorlage gesteuert. Um zu sehen, wie diese Vorlage zusammengestellt wird, und um eine Referenz zu erhalten, wie AMP mit Ghost funktioniert, finden Sie diese Standardvorlage in Ihrer Ghost-Installation unter /core/server/apps/amp/lib/views/amp.hbs
Wenn Sie es vorziehen, Ihre AMP-Posts mit eigenen Markierungen und Stylings zu versehen, müssen Sie eine Vorlage mit dem Namen "amp.hbs" erstellen.im Stammordner Ihres Designs.
Ihre AMP-Vorlage kann nicht auf die reguläre Vorlage "default.hbs" erweitert werden, wie Sie dies normalerweise beim Erstellen von Ghost-Designvorlagen tun würden. Es sollte vielmehr als komplettes eigenständiges HTML-Dokument erstellt werden html, Kopf und Karosserie Elemente.
Der Grund dafür ist, dass Sie Folgendes sicherstellen müssen:
Accentsconagua
Kopf SektionEine „default.hbs“ -Datei in einem typischen Ghost-Design würde die oben genannten Anforderungen nicht erfüllen. Daher muss ein eigenständiges „amp.hbs“ vorhanden sein..
In Ihren AMP-Vorlagen müssen Sie einige Dinge mit CSS beachten.
Erstens, wenn Sie eine benutzerdefinierte Schriftart aus einer der genehmigten Quellen laden, stellen Sie sicher, dass Sie dies auf eine gültige Weise tun. Beispielsweise könnte eine Google-Schriftart über eine URL wie geladen werden //fonts.googleapis.com in Ihrer Vorlage "default.hbs", aber um die Validierung in Ihrer Vorlage "amp.hbs" zu bestehen, müssen Sie dies in ändern https://fonts.googleapis.com
Die andere Hauptüberlegung ist, dass Sie alle Ihre benutzerdefinierten CSS-Inlinezeilen dazwischen haben müssen Tags in der Abschnitt, wobei Ihr CSS 50kb nicht überschreitet und keine AMP-CSS-Regeln verletzt.
Es gibt zwei Möglichkeiten, dies zu tun:
Wenn Ihre „normale“ Site wirklich etwas Schwergewichtiges CSS benötigt, benötigen Sie möglicherweise die erste Option, aber ansonsten können Sie die letztere leichter finden.
Wenn Sie das gesamte Stylesheet Ihrer Website unter 50 KB halten, kann dies als erschreckend erscheinen, da einige beliebte CSS-Frameworks eher im Bereich von 120 KB bis 150 KB liegen. Wenn Sie jedoch das 50-KB-Ziel vor Augen haben, ist dies durchaus erreichbar. Beispielsweise beträgt das nicht minimierte CSS des Ghost-Standarddesigns Casper 45,5 KB.
Wenn Sie diesen Ansatz verwenden möchten, können Sie eine Teilvorlage mit dem Namen "css.hbs" erstellen und den gesamten CSS-Code Ihrer Site direkt in den Code einfügen. Dann können Sie in Ihrer Vorlage "default.hbs" dieses CSS laden mit:
Und in Ihrer "amp.hbs" Vorlage verwenden Sie stattdessen:
Um das meiste aus Ihrem CSS herauszuholen, können Sie es auch minimieren, bevor Sie es in dieses Partial einfügen. Sie können die Dateigröße dieses Teils überwachen, um eine ziemlich gute Vorstellung davon zu erhalten, ob Sie die 50-KB-Grenze nicht überschreiten.
Im Kopfbereich Ihrer Vorlage "amp.hbs" müssen Sie den Ausdruck einfügen amp_ghost_head anstelle des Üblichen ghost_head. Dadurch wird sichergestellt, dass kein JS im Kopf ausgegeben wird, was die AMP-Validierung beeinträchtigen würde.
Im Gegensatz zu regulären Ghost-Vorlagen sollten Sie das. Weglassen ghost_foot Ausdruck alle zusammen.
Der gesamte Inhalt eines Beitrags kann in der Vorlage „amp.hbs“ mithilfe des Blockausdrucks angezeigt werden post… / post. Zwischen diesen Tags können Sie die folgenden Helfer zur Ausgabe von Inhalten verwenden:
Sie können auch auf alle zugreifen @blog globale Daten aus der Vorlage "amp.hbs", z @Blog Titel und @Blog URL, ob innerhalb oder außerhalb der post… / post Ausdruck.
Wie Sie wissen, erfordert AMP eine Reihe seiner eigenen benutzerdefinierten Elemente anstelle von regulären HTML-Elementen. Dies bedeutet, dass es zwei Aspekte Ihrer Ghost-Sites gibt, bei denen Sie sicherstellen müssen, dass die richtigen AMP-Elemente verwendet werden:
In Ihrem Post-Inhalt kann Ghost Bilder, Iframes, Gifs und Audio-Elemente automatisch erkennen und sie dann in ihre AMP-Pendants umschreiben.
Um dies zu aktivieren, müssen Sie einschließen amp_components in Ihrem Kopfbereich, kurz vor dem Schließen tag, der alle zusätzlichen erforderlichen benutzerdefinierten AMP-Skripts ausgibt. Sie müssen auch verwenden amp_content anstatt Inhalt So wird das richtige Markup für benutzerdefinierte Elemente erstellt.
Für den Code in der Vorlage „amp.hbs“ müssen Sie jedoch alle erforderlichen AMP-Elemente manuell hinzufügen. Wenn Sie beispielsweise das Bild des Beitrags einschließen möchten, das Sie verwenden würden:
Dies deckt alle Grundlagen ab, um die integrierte AMP-Unterstützung von Ghost zu nutzen. Lassen Sie uns kurz die wichtigsten Punkte zusammenfassen:
amp_ghost_head anstatt ghost_head ghost_footamp_components kurz vor dem Schluss post… / post Blockausdruck und alles @blog globale Daten.amp_content Inhalt ausgeben. Dies sollte in der post… / post Block.Damit sind wir am Ende dieses kurzen Tutorials. Halten Sie Ausschau nach weiteren Tipps zur Verwendung von AMP mit anderen Website-Erstellungsplattformen, die in Kürze verfügbar sind!
