Share
Das AMP-Projekt bietet eine relativ einfache Möglichkeit, verschiedene Arten der Webseitenoptimierung zu implementieren. Sie können unseren vollständigen Überblick über das Projekt und seine Arbeit in AMP Project lesen: Wird es Ihre Websites schneller machen??.
Um zusammenzufassen, wie AMP implementiert wird, werden Sie:
Nachdem Sie die drei oben genannten Schritte ausgeführt haben, wird der Rest des Optimierungsprozesses für Sie hinter den Kulissen erledigt. Darüber hinaus müssen AMP-Seiten einen Validierungstest bestehen, und um diesen Test zu bestehen, müssen alle Best-Practice-Regeln beachtet werden.
Eine der Regeln von AMP kann jedoch während der Entwicklung etwas unhandlich sein, und dies ist die Anforderung, dass alle benutzerdefinierten CSS inline geladen werden müssen Kopf Abschnitt zwischen einem Satz von Stichworte.
Wenn Sie Ihr CSS manuell in Ihre Seiten schreiben ' Kopf Abschnitte, denen Sie Probleme und Einschränkungen gegenüberstehen. Wenn Sie das CSS auf mehreren Site-Seiten ändern müssen, ist dies mühsam und Sie haben keine Möglichkeit, CSS-Erweiterungswerkzeuge wie Präprozessor oder Minifier zu verwenden.
Wenn Sie also mehr als eine AMP-Vorlage erstellen, sollten Sie eine Möglichkeit finden, Ihr CSS in ein externes Stylesheet zu schreiben, damit der gewohnte Workflow beibehalten wird, und dennoch die AMP-Validierung bestehen, indem Sie Ihr gesamtes CSS in den Kopf stellen Abschnitt nach der Tatsache.
In diesem kurzen Tipp erfahren Sie zwei Möglichkeiten, wie Sie genau das tun können.
Jade ist eine Sprache, die man sich wie einen Präprozessor für HTML vorstellen kann. Es erlaubt Ihnen, HTML in einer kurzen, kurzen Form zu schreiben, die in normales HTML übersetzt wird. Am wichtigsten ist jedoch, dass Sie das betreffende Thema auch importieren und CSS-Dateien importieren können, um den gesamten Inhalt an beliebiger Stelle ausgeben zu können.
Bei dieser Methode schreiben Sie Ihre AMP-Vorlagen mit der Jade-Syntax und importieren eine externe CSS-Datei in den Kopfbereich jeder Ihrer Vorlagen. Dies ist eine der besten Methoden, die Sie zum Erstellen von AMP-Seiten verwenden können, wenn Sie statisches HTML ausgeben müssen. So gehen Sie vor.
Als erstes müssen Sie das externe Stylesheet einrichten, das Sie in Ihre AMP-Vorlagen importieren möchten. Erstellen Sie einen Ordner, in dem sich Ihr Projekt befindet, und erstellen Sie darin ein neues Stylesheet. Benennen Sie es mit "style.css"..
Fügen Sie Ihrem Stylesheet einige grundlegende CSS-Elemente hinzu. Dies kann beliebig sein, solange Ihre Datei nicht größer als 50 KB ist und die AMP-Validierungsregeln eingehalten werden.
Wenn Sie nur ein wenig Test-CSS benötigen, fügen Sie Folgendes hinzu:
körper hintergrund: # 3498db; Farbe: #fff
Der nächste Schritt ist das Hinzufügen des Boilerplate-Codes von AMP, jedoch mit zwei wesentlichen Unterschieden. Erstens verwenden wir die Jade-Syntax anstelle von direktem HTML, und zweitens importieren wir unsere externe "style.css" -Datei.
Erstellen Sie in Ihrem Projektordner eine neue Datei mit dem Namen "index.jade" und fügen Sie den folgenden Code hinzu:
doctype html (amp, lang = "de") head meta (charset = "utf-8") title AMP über Jade-Link (rel = "canonical", href = "/ index.html") meta (name = "viewport") , content = "width = Gerätebreite, minimale Skala = 1, anfängliche Skala = 1") Skript (Typ = "Anwendung / ld + json"). "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-Source-Framework für die Veröffentlichung von Inhalten", "datePublished": "2015-10-07T12: 02: 41Z "," image ": [" logo.jpg "] | | script (async, src = "https://cdn.ampproject.org/v0.js") style (amp-custom) include style.css body h1 Dies ist eine Jade-basierte AMP-Seite.
Der obige Code ist derselbe wie in den AMP-Dokumenten, der gerade in die Jade-Syntax konvertiert wurde.
Sie werden am Ende dieses Codes feststellen, dass wir Folgendes haben:
style (amp-custom) enthält style.css
Die Zeile lesen style (amp-custom) wird das erforderliche ausgeben Stichworte. In der folgenden Zeile sind Sie eingerückt Include style.css. Dies nutzt die Jade-Funktionen und importiert den gesamten Inhalt der Datei „style.css“ und gibt ihn zwischen den Stil-Tags aus.
Sie haben jetzt den erforderlichen Code für diese Methode eingerichtet, und Sie müssen nur Ihre Jade-Vorlage kompilieren. Sie können dies entweder durch einen Task Runner wie Gulp oder Grunt oder durch eine Kompilierungs-App tun.
Bei relativ einfachen Projekten, bei denen Sie nur Dateien kompilieren möchten, empfehle ich die Verwendung einer App namens Prepros. Sie benötigen nur die kostenlose / Testversion für diese Methode.
Nachdem Sie Prepros installiert und ausgeführt haben, müssen Sie lediglich Ihren Projektordner auf die Benutzeroberfläche ziehen und Ihre Jade-Datei finden. Ihr Projekt wird automatisch auf Änderungen geprüft. Speichern Sie also entweder Ihre Jade- oder CSS-Datei, und Prepros veranlassen das Kompilieren Ihrer Vorlage.
In Ihrem Projekt sollte jetzt eine neue Datei mit dem Namen "index.html" angezeigt werden. In diesem Fenster sollte der kompilierte HTML-Code mit integrierten Inline-CSS angezeigt werden:
AMP über Jade Dies ist eine Jade-basierte AMP-Seite.
Als Nächstes sollten Sie eine Vorschau Ihrer Website anzeigen. Es ist zwar möglich, die AMP-Datei in einem Browser anzuzeigen, der direkt von der Festplatte geladen wird, es ist jedoch ratsam, eine Vorschau der Websites mit einem localhost anzuzeigen, d. H. Einen Webhost auf Ihrem Computer zu simulieren.
Prepros enthält eine Vorschau von localhost, die automatisch aktualisiert wird, wenn Änderungen in Ihrem Projekt vorgenommen werden. Sie können es jedoch (leider) nicht mit AMP verwenden. Der Grund dafür ist, dass Prepros JavaScript in die Vorschau lädt, um ein Live-Neuladen zu ermöglichen. Da AMP-Seiten jedoch kein benutzerdefiniertes JavaScript zulässig ist, erkennt der Prüfer dieses Skript und gibt einen Fehler aus.
Aus diesem Grund empfehle ich, Ihre Site-Vorschau localhost mit MAMP für Mac oder Windows einzurichten. Sie folgen dem gleichen Vorgang, den Sie zuvor durchlaufen haben. Der einzige Unterschied besteht darin, dass Sie Ihren Projektordner in Ihrem MAMP-Ordner "htdocs" erstellen, bevor Sie ihn auf Ihre Prepros-Benutzeroberfläche ziehen. Wenn MAMP ausgeführt wird, können Sie eine Vorschau unter einer URL wie http: // localhost: 8888 / myproject anzeigen.
Mit diesem Ansatz erhalten Sie das Beste aus beiden Welten: eine Localhost-Vorschau ohne Validierungsfehler über MAMP und automatische Jade-Kompilierung über Prepros.
Wenn Sie keine statischen HTML-Vorlagen erstellen müssen, haben Sie die Möglichkeit, Ihr Stylesheet mit PHP dynamisch in Ihrem Kopfbereich auszugeben. Diese Vorgehensweise erfordert wahrscheinlich etwas weniger Aufwand, ist jedoch nur dann sinnvoll, wenn Ihre Projektanforderungen (und Ihr Host) PHP zulassen.
Im Übrigen können Sie diese Technik auch dann verwenden, wenn Sie PHP noch nie zuvor verwendet haben und nur in direktem HTML-Code anstatt mit der Jade-Syntax schreiben möchten.
Beginnen Sie mit der Erstellung einer Indexdatei mit dem hinzugefügten Standard-AMP-Boilerplate-Code, aber anstatt der Datei "index.html" den Namen "index.php" zu geben:
Hallo, AMPs Willkommen im mobilen Web
Wenn Sie bereits an einer AMP-Vorlage gearbeitet haben, können Sie die Datei auch umbenennen, die Erweiterung in ".php" ändern und diese in eine PHP-Datei konvertieren. Zum Beispiel würde "about.htm" in "about.php" umbenannt. (Stellen Sie einfach sicher, dass Sie die Erweiterung auch für interne Links ändern.)
Erstellen Sie nun ein externes Stylesheet mit dem Namen "style.css" in Ihrem Stammordner. Wenn Sie eine Vorlage haben, an der Sie gerade arbeiten, schneiden Sie das CSS, das Sie gerade zwischen sich haben, aus Tags und fügen Sie es in Ihr externes Stylesheet ein.
Um Ihr externes CSS in den Kopfbereich Ihrer AMP-Datei zu ziehen, fügen Sie einfach dieses einzeilige PHP-Snippet zwischen das ein Stichworte:
Wenn Sie kein besonderes Interesse an PHP haben, können Sie es dabei belassen. Wenn Sie wissen, dass das Snippet PHP das Stylesheet vom Server abrufen, den Inhalt lesen und inline ausgeben kann, wissen Sie, dass das Snippet das ist. Wenn Sie jedoch mehr über das Snippet erfahren möchten, brechen wir es auf.
Zunächst haben wir die öffnenden und schließenden PHP-Tags . Dadurch wird dem Server mitgeteilt, dass zwischen diesen Tags PHP und nicht regulärer HTML-Code liegt.
Dann benutzen wir die Funktion readfile (). Diese Funktion prüft die zwischen den Klammern angegebene Datei, ruft sie vom Server ab, liest ihren Inhalt und gibt diesen Inhalt inline aus.
Zwischen den Klammern haben wir die Funktion getcwd (). Diese Funktion ruft den Pfad zum aktuellen Arbeitsverzeichnis ab, d. H. Das Verzeichnis, in dem sich unsere PHP-Datei befindet.
Danach haben wir den String (normaler Text) “/style.css”, der den Namen unseres Stylesheets relativ zum Speicherort unserer PHP-Datei angibt. Dann dazwischen diese Zeichenfolge und die getcwd () Funktion setzen wir einen Punkt . welche die beiden miteinander verknüpft (verbindet), um den vollständigen Pfad zu unserem Stylesheet zu erstellen. In einer MAMP-Vorschau würde der Pfad beispielsweise so lauten wie „/Applications/MAMP/htdocs/myproject/style.css“..
Sie können dieses Snippet in beliebig vielen PHP-Templates verwenden, und alle Änderungen an Ihrem externen Stylesheet werden in allen Ihren Templates ausgegeben.
Genau wie bei der Jade-Methode bietet MAMP eine hervorragende Möglichkeit, eine Vorschau Ihrer PHP-basierten AMP-Seiten anzuzeigen, da diese vollständig PHP unterstützt. Installieren Sie MAMP und erstellen Sie Ihren Projektordner im Ordner "htdocs". Sie können Ihre Site unter einer URL wie http: // localhost: 8888 / myproject ohne weitere Einrichtung in der Vorschau anzeigen.
Wir haben jetzt zwei Möglichkeiten aufgezeigt, wie Sie Ihr externes Stylesheet und den normalen CSS-Entwicklungsworkflow beibehalten können, aber die AMP-Validierung bestehen, indem Sie Ihre CSS-Inline verschieben. Lassen Sie uns jeden kurz zusammenfassen.
Accentsconagua
Kopf Sektion. Kompilieren mit Prepros und Vorschau mit MAMP.Kopf Sektion. Vorschau mit MAMP.Welche Methode Sie wählen sollten, hängt von den Besonderheiten Ihres Projekts ab, im Allgemeinen jedoch:
Mit einer dieser Methoden können Sie CSS in der von Ihnen gewohnten Art und Weise entwickeln. Änderungen werden sofort in allen Vorlagen und dem Zugriff auf Vorprozessoren und Optimierungswerkzeuge übernommen und Ihr CSS AMP-kompatibel bleibt.
Ich hoffe, das hilft dabei, Ihre AMP-Entwicklungsprozesse ein wenig glatter zu gestalten!
