Mit AEM können Sie ein responsives Layout für Ihre Seiten mit Layout-Container -Komponente.
Dies bietet ein Absatzsystem, mit dem Sie Komponenten in einem responsiven Raster positionieren können. Dieses Raster kann das Layout entsprechend der Geräte-/Fenstergröße und dem Format neu anordnen. Die Komponente wird zusammen mit der Layout mode, mit dem Sie Ihr responsives Layout geräteabhängig erstellen und bearbeiten können.
Der Layout-Container:
Die Benutzenden können dann mithilfe des Emulators sehen, wie der Inhalt für bestimmte Geräte gerendert wird.
Das responsive Layout für Ihre Seiten wird von AEM mithilfe einer Kombination von Mechanismen ermöglicht:
Diese Komponente ist im Komponenten-Browser verfügbar. Sie bietet ein Raster-Absatzsystem, mit dem Sie Komponenten in einem responsiven Raster hinzufügen und positionieren können. Dieses kann auf Ihrer Seite auch als Standardabsatzsystem festgelegt werden.
Sobald der Layout-Container auf der Seite positioniert ist, können Sie im Layout-Modus Inhalte im responsiven Raster positionieren.
Emulator
Auf diese Weise können Sie responsive Websites erstellen und bearbeiten, die das Layout durch interaktive Größenanpassung der Komponenten an die Geräte-/Fenstergröße anpassen. Die Benutzenden können dann mithilfe des Emulators sehen, wie der Inhalt gerendert wird.
Mit diesen responsiven Rastermechanismen können Sie:
Je nach Projekt kann der Layout-Container als Standard-Absatzsystem für Ihre Seiten oder als Komponente verwendet werden, die über den Komponenten-Browser zu Ihrer Seite hinzugefügt werden kann (oder beides).
Adobe bietet GitHub-Dokumentation des responsiven Layouts als Referenz, der Frontend-Entwicklern zur Verfügung gestellt werden kann, damit sie das AEM Raster außerhalb von AEM verwenden können, z. B. bei der Erstellung statischer HTML-Modelle für eine zukünftige AEM Site.
Die Verwendung des obigen Mechanismus wird durch die Konfiguration der Vorlage aktiviert. Weitere Informationen finden Sie unter „Konfigurieren des responsiven Layouts“.
Wenn Sie den Inhalt Ihrer Website erstellen, möchten Sie sicherstellen, dass Ihr Inhalt auf dem für die Anzeige verwendeten Gerät angemessen angezeigt wird.
Mit AEM können Sie Layouts definieren, die von der Breite des Geräts abhängen:
Das Gerät Desktop, das keine bestimmte Breite aufweist und sich auf den Standard-Breakpoint bezieht (d. h. auf alles über dem letzten konfigurierten Breakpoint).
Es wäre möglich, Breakpoints für jedes einzelne Gerät zu definieren. Dies würde jedoch den Aufwand für die Layout-Definition und die Wartung deutlich erhöhen.
Wenn Sie den Emulator verwenden, wählen Sie ein bestimmtes Gerät für die Emulation und Layout-Definition aus und der zugehörige Breakpoint wird ebenfalls hervorgehoben. Alle von Ihnen vorgenommenen Layout-Änderungen können für andere Geräte angewendet werden, für die der Breakpoint gilt. Also für alle Geräte, die links neben der aktiven Breakpoint-Markierung, aber vor der nächsten Breakpoint-Markierung positioniert sind.
Wenn Sie z. B. das Gerät iPhone 6 Plus für die Emulation und das Layout auswählen (das mit einer Breite von 540 Pixel definiert ist), wird auch der Breakpoint Telefon (definiert mit 768 Pixel) aktiviert. Alle Änderungen am Layout, die Sie für das iPhone 6 durchführen, gelten auch für die anderen Geräte unter dem Breakpoint Telefone, wie das iPhone 5 (mit 320 Pixel definiert).
Öffnen Sie die gewünschte Seite zur Bearbeitung. Beispiel:
http://<host>:<port>/editor.html/content/wknd/en/sports/la-skateparks.html
Wählen Sie in der oberen Symbolleiste das Symbol Emulator aus:
Die Emulator-Symbolleiste wird geöffnet.
In der Emulator-Symbolleiste werden zusätzliche Layout-Optionen angezeigt:
Um ein bestimmtes zu emulierendes Gerät auszuwählen, haben Sie folgende Möglichkeiten:
Nachdem Sie ein bestimmtes Gerät ausgewählt haben, sind folgende Möglichkeiten verfügbar:
Ein Layout-Container ist ein Absatzsystem mit folgenden Eigenschaften:
Falls er noch nicht verfügbar ist, muss der Layout-Container explizit für ein Absatzsystem/eine Seite aktiviert werden.
Der Layout-Container ist als Standardkomponente im Komponentenbrowser verfügbar. Von hier können Sie ihn an die gewünschte Position auf der Seite ziehen, nach der Sie die Komponenten hierher ziehen Platzhalter.
Anschließend können Sie dem Layout-Container Komponenten hinzufügen. Diese Komponenten enthalten den tatsächlichen Inhalt:
Wie bei anderen Komponenten können Sie einen Layout-Container auswählen und dann bearbeiten (ausschneiden, kopieren, löschen) (wenn Sie sich in Bearbeiten mode):
Da ein Layout-Container ein Absatzsystem ist, werden beim Löschen der Komponente sowohl das Layout-Raster als auch alle Komponenten (und deren Inhalt) gelöscht, die sich im Container befinden.
Wenn Sie mit der Maus auf den Rasterplatzhalter zeigen oder diesen auswählen, wird das Aktionsmenü angezeigt.
Wählen Sie daraufhin die Option Übergeordnetes Element aus.
Wenn die Layout-Komponente verschachtelt ist, bietet die Auswahl der Option Übergeordnet eine Dropdown-Auswahl, über die Sie den verschachtelten Layout-Container oder dessen übergeordnete Elemente auswählen können.
Wenn Sie den Mauszeiger im Dropdown-Menü über die Container-Namen halten, wird ihre Gliederung auf der Seite angezeigt.
Das gesamte Raster wird mit seinem Inhalt hervorgehoben. Die Aktionssymbolleiste wird angezeigt, über die Sie eine Aktion auswählen können, z. B. Löschen.
Sie können für jeden Breakpoint (der durch den emulierten Gerätetyp und die Ausrichtung bestimmt wird) ein eigenes Layout definieren.
Das Layout eines mit dem Layout-Container implementierten responsiven Rasters muss im Layout-Modus konfiguriert werden.
Der Layout-Modus kann auf zwei Arten aktiviert werden.
Im Layout-Modus können Sie verschiedene Aktionen für ein Raster ausführen:
Ändern Sie die Größe der Inhaltskomponenten mithilfe der blauen Punkte. Die Größenanpassung wird immer am Raster ausgerichtet. Während der Größenanpassung wird im Hintergrund das Raster angezeigt, was die Ausrichtung erleichtert:
Wenn Sie die Größe von Komponenten wie Bildern ändern, bleiben die Proportionen und Seitenverhältnisse erhalten.
Wählen Sie eine Inhaltskomponente aus. Über die Symbolleiste können Sie:
In Layout -Modus können Sie die Komponenten hierher ziehen , um die gesamte Komponente auszuwählen. Für diesen Modus wird die Symbolleiste angezeigt.
Die Symbolleiste bietet je nach Status der Layout-Komponente und der zugehörigen Komponenten unterschiedliche Optionen. Beispiel:
Übergeordnetes Element: Wählt die übergeordnete Komponente aus.
Ausgeblendete Komponenten anzeigen: Blendet alle oder einzelne Komponenten ein. Die Zahl gibt an, wie viele ausgeblendete Komponenten es derzeit gibt. Der Zähler zeigt an, wie viele Komponenten ausgeblendet sind.
Breakpoint-Layout zurücksetzen: Stellt das Standard-Layout wieder her. Es wird kein benutzerdefiniertes Layout festgelegt.
In neue Zeile verschieben: Verschiebt die Komponente um eine Position nach oben, wenn der Leerraum dies erlaubt.
Komponente ausblenden: Blendet die aktuelle Komponente aus.
Im obigen Beispiel sind die Aktionen zum Verschieben und Ausblenden verfügbar, weil dieser Layout-Container in einem übergeordneten Layout-Container verschachtelt ist.
Komponenten einblenden: Ermöglicht das Auswählen der übergeordneten Komponenten, um die Aktionssymbolleiste mit der Option Verborgene Komponenten einblenden anzuzeigen. In diesem Beispiel gibt es zwei ausgeblendete Komponenten.
Bei Auswahl der Option Verborgene Komponenten einblenden werden die jeweils ausgeblendeten Komponenten in Blau an ihren ursprünglichen Positionen angezeigt.
Bei Auswahl der Option Alle wiederherstellen werden alle verborgenen Komponenten eingeblendet.