- Einführung in Kernkomponenten
- Wege zum Erfolg
- Komponentenbibliothek
- Versionen
- Erste Schritte
- Die WCM-Komponenten
- Akkordeon
- Breadcrumb
- Schaltfläche
- Karussell
- Container
- Inhaltsfragment
- Inhaltsfragmentliste
- Download
- Einbetten
- Experience Fragment
- Bild
- Sprachnavigation
- Liste
- Navigation
- Seite
- PDF-Viewer
- Fortschrittsleiste
- Schnellsuche
- Trennzeichen
- Freigabe in Social Media
- Inhalt
- Text
- Registerkarten
- Teaser
- Titel
- Formularkomponenten
- v1-Komponenten
- v2-Komponenten
- v3-Komponenten
- E-Mail-Komponenten
- Adaptive Formulare
- Einführung
- Versionsverlauf
- Adaptive Formulare – Komponenten
- Adaptive Formulare – Akkordeon
- Adaptive Formulare – Schaltfläche
- Kontrollkästchen für adaptive Forms
- Adaptive Formulare – Kontrollkästchengruppe
- Adaptive Formulare – Container
- Adaptive Formulare – Datumsauswahl
- Adaptive Formulare – Dropdown-Liste
- Adaptive Formulare – E-Mail-Eingabe
- Adaptive Formulare – Dateianlagen
- Vertikale adaptive Forms-Registerkarten
- Adaptive Formulare – horizontale Registerkarten
- Adaptive Formulare – Bild
- Adaptive Formulare – Zahleneingabe
- Adaptive Formulare – Bedienfeld
- Adaptive Formulare – Optionsschaltfläche
- Adaptive Formulare – Schaltfläche „Zurücksetzen“
- Adaptive Formulare – Schaltfläche „Senden“
- Adaptive Formulare – Telefoneingabe
- Adaptive Formulare – Text
- Adaptive Formulare – Textfeld
- Adaptive Formulare – Titel
- Adaptive Formulare – Assistenten-Layout
- Adaptive Forms-Geschäftsbedingungen
- Kopfzeile
- Fußzeile
- Anpassen von Kernkomponenten für adaptive Formulare
- Beispiel-Designs und -vorlagen
- Entwickeln
- Entwickeln von Kernkomponenten
- Wege zum Erfolg
- WKND-Entwickler-Tutorial
- Anpassen der Kernkomponenten
- Komponentenrichtlinien
- AMP-Unterstützung
- Kontextabhängige Konfigurationen
- Einschließen von Client-Bibliotheken
- Adaptive Image Servlet
- Web-optimierte Bildbereitstellung
- Unterstützung für Next Generation Dynamic Media
- Adobe Client-Datenschicht
- AEM-Projektarchetyp
AMP-Unterstützung für die Kernkomponenten
Ab Version 2.11.0 der Kernkomponenten wird AMP (Accelerated Mobile Pages) vollständig unterstützt.
Dieses Dokument gibt einen Überblick darüber, wie AMP unterstützt wird und wie Sie es für Ihre Sites aktivieren können. Ausführliche technische Informationen finden Sie in der GitHub-Entwicklerdokumentation.
Was ist AMP?
Accelerated Mobile Pages oder AMP ist ein Open-Source-Framework, das ursprünglich von Google entwickelt wurde, um Seiten für das Browsen auf Mobilgeräten zu optimieren. AMP-Seiten laden in der Regel viel schneller als normale Web-Seiten und bieten so bessere mobile Erlebnisse.
AMP in den Kernkomponenten
Die Unterstützung für AMP in den Kernkomponenten ist vollständig konfigurierbar. AMP-Versionen von Seiten können exklusiv, parallel zu den Standard-HTML-Versionen oder gar nicht bereitgestellt werden.
Die Kernkomponenten nutzen amp als Sling-Selektor zum Rendern von AMP-Seiten. Zum Beispiel würde mit example.html die normale Seite und mit example.amp.html die AMP-Version gerendert.
Sie können für jedes Projekt einzeln festlegen, ob AMP genutzt wird oder nicht. Da AMP- und Standard-HTML-Seiten parallel bereitgestellt werden können, kann AMP auch nur auf bestimmten Seiten eines Projekts verwendet werden.
Erste Schritte mit AMP-Unterstützung in Ihrem Projekt
Obwohl AMP-Unterstützung umfangreiche Flexibilität bietet, müssen Sie für den Einstieg nur wenige einfache Schritte befolgen:
- Installieren Sie bei Bedarf die Erweiterung für die AMP-Unterstützung.
- Für AEM as a Cloud Service-Projekte ist die Erweiterung automatisch mit den Kernkomponenten verfügbar und es ist keine Installation erforderlich.
- Bei lokalen und AMS-Projekten muss die Erweiterung bei der Installation der Kernkomponenten explizit installiert werden.
- Nachdem die AMP-Erweiterung installiert wurde, muss der Komponentenautor einfach die Supertypen der Komponente auf jene in der Erweiterung verweisen.
- Aktivieren Sie die AMP-Unterstützung auf Vorlagenebene oder auf den einzelnen Seiten.
- Stellen Sie ggf. eingebettetes CSS bereit.
Aktivieren von AMP für Seiten
Um AMP für eine Seite zu aktivieren, müssen Sie den AMP-Modus in der Seitenrichtlinie auswählen.
- Kein AMP: Die Seite wird nur als Standard-HTML bereitgestellt.
- Gepaartes AMP: Die Seite wird sowohl als AMP als auch als HTML bereitgestellt.
- Nur AMP: Die Seite wird nur als AMP bereitgestellt.
Die AMP-Einstellungen für eine Seite können auch in den Seiteneigenschaften einer einzelnen Seite überschrieben werden.
- Von Seitenvorlage erben: Dies ist der Standardwert, mit dem die Einstellung aus der Richtlinie der Seitenvorlage übernommen werden kann.
- Kein AMP: Die Seite wird nur als Standard-HTML bereitgestellt.
- Gepaartes AMP: Die Seite wird sowohl als AMP als auch als HTML bereitgestellt.
- Nur AMP: Die Seite wird nur als AMP bereitgestellt.
CSS-Anforderungen
Bei Verwendung von AMP mit den Kernkomponenten besteht der Hauptunterschied darin, dass für AMP alle CSS-Anweisungen inline im Element <head> referenziert und optimiert werden müssen.
Zu diesem Zweck wird eine angepasste Seitenkomponente verwendet, die nur AMP-spezifische CSS-Anweisungen für die Komponenten lädt, die auf der Seite vorhanden sind.
Aufgrund von Einschränkungen des AMP-Designs unterstützt Adobe die Verwendung des responsiven Rasters mit der AMP-Version Ihrer Seite nicht.
Weitere Anforderungen und technische Details finden Sie in der GitHub-Entwicklerdokumentation.
Ressourcen
Adobe-Konto
