Share
Das AMP-Projekt ist eine neu implementierte Open-Source-Initiative, die von Google unterstützt wird, mit dem Ziel, Websites schneller zu machen, insbesondere mit starkem Medieneinsatz und / oder Bedarf an Monetarisierung. Es ist im Grunde eine Art „kein Rummel“, um die etwas komplexeren Optimierungsmethoden auszurollen. Die meisten Prozesse werden für Sie hinter den Kulissen erledigt.
In unserem Artikel AMP-Projekt: Werden Ihre Websites schneller ?, werden wir ausführlich darüber informieren, was AMP aus Sicht der Entwickler für Sie bedeutet, und geben Ihnen ungefähre Angaben zu den Geschwindigkeitsgewinnen, die AMP möglicherweise bietet oder nicht Sie.
In diesem Lernprogramm erfahren Sie mehr über die schrittweise Anleitung, wie Sie eine AMP-Seite von Grund auf neu erstellen, erläutern, wie Sie einige übliche Aufgaben auf AMP-Art erledigen und Tipps zur Verfügung stellen.
Lass uns anfangen!
Mit dem Hinzufügen von Standard-Boilerplate-Code beginnt jede AMP-Vorlage. Es gibt eine Reihe von Code Muss in jeder AMP-Vorlage vorhanden sein, andernfalls schlägt die Validierung fehl.
Erstellen Sie eine neue HTML-Datei mit dem Namen index.html und fügen Sie den folgenden Code hinzu:
Eine AMP-Seite erstellen Eine AMP-Seite erstellen
Sie können eine Aufschlüsselung jedes Elements des obigen Codes unter folgender Adresse lesen:
Sie können (falls Sie sich dafür entscheiden) eine Vorschau der neu erstellten AMP-Vorlage in der Vorschau anzeigen, indem Sie sie direkt in einem Browser öffnen. Es ist jedoch immer eine gute Idee, stattdessen eine Vorschau auf einem localhost anzuzeigen. Dieser Ansatz simuliert einen Webhost, sodass die Umgebung, in der Sie eine Vorschau der Vorlage anzeigen, so nah wie möglich an der Live-Umgebung ist, in der sie bereitgestellt wird.
Zu diesem Zweck empfehle ich die Verwendung von MAMP für Windows oder Mac. Wenn Sie MAMP noch nicht installiert haben, besuchen Sie die MAMP-Website und laden Sie eine Kopie herunter.
Wenn Sie MAMP installiert haben, finden Sie seine htdocs Mappe. Auf Mac finden Sie es normalerweise unter / Anwendungen / MAMP / htdocs, und unter Windows unter C: \ MAMP \ htdocs \.
Erstellen Sie darin einen neuen Ordner für Ihr Projekt, z. Mein Projekt. Dann bewegen Sie die index.html Datei, die Sie im vorherigen Schritt erstellt haben, in den Ordner.
Führen Sie MAMP aus und Sie sollten jetzt in der Lage sein, eine Vorschau Ihrer AMP-Vorlage anzuzeigen, indem Sie in Chrome die URL http: // localhost: 8888 / myproject / aufrufen. Auch wenn Sie einen anderen Browser bevorzugen, verwenden Sie bitte Chrome, da wir im nächsten Schritt die Chrome Developer Tools verwenden.
Ihre AMP-Seite sollte derzeit so aussehen:
Wenn Sie zu dieser URL gehen und sie nicht funktioniert, ist es möglich, dass MAMP unter einer anderen Portnummer als 8888 ausgeführt wird, die in der oben angegebenen URL angezeigt wird. Um herauszufinden, ob dies der Fall ist, klicken Sie auf der MAMP-Benutzeroberfläche auf die Schaltfläche mit der Anzeige Öffnen Sie die WebStart-Seite. Dadurch gelangen Sie zu einer Seite mit Informationen zu MAMP. In der URL wird stattdessen die richtige Portnummer angezeigt:
Bevor wir fortfahren, möchten wir den Debug-Modus von AMP aktivieren. Wenn wir also versehentlich etwas tun, das die Validierung nicht besteht, werden wir dies sofort erfahren.
Dazu fügen Sie hinzu # Entwicklung = 1 bis zum Ende Ihrer Vorschau-URL, z. http: // localhost: 8888 / meinprojekt / # entwicklung = 1.
Dann öffne dich Chrome-Entwicklertools und gehe zum Konsole Registerkarte, wo Sie Folgendes sehen sollten Angetrieben durch AMP ⚡ HTML… Nachricht erscheint:
Wenn Sie bei der Entwicklung Ihrer Seite AMP-Validierungen nicht bestehen, wird in der Konsole eine Fehlermeldung angezeigt. Im Moment haben wir keine Fehlermeldungen und sehen stattdessen "AMP-Validierung erfolgreich", damit wir wissen, dass alles so funktioniert, wie es sein sollte.
Neben dem Boilerplate-Code, den Sie bereits hinzugefügt haben, haben Sie die Möglichkeit, dem Kopfabschnitt im Schema.org-Format einige JSON-Metadaten hinzuzufügen.
Dies ist nicht unbedingt erforderlich, um die AMP-Validierung zu bestehen, aber es ist unerlässlich, um von verschiedenen Orten wie Google Search News abgeholt zu werden.
Weitere Informationen zu diesen Metadaten finden Sie unter:
Eine der Anforderungen von AMP ist, dass alle benutzerdefinierten CSS inline inline platziert werden müssen Kopf Abschnitt, zwischen Stichworte.
Trotz dieser Anforderung ist das direkte Schreiben von CSS direkt in den Kopfbereich kein idealer Arbeitsablauf. Was Sie wirklich brauchen, ist die Möglichkeit, CSS in einem externen Stylesheet zu schreiben, wie Sie es normalerweise tun würden, und dann dieses CSS an die entsprechende Stelle im verschoben Kopf Abschnitte aller Vorlagendateien Ihrer Site.
Wir werden hier nicht Schritt für Schritt beschrieben, wie Sie dies tun können. Wenn Sie jedoch wissen möchten, wie Sie ein externes Stylesheet verwenden und die AMP-Validierung bestehen, folgen Sie bitte den Schritten in unserem Quick Tip-Tutorial. Machen Sie das Inline-CSS von AMP einfacher über Jade oder PHP, bevor Sie fortfahren.
Nachdem Sie nun Ihren wesentlichen Code eingerichtet, den Entwicklungsmodus aktiviert und (optional) die Verwaltung externer Stylesheets vorbereitet haben, können Sie jetzt einige Medien zu Ihrer Seite hinzufügen. Wir beginnen mit den gängigsten Medientypen: Bildern.
In AMP benutzt man das nicht
Von nun an werden wir in diesem Tutorial mit einem vorhandenen Schablonendesign arbeiten, um die Entwicklung zu beschleunigen. Holen Sie sich jetzt eine Kopie der kostenlosen Ceevee-Vorlage von StyleShout. Diese Vorlage enthält einige Bilder, mit denen Sie das Einbetten in Ihr AMP-Dokument üben können.
In den Ceevee-Vorlagen Bilder In diesem Ordner sehen Sie nachts ein großes Bild von Sanddünen. Wir beginnen mit dem Einfügen in Ihre Vorlage. Kopieren Sie die Datei Bilder Ordner und fügen Sie ihn in Ihren Projektordner ein.
Fügen Sie dann den folgenden Code zum Einbetten des Bildes über dem hinzu h1 Tags, die sich bereits im HTML-Code befinden:
Jede Form von Medien, die auf einer AMP-Seite platziert werden, muss einen Anfangsbuchstaben haben Breite und Höhe eingestellt, also im Gegensatz zu einer img tag in einem Amp-Img Tag können Sie diese Attribute nicht auslassen.
Wenn Sie nicht sicher sind, welche Größe ein Bild haben soll, ist es in Ordnung, solange die von Ihnen eingegebenen Werte das Seitenverhältnis genau wiedergeben. Das Breite und Höhe Werte können als Platzhalter betrachtet werden, da AMP die Seite mit den von Ihnen angegebenen Werten anordnen kann und dann Anpassungen vornehmen kann, nachdem das Bild vollständig geladen wurde.
Das Layout Mit diesem Attribut kann AMP die Anzeige des Bildes nach dem Laden anpassen. Wir haben seinen Wert auf gesetzt ansprechbar, Dies bedeutet, dass das Bild das aus den Breiten- und Höhenwerten abgeleitete Seitenverhältnis beibehält, aber verkleinert oder erweitert wird, um den Container zu füllen. Dies ist der Grund, warum Sie, selbst wenn Sie die exakte Größe eines Bildes nicht kennen, solange Sie das Bildseitenverhältnis haben, gut zu gehen sind.
Speichern und aktualisieren Sie Ihre Vorschau, und Sie sollten das Bild sehen, das Ihr Ansichtsfenster ausfüllt:
Lesen Sie mehr über Amp-Img und das Layout Attribut bei:
Ein übliches Element im Webdesign ist heutzutage die Verwendung eines Hintergrundbilds, das die Höhe und Breite des Ansichtsfensters ausfüllt und so eine Eintrittspräsentation für eine Seite erzeugt. In der Regel wird dazu ein Hintergrundbild mit CSS verwendet Hintergrundgröße: Cover; darauf angewendet. In AMP-Sites möchten wir jedoch nicht wirklich große Hintergrundbilder über CSS einbinden, da dies die Ladeoptimierung des Systems umgehen würde.
Nun könnte man durchaus argumentieren, dass das Laden von großen Hintergrundbildern nicht ideal ist, um die Ladegeschwindigkeit zu erhöhen. Aus diesem Grund sollten Sie große Bilder besser auslassen.
Wenn Sie jedoch unvermeidlich ein Design mit einem großen, vollständigen Viewport-Bild erstellen müssen, können Sie immer noch die Ladepriorisierung von AMP nutzen, indem Sie es über das Symbol hinzufügen Amp-Img tag statt als hintergrund. So können Sie dies tun, indem Sie die Hintergrund-Cover-Technik in diesem Prozess approximieren.
Wir nehmen das Bild, das Sie gerade eingebettet haben, in ein Titelbild um. Umwickeln Sie das Bild zunächst mit einem div Tag mit der Klasse doc_header Also hast du:
Wenn noch nicht geschehen, fügen Sie ein paar hinzu Tags im Kopfbereich, damit wir ein paar benutzerdefinierte CSS einfügen können. Fügen Sie zwischen diesen Tags Folgendes hinzu:
.doc_header height: 100vh; Hintergrundfarbe: # 000; Überlauf versteckt; Position: relativ;
In der Regel wird der Designer beim Erstellen eines Titelbilds anstelle des oben angezeigten Werts die Einstellung vornehmen Höhe des html und Karosserie Elemente zu 100% und dann auch ihren Coverabschnitt auf a setzen Höhe von 100%, damit es den Viewport ausfüllt.
Dieser Ansatz funktioniert jedoch nicht mit AMP, da das von ihm geladene CSS den Stil erzwingt Höhe: Auto! wichtig; auf der Karosserie Element, verhindert eine Einstellung von Höhe: 100%; von der Arbeit.
Wenn Sie also wirklich etwas von der Höhe des Ansichtsfensters benötigen, können Sie dies verwenden Höhe: 100 Vh;, wie wir es mit unserem gemacht haben doc_header Klasse. Das vh Einheit steht für "Viewport Height" und einen Wert von 100vh entspricht 100% der Höhe des Ansichtsfensters.
Wenn Sie Ihre Site jetzt speichern und aktualisieren, sollten Sie sehen, dass der Divisionsbereich "doc_header" den Viewport genau ausfüllt.
Im Moment füllt das Bild jedoch nicht unbedingt das div-Element "doc_header". Wenn das Ansichtsfenster größer als breit ist, wird darunter ein leerer schwarzer Bereich angezeigt.
Um dies zu beheben, fügen Sie die Klasse hinzu doc_header_bg zu deinem Amp-Img tag wie folgt:
Dann fügen Sie zu Ihrem CSS hinzu:
.doc_header_bg min-height: 100vh;
Dieser Code stellt sicher, dass die Bildhöhe niemals geringer ist als die des Ansichtsfensters.
Leider wird es bei schmaleren Breiten immer noch gequetscht, so dass es nicht so elegant aussieht wie ein Hintergrundbild. Es ist jedoch so nah an einer Annäherung, wie wir es erreichen können, während wir die Amp-Img Element.
Jetzt fügen wir unserer Vorlage einige benutzerdefinierte Webschriftarten hinzu. Wenn Sie dies mit AMP tun, haben Sie drei Lademethoden, die die Validierung bestehen:
Accentsconagua
@Schriftart Das Laden eines Google-Zeichensatzes sollte über ein Link-Element im Kopf erfolgen. Verwenden Sie dazu die URL, die Sie unter https://www.google.com/fonts für den gewünschten Zeichensatz angegeben haben.
Für unsere Vorlage verwenden wir Open Sans und Libre Baskerville.
Um diese beiden Schriftarten zu laden, fügen Sie diesen Code in Ihren Kopfbereich ein:
Wir werden jetzt etwas Text zu unserem Seitenabdeckungsbereich hinzufügen, auf den wir unsere neuen Webschriftarten anwenden. Fügen Sie im vorhandenen "doc_header" div unter dem Bild ein neues div mit der Klasse hinzu doc_header_inner:
Fügen Sie in diesem Div den folgenden Code hinzu:
Hintergrundbildabdeckung simulieren
Dies ist eine Grundseite, die Ihnen zeigt, wie Sie mit dem AMP-Projekt arbeiten. In diesem Coverabschnitt verwendet das Hintergrundbild eine AMP-Ladeoptimierung. Die folgenden sozialen Symbole verwenden AMP-kompatibles Laden von benutzerdefinierten Schriften. Lesen Sie weiter, um mehr über die Verwendung von AMP zu erfahren.
Fügen Sie Ihrem benutzerdefinierten CSS nun Folgendes hinzu:
body font-family: 'Open Sans', serifenlos; Schriftgröße: 1rem; Zeilenhöhe: 2; Farbe: # 838C95; .doc_header_inner position: absolut; Breite: 85VW; Max-Breite: 64rem; Spitze: 50%; links: 50%; transform: translate (-50%, -50%); Polsterung unten: 2rem; Text ausrichten: Mitte; h1.doc_header_title font: fett 5.625rem / 1.1em 'Open Sans', serifenlos; Farbe: #fff; Buchstabenabstand: -0,125rem; Marge: 0 auto 1rem auto; Text-Schatten: 0 0,0625rem 0,1875rem rgba (0, 0, 0, .8); @media (max-width: 35rem) h1.doc_header_title Schriftgröße: 12vw; p.doc_header_text font-family: 'Libre Baskerville'; Zeilenhöhe: 1,9; Farbe: # A8A8A8; Marge: 0 auto; Breite: 70%; Textschatten: 0 0,0625rem 0,125rem rgba (0, 0, 0, 0,5); .doc_header_text span, .doc_header_text a color: #fff; .doc_header_inner hr width: 60%; Marge: 1.125rem auto 1.5rem auto; Rahmenfarbe: # 2F2D2E; Randfarbe: rgba (150, 150, 150, .1);
Der obige Code ist nur ein regulärer CSS-Code, um den neu hinzugefügten Text zu gestalten. Sie werden jedoch feststellen, dass sich der Prozess der Anwendung unserer Google Fonts in einer AMP-Vorlage nicht von dem üblichen unterscheidet. Sie benutzen die Schriftfamilie Eigenschaft mit dem Wert Ihrer gewählten Schriftart, z. Schriftfamilie: 'Libre Baskerville';
Beim Speichern und Aktualisieren Ihrer Website sollten beide Google Fonts angezeigt werden, die jetzt auf den Text im Deckblattbereich angewendet werden:
Als Nächstes fügen wir eine benutzerdefinierte Schriftart hinzu, die weder bei Google Fonts noch bei Fonts.com verfügbar ist. Dies ist Font Awesome. Wenn Sie Font Awesome verwenden, können Sie es oft über MaxCDN laden. AMP lässt dies jedoch nicht zu, da das CDN nicht zu den beiden genehmigten Schriftarten gehört. Als solches werden wir das Laden selbst über erledigen @Schriftart.
Um die Schrift selbst zu laden, müssen Sie zunächst die Schriftdateien herunterladen. Dies können Sie unter https://fortawesome.github.io/Font-Awesome/ tun. Beachten Sie, dass Sie nur "Font Awesome" benötigen, nicht das Extra "Fort Awesome ”-Tools, die beim Download angeboten werden.
Wenn Sie die ZIP-Datei "Font Awesome" heruntergeladen haben, entpacken Sie sie und kopieren Sie die Schriftarten Ordner in Ihrem Projektordner.
Fügen Sie Ihrem CSS den folgenden Code hinzu:
/ * Font Awesome * / @ font-face font-family: 'FontAwesome'; src: url ('fonts / fontawesome-webfont.eot? v = 4.0.3'); src: url ('fonts / fontawesome-webfont.eot? # iefix & v = 4.0.3') format ('embedded-opentype'), url ('fonts / fontawesome-webfont.woff? v = 4.0.3') format ( 'woff'), url ('fonts / fontawesome-webfont.ttf? v = 4.0.3') format ('truetype'), url ('fonts / fontawesome-webfont.svg? v = 4.0.3 # fontawesomeregular') Format ('svg'); Schriftgewicht: normal; font-style: normal; .fa Anzeige: Inline-Block; Schriftfamilie: FontAwesome; font-style: normal; Schriftgewicht: normal; Zeilenhöhe: 1; -webkit-font-smoothing: antialiased; -moz-osx-Schriftartenglättung: Graustufen; .fa-facebook: vor content: "\ f09a"; .fa-twitter: before content: "\ f099"; .fa-google-plus: vor content: "\ f0d5"; .fa-linkedin: before content: "\ f0e1"; .fa-instagram: vor content: "\ f16d"; .fa-dribbble: before content: "\ f17d"; .fa-skype: before content: "\ f17e"; / * / Font Awesome * /Ich empfehle, den obigen Code oben in Ihr benutzerdefiniertes CSS einzufügen, um die Organisation zu erleichtern. Dieser Code wird in unsere benutzerdefinierten Schriftdateien geladen und erstellt Klassen, mit denen Zeichensymbole zu einem Design hinzugefügt werden können. Hierbei handelt es sich um das Standard-CSS, das von Font Awesome bereitgestellt wird.
Dann fügen Sie auch dieses CSS hinzu:
.doc_header_social margin: 1.5rem 0; Polsterung: 0; Schriftgröße: 1.875rem; Text-Schatten: 0 0,0625rem 0,125rem rgba (0, 0, 0, .8); .doc_header_social li display: Inline-Block; Marge: 0 1rem; Polsterung: 0; .doc_header_social li a color: #fff; .doc_header_social li a: hover color: # 11ABB0;
Dieses zusätzliche CSS fügt ein bestimmtes Styling für unsere Vorlage hinzu, mit dem wir eine Reihe verknüpfter sozialer Symbole einrichten.
Fügen Sie dieses HTML nach dem hinzu
Wenn Sie Ihre Site jetzt aktualisieren, sollten Sie eine Zeile von sehen @Schriftart Soziale Symbole am unteren Rand des zuvor hinzugefügten Textes:
Amp-Schrift ElementUm sicherzustellen, dass Besucher keine beschädigte Website sehen, wenn benutzerdefinierte Schriftarten nicht erfolgreich geladen werden, stellt AMP die Amp-Schrift Element, mit dem Sie Fallbacks erstellen können.
Damit dieses Element funktioniert, müssen Sie als Erstes das AMP-Skript laden, das es ermöglicht. Fügen Sie in Ihrem Kopfabschnitt diesen Code hinzu:
Jetzt mit dem Amp-Schrift Element einsatzbereit, wir können es der Klasse eine Klasse hinzufügen html oder Karosserie tag, wenn unsere Schrift nicht geladen werden kann. Fügen Sie diesen Code vor dem Schließen am Ende Ihrer Vorlage hinzu
Lassen Sie uns einen kurzen Blick auf die Attribute dieses Elements werfen. Wir haben zuerst gesetzt layout = "nodisplay" Dadurch wird sichergestellt, dass das Element nicht sichtbar ist.
Als nächstes das Attribut Schriftfamilie ist eingestellt auf FontAwesome, AMP sagen wir, dass wir das Laden der Schriftart "FontAwesome" verfolgen möchten. Stellen Sie sicher, dass dieser Wert genau mit dem übereinstimmt Schriftfamilie Einstellung in Ihrem @Schriftart CSS-Code.
Das Attribut Auszeit ist eingestellt auf 3000, Dies bedeutet, dass wir bis zu drei Sekunden warten können, bevor die Schriftart geladen wird, bevor ein Fallback ausgeführt wird. Sie können diesen Wert beliebig ändern.
Zum Schluss setzen wir on-error-add-class zu font-awesome-vermisst. Wenn die Schrift nach drei Sekunden nicht geladen wird, wird diese Klasse zum hinzugefügt html oder Karosserie Element. Wir können auf diese Klasse ein Ziel festlegen, um unser Fallback-Verhalten zu erstellen, indem Sie diesen Code zu unserem benutzerdefinierten CSS hinzufügen:
.font-awesome-missing .doc_header_social display: none;
Wenn die Schrift nach drei Sekunden nicht geladen wird, aktiviert und verdeckt das obige CSS die gesamte Symbolleiste, sodass keine fehlerhafte Darstellung möglich ist.
Versuchen Sie jetzt, den Schriftartenordner Ihres Projekts vorübergehend umzubenennen, sodass die Schriftarten nicht geladen werden. Aktualisieren Sie dann die Seite, und der Bereich für soziale Symbole sollte ausgeblendet sein. Sie sollten auch die Klasse sehen font-awesome-vermisst dem hinzugefügt html oder Karosserie Etikett. Stellen Sie den Schriftartenordner unter dem richtigen Namen wieder her, und Ihre Zeichensymbole sollten beim Aktualisieren wieder angezeigt werden.
Lesen Sie mehr über die Amp-Schrift Element bei:
Als Nächstes lernen wir, wie man ein YouTube-Video auf AMP-Weise hinzufügt. Zunächst müssen wir jedoch einen kleinen Code für das Housekeeping hinzufügen, um einen Abschnitt für das Video zu erstellen.
Ersetzen Sie nach dem div-Befehl "doc_header" den vorhandenen h1 Tags mit diesem HTML:
Betten Sie ein YouTube-Video ein
Dann fügen Sie dies Ihrem benutzerdefinierten CSS hinzu:
.Standardbreite (Breite: 100%); Max-Breite: 75rem; Rand links: auto; Rand rechts: auto; .standard_padding box-size: border-box; Polsterung: 6rem 3rem; .video_wrap Hintergrundfarbe: # 2B2B2B;
Möglicherweise haben Sie in dem obigen CSS, das wir festgelegt haben, festgestellt Box-Dimensionierung: Border-Box; in dem standard_padding Klasse.
Der Grund dafür ist, dass Sie in AMP die übliche Methode des Einbindens nicht verwenden können * box-size: border-box, weil der * Selector gilt als zu ressourcenhungrig. Als solche müssen Sie einstellen Box-Dimensionierung: Border-Box; Für die spezifischen Elemente, die Sie benötigen, können Sie die Polsterung und Begrenzungen wie gewohnt verwenden - mit einem Taschenrechner oder mit den Fingern.
amp-youtube ElementJetzt, da der Abschnitt eingerichtet und bereit für den Inhalt ist, werden wir ein YouTube-Video mit AMPs benutzerdefiniertem Format hinzufügen amp-youtube Element. Durch die Verwendung dieses Elements anstelle des standardmäßigen YouTube-Einbettungscodes können Sie auf die Optimierungstechniken des Ladens zugreifen, die denen von Amp-Img.
Zunächst müssen Sie das AMP-JavaScript hinzufügen, das zum Aktivieren des neuen Elements erforderlich ist. Fügen Sie im Kopfbereich Folgendes ein:
Fügen Sie nun in den soeben hinzugefügten divs den folgenden HTML-Code ein h2 Stichworte:
Legen Sie die YouTube-ID für das Attribut fest, um das Video anzugeben, das Sie laden möchten Daten-Video-ID. Anders als dieses Attribut ist das amp-youtube Element ist so ziemlich das gleiche wie das Amp-Img Element.
Wir haben das Breite und Höhe einstellen 600 und 270 beziehungsweise. Wie bei Bildern müssen Videos für die anfängliche Breite und Höhe festgelegt werden.
Wir benutzen dann layout = "responsive" So passt sich das Video an die Größe des Containers an und behält das Seitenverhältnis aus den Einstellungen für Höhe und Breite bei.
Speichern und aktualisieren Sie Ihre Site, und ändern Sie die Größe des Darstellungsbereichs. Sie sollten sehen, dass sich Ihr YouTube-Video vergrößert oder verkleinert, um es anzupassen, wobei das korrekte Seitenverhältnis beibehalten wird.
Lesen Sie mehr über die amp-youtube Element bei:
AMP verfügt über zusätzliche benutzerdefinierte Elemente zum Laden von Inhalten von bestimmten Websites, z Amp-Twitter, Amp-Instagram und noch ein paar mehr. Für Inhalte von Websites Dritter, die kein eigenes AMP-Element besitzen, gibt es das Amp-iframe stattdessen Element. Wir werden jetzt dieses Element verwenden, um eine Google Map in unsere Seite zu laden.
Erstellen Sie einen Container für die Karte, indem Sie diesen Code unter Ihren "video_wrap" -Divs hinzufügen:
Verwenden Sie iframe Embedding, z. Karten
Nun wie beim Amp-Schrift und amp-youtube Elemente, müssen wir das AMP-Skript laden, das die Amp-iframe Element. Fügen Sie dies Ihrem Kopfabschnitt hinzu:
Als nächstes in Ihrem neuen Div und unter dem h2 Tags, fügen Sie diesen Code hinzu:
Laden Sie Ihre Site neu und Sie sollten jetzt eine Google Map sehen.
Neben der Optimierung des Ladevorgangs Amp-iframe Element hilft sicherzustellen, dass der Inhalt, der durch den iframe angezeigt wird, sich nicht auf unerwünschte Weise verhält, z. B. das Ausführen von JavaScript, das das langsame Laden verursachen kann, oder das Erzwingen von Popup-Anzeigen. Das Sandkasten Mit diesem Attribut können Sie bestimmen, auf welcher Ebene Sie den Inhalt von Iframes kontrollieren.
Für vollständige Details über Amp-iframe und seine "Sandbox" -Steuerelemente finden Sie unter:
Bei der Arbeit mit AMP kann die Einschränkung einschränkend wirken, dass kein benutzerdefiniertes JavaScript zulässig ist. Auf der anderen Seite sind in AMP jedoch benutzerdefinierte Elemente enthalten, die Ihnen einige Funktionen bieten, die Sie normalerweise über benutzerdefiniertes JavaScript implementieren können.
Anstatt ein benutzerdefiniertes Leuchtkasten-Skript zu laden, können Sie beispielsweise das verwenden amp-image-lightbox Element. Wir erstellen jetzt eine Bildergalerie, die dieses Element verwendet.
Erstellen Sie zunächst einen Container für Ihre Galerie, indem Sie diesen Code direkt über Ihrem hinzufügen Amp-Schrift Etikett:
Erstellen Sie eine Galerie mit Lightboxen
Fügen Sie dies auch Ihrem benutzerdefinierten CSS hinzu:
.portfolio_wrap Hintergrundfarbe: #ebeeee; .portfolio_inner padding: 4rem 6rem; .portfolio_item Box-Sizing: Rahmenfeld; Schwimmer: links; Breite: 25%; Text ausrichten: Mitte; Polsterung: 0.8rem; .clearfix: vorher, .clearfix: after content: ""; Anzeige: Tisch; .clearfix: after clear: both;
Wie unsere letzten benutzerdefinierten Elemente müssen wir ein AMP-Skript laden, um das zu aktivieren amp-image-lightbox Element. Fügen Sie dies Ihrem Kopfabschnitt hinzu:
Nun können wir mit dem Einrichten unserer Lightbox-Galerie beginnen. Fügen Sie diesen Code in Ihre neuen divs unter der h2 Stichworte:
Diese amp-image-lightbox Element erstellt die tatsächliche Lightbox-Anzeige mit den vergrößerten Bildern. Wir möchten es ausblenden, bis ein Benutzer auf ein Bild geklickt hat, das Sie vergrößern möchten layout = "nodisplay".
Hinweis: Wir haben die ID dieses Elements auf gesetzt lightbox1.
Um der Galerie ein Element hinzuzufügen, fügen Sie dieses div unter dem ein amp-image-lightbox Element:
Dann fügen Sie dies hinzu Amp-Img Code:
Zum größten Teil das Amp-Bild Das Element ist dasselbe wie das, das wir zuvor hinzugefügt haben on = "tap: lightbox1". Dies teilt AMP mit, dass beim Anklicken / Anklicken des Bildes die größere Version in einer Lightbox mit der ID geöffnet werden sollte lightbox1, das amp-image-lightbox Element, das wir gerade erstellt haben.
Fügen Sie der Galerie weitere sieben Bilder mit diesem Code hinzu:
