Konfigurieren von Layout-Container und Layout-Modus configuring-layout-container-and-layout-mode
Ein responsives Layout ist eine Methode, um ein responsives Webdesign zu realisieren. Damit lassen sich Web-Seiten erstellen, deren Layout und Abmessungen von dem Gerät des Benutzers abhängen.
Das responsive Layout für Ihre Seiten wird von AEM mithilfe einer Kombination von Mechanismen ermöglicht:
-
Diese Komponente liefert ein Rasterabsatzsystem, mit dem Sie Komponenten in einem responsiven Raster hinzufügen und positionieren können. Sie können sie als Standard-ParSys für Ihre Seite nutzen und/oder sie anderen Autoren im Komponenten-Browser zur Verfügung stellen.
-
Die standardmäßige Layout-Container-Komponente ist definiert unter:
/libs/wcm/foundation/components/responsivegrid
-
Sie können Layout-Container definieren:
-
Als Komponente, die der Benutzer einer Seite hinzufügen kann.
-
Als Standard-ParSys für die Seite.
-
Beide.
Sie können den Layout-Container als Standard für die Seite festlegen und es den Benutzern gleichzeitig erlauben, weitere Layout-Container darin hinzuzufügen, z. B. für die Spaltensteuerung.
-
-
-
Layout-Modus
Sobald der Layout-Container auf Ihrer Seite positioniert ist, können Sie den
Layout-Modus verwenden, um Inhalte im responsiven Raster zu positionieren. -
Emulator
Hiermit können Sie responsive Websites erstellen und bearbeiten, deren Layout durch eine interaktive Größenanpassung der Komponenten an die Größe des Geräts oder Fensters angepasst wird. Der Benutzer kann sich mit dem Emulator ansehen wie der Inhalt für bestimmte Geräte gerendert wird.
Mit diesen responsiven Rastermechanismen können Sie:
- Verwenden Sie Haltepunkte (die die Gerätegruppierung angeben), um je nach Gerätelayout ein unterschiedliches Inhaltsverhalten zu definieren.
- Ausblenden von Komponenten basierend auf Gerätegruppen (definieren Sie, an welchem Haltepunkt eine Komponente ausgeblendet wird).
- Verwenden Sie die horizontale Ausrichtung am Raster (platzieren Sie Komponenten in das Raster, passen Sie die Größe an, definieren Sie, wann sie nebeneinander oder darüber/darunter reduziert/umfließen sollen).
- Realisieren einer Spaltensteuerung.
Konfigurieren des responsiven Emulators configuring-the-responsive-emulator
Mit diesen Aufgaben können Sie den responsiven Emulator auf Ihrer Website anzeigen.
Registrieren Ihrer Seitenkomponenten für die Emulation register-your-page-components-for-emulation
Damit der Emulator Ihre Seiten unterstützen kann, müssen Sie die Seitenkomponenten registrieren. Siehe Registrieren von Seitenkomponenten für die Simulation.
Gerätegruppen angeben specify-the-device-groups
Informationen zum Festlegen der Gerätegruppen, die in der Liste "Geräte"des Emulators angezeigt werden, finden Sie unter Festlegen der Gerätegruppen.
Verknüpfen Ihrer Site mit den angegebenen Gerätegruppen link-your-site-to-the-specified-device-groups
Um den Simulator einzubeziehen, müssen Sie Ihre Site mit den Gerätegruppen verknüpfen. Siehe Hinzufügen der Geräteliste (für die klassische und die Touch-optimierte Benutzeroberfläche).
Aktivieren des Layout-Modus für die Website activate-layout-mode-for-your-site
Mit diesen Vorgängen wird der Layout-Modus auf Ihrer Website aktiviert.
Konfigurieren der Haltepunkte configure-the-breakpoints
-
werden im responsiven Design verwendet.
-
Kann definiert werden:
- auf der Seitenvorlage, von der die Einstellungen auf alle Seiten kopiert werden, die mit dieser Vorlage erstellt wurden
- Auf dem Seitenknoten, von dem aus die Einstellungen von allen untergeordneten Seiten übernommen werden.
-
Definieren Sie einen Titel und eine Breite:
- Der Titel beschreibt die generische Gerätegruppierung, gegebenenfalls mit Ausrichtung. zum Beispiel Telefon, Tablet, Tabletlandscape.
- Die Breite definiert die maximale Breite in Pixel für diese generische Gerätegruppierung. Wenn das Breakpoint-Telefon beispielsweise eine Breite von 768 hat, dann die maximale Breite des Layouts, das für ein Telefongerät verwendet wird.
-
Sind als Markierungen am oberen Rand des Seiteneditors sichtbar, wenn Sie den Emulator verwenden.
-
werden von der Hierarchie des übergeordneten Knotens übernommen und können beliebig überschrieben werden.
-
Es gibt einen standardmäßigen (nativen) Breakpoint, der alles über dem letzten konfiguriert Haltepunkt.
Haltepunkte können Sie mit CRXDE Lite oder XML definieren.
- müssen Sie Haltepunkte zu den Vorlagen hinzufügen.
- Haltepunkte zu Vorlagen hinzufügen
- dieselben Haltepunkte zu vorhandenen Seiten hinzufügen
Da die Vererbung im Einsatz ist, können Sie dies auf die Stammseite Ihrer Inhalte beschränken.
Konfigurieren von Haltepunkten mithilfe von CRXDE Lite configuring-breakpoints-using-crxde-lite
-
Navigieren Sie mit der CRXDE Lite (oder einer entsprechenden Vorlage) zu einer der folgenden Optionen:
- Ihre Vorlagendefinition.
- dem Knoten
jcr:content
Ihrer Seite
-
Erstellen Sie unter
jcr:content
den Knoten:- Name:
cq:responsive
- Typ:
nt:unstructured
- Name:
-
Erstellen Sie darunter den Knoten:
- Name:
breakpoints
- Typ:
nt:unstructured
- Name:
-
Unter dem Breakpoints-Knoten können Sie eine beliebige Anzahl von Haltepunkten erstellen. Jede Definition ist ein einzelner Knoten mit den folgenden Eigenschaften:
- Name:
<descriptive name>
- Typ:
nt:unstructured
- Titel:
String
*<descriptive title seen in Emulator>
* - Breite:
Decimal
*<value of breakpoint>
*
- Name:
Konfigurieren von Haltepunkten mit XML configuring-breakpoints-using-xml
Haltepunkte befinden sich im Abschnitt <jcr:content>
der Datei .context.html
im entsprechenden Vorlagenorder (bzw. Inhaltsordner).
Eine Beispieldefinition:
<cq:responsive jcr:primaryType="nt:unstructured">
<breakpoints jcr:primaryType="nt:unstructured">
<phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
<tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
</breakpoints>
</cq:responsive>
Responsive Informationsanbieter hinzufügen add-a-responsive-information-provider
Kopieren Sie die folgende cq:infoProviders
-Knotenstruktur in die übergeordnete Seitenkomponente:
/libs/foundation/components/page/cq:infoProviders/responsive
Aktivieren der Größenänderung von Komponenten für die Seite enable-component-resizing-for-the-page
Sie müssen diese Vorgänge durchführen, um die Größe von Komponenten im Layout-Modus zu ändern.
Layout-Container als Haupt-Parsys festlegen set-layout-container-as-main-parsys
Um die Haupt-ParSys Ihrer Seite als Layout-Container festzulegen, müssen Sie die ParSys wie folgt definieren:
wcm/foundation/components/responsivegrid
In beiden Fällen:
- Seitenkomponente
- Seitenvorlage (zur zukünftigen Verwendung)
Die folgenden beiden Beispiele veranschaulichen die Definition:
-
HTL:
code language-xml <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
-
JSP:
code language-none <cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
Responsive CSS einschließen include-the-responsive-css
CSS für Haltepunkte mit LESS css-for-breakpoints-using-less
AEM verwendet LESS, um Teile des erforderlichen CSS zu generieren. Diese müssen für Ihre Projekte einbezogen werden.
Außerdem müssen Sie eine Client-Bibliothek , um zusätzliche Konfigurations- und Funktionsaufrufe bereitzustellen. Der folgende LESS-Extrakt ist ein Beispiel für das Minimum, das Sie zum Projekt hinzufügen müssen:
@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";
/* maximum amount of grid cells to be provided */
@max_col: 12;
/* default breakpoint */
.aem-Grid {
.generate-grid(default, @max_col);
}
/* phone breakpoint */
@media (max-width: 768px) {
.aem-Grid {
.generate-grid(phone, @max_col);
}
}
/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
.aem-Grid {
.generate-grid(tablet, @max_col);
}
}
Die Basisrasterdefinition finden Sie unter:
/libs/wcm/foundation/clientlibs/grid/grid_base.less
Überlegungen zur Formatierung styling-considerations
Die Größe von Komponenten, die in einem responsiven Container gespeichert sind, wird (zusammen mit den entsprechenden HTML-DOM-Elementen) entsprechend der Größe des responsiven Rasters geändert. Daher wird unter diesen Umständen empfohlen, Definitionen von DOM-Elementen mit fester Breite (enthalten) zu vermeiden (oder zu aktualisieren).
Beispiel:
-
Vorher:
width=100px
-
Nachher:
max-width=100px
Größenanpassung und Adaptive Bildkompatibilität resizing-and-adaptive-image-compliance
Bei jeder Größenänderung einer Komponente im Raster werden die folgenden Listener entsprechend Trigger:
-
beforeedit
-
beforechildedit
-
afteredit
-
afterchildedit
Um die Größe eines adaptiven Bildes in einem responsiven Raster ordnungsgemäß zu ändern und die Inhalte des Bildes zu aktualisieren, müssen Sie den Listener afterEdit
, dessen Wert auf REFRESH_PAGE
festgelegt ist, zur EditConfig
-Datei aller enthaltenen Komponenten hinzufügen.
Beispiel:
<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />
Der Mechanismus für adaptive Bilder wird über ein Skript zur Verfügung gestellt, das die Auswahl des richtigen Bildes für die aktuelle Fenstergröße steuert. Sie wird aktiviert, nachdem das DOM bereit ist oder wenn ein dediziertes Ereignis empfangen wird. Derzeit muss die Seite aktualisiert werden, um das Ergebnis der Benutzeraktion korrekt widerzuspiegeln.
Aktivieren der Layout-Container-Komponente für Seite enable-the-layout-container-component-for-page
Mit diesen Aufgaben können Autoren Instanzen der Layout-Container auf der Seite.
Aktivieren der Layout-Container-Komponente für die Seitenbearbeitung enable-the-layout-container-component-for-page-editing
Damit Autoren weitere responsive Raster zu den Inhaltsseiten hinzufügen können, müssen Sie die Layout-Container-Komponente für Ihre Seite aktivieren. Möglich ist dies über folgende Optionen:
-
Autorenumgebung
Verwendung Designmodus , um die Ebenencontainer -Komponente für eine Seite.
-
Komponentendefinition
Nutzen Sie beim Definieren der Komponente
allowedComponent
oder ein Static Include.
Konfigurieren des Rasters des Layout-Containers configure-the-grid-of-the-layout-container
Sie können die Anzahl der Spalten konfigurieren, die für jede bestimmte Instanz des Layout-Containers verfügbar sind:
-
Autorenumgebung
Sie können die Anzahl der Spalten konfigurieren, die für jede bestimmte Instanz des Layout-Containers verfügbar sind.
Verwenden Sie dazu Designmodusund öffnen Sie dann das Dialogfeld "Design"für den erforderlichen Container. Hier können Sie festlegen, wie viele Spalten für die Positionierung und Größenanpassung verfügbar sein sollen. Der Standardwert lautet 12.
-
XML
Definitionen für das responsive Raster finden Sie unter:
etc/design/<*your-project-name*>/.content.xml
Die folgenden Parameter können definiert werden:
-
Anzahl der verfügbaren Spalten:
columns="{String}8"
-
Komponenten, die zur aktuellen Komponente hinzugefügt werden können:
components="[/libs/wcm/foundation/components/responsivegrid, ...
-