Konfigurieren von Layout-Container und Layout-Modus configuring-layout-container-and-layout-mode

Erfahren Sie, wie Sie Layout-Container und den Layout-Modus konfigurieren.

Überblick overview

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 durch eine Kombination von Mechanismen ermöglicht:

Mit diesen responsiven Rastermechanismen können Sie:

Konfigurieren des responsiven Emulators configuring-the-responsive-emulator

Mit dieser Aufgabe können Sie den responsiven Emulator auf Ihrer Site anzeigen.

Registrieren von 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.

Festlegen der Gerätegruppen specify-the-device-groups

Informationen zum Festlegen der Gerätegruppen, die in der Geräteliste des Emulators angezeigt werden, finden Sie unter Festlegen der Gerätegruppen.

Verknüpfen der Site mit den festgelegten Gerätegruppen link-your-site-to-the-specified-device-groups

Um den Emulator einzuschließen, verknüpfen Sie Ihre Site mit den Gerätegruppen. 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

Haltepunkte:

Haltepunkte können Sie mit CRXDE Lite oder XML definieren.

Konfigurieren von Breakpoints mithilfe von CRXDE Lite configuring-breakpoints-using-crxde-lite

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>

Hinzufügen eines responsiven Informationsanbieters 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.

Festlegen des Layout-Containers als Haupt-Absatzsystem set-layout-container-as-main-parsys

Um festzulegen, dass das Haupt-Absatzsystem Ihrer Seite ein Layout-Container sein sollen, definieren Sie die Absatzsysteme wie folgt:

wcm/foundation/components/responsivegrid

In entweder der:

Die folgenden beiden Beispiele veranschaulichen die Definition:

Einschließen von responsivem CSS include-the-responsive-css

CSS für Breakpoints 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.

Sie müssen auch eine Client-Bibliothek erstellen, 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 Gestaltung styling-considerations

Die Größe von Komponenten in einem responsiven Container wird (zusammen mit den entsprechenden HTML-DOM-Elementen) entsprechend der Größe des responsiven Rasters geändert. Daher empfehlen wir in diesen Fällen, Definitionen von (enthaltenen) DOM-Elementen mit fester Breite zu vermeiden (oder zu aktualisieren).

Zum Beispiel:

Größenanpassung und adaptive Bildkompatibilität resizing-and-adaptive-image-compliance

Jede Änderung der Größe einer Komponente innerhalb des Rasters löst mindestens einen der folgende Listener aus:

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.

Zum 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. Es wird aktiviert, wenn das DOM bereit ist oder 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 die Seite enable-the-layout-container-component-for-page

Mit diesen Aufgaben können Autorinnen und Autoren Instanzen der Layout-Container-Komponente auf die Seite verschieben.

Aktivieren der Layout-Container-Komponente für die Seitenbearbeitung enable-the-layout-container-component-for-page-editing

Damit Autorinnen und 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:

Konfigurieren des Rasters des Layout-Containers configure-the-grid-of-the-layout-container

Sie können die Anzahl der verfügbaren Spalten für jede spezifische Instanz des Layout-Containers konfigurieren:

Verschachtelte responsive Raster nested-responsive-grids

Gelegentlich ist es erforderlich, responsive Raster zu verschachteln, um die Anforderungen Ihres Projekts zu erfüllen. Beachten Sie jedoch, dass Adobe als Best Practice empfiehlt, die Struktur so flach wie möglich zu halten.

Wenn Sie die Verwendung verschachtelter responsiver Raster nicht vermeiden können, stellen Sie Folgendes sicher:

Dies betrifft alle strukturellen Container aus der Seitenvorlage.

Die Spaltenanzahl des inneren Containers darf nie größer sein als die des äußeren Containers. Das folgende Beispiel erfüllt diese Bedingung. Die Spaltenanzahl des äußeren Containers für den Standardbildschirm (Desktop) beträgt 8 und die des inneren Containers 4.

container
  @layout = responsiveGrid
  cq:responsive
    default
      @offset = 0
      @width = 8
  container
  @layout = responsiveGrid
    cq:responsive
      default
        @offset = 0
        @width = 4
    text
      @text =" Text Column 1"

<div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--8 aem-GridColumn--offset--default--0">
  <div id="container-c9955c233c" class="cmp-container">
    <div class="aem-Grid aem-Grid--8 aem-Grid--default--8 ">
      <div class="container responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
        <div id="container-8414e95866" class="cmp-container">
          <div class="aem-Grid aem-Grid--4 aem-Grid--default--4 ">
            <div class="text aem-GridColumn aem-GridColumn--default--4">
              <div data-cmp-data-layer="..." id="text-1234567890" class="cmp-text">
                <p>Text Column 1</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>