Erstellen benutzerdefinierter Vorlagen für Mehrzonen-Layouts creating-custom-templates-multizone

Feste Pixel-Größe oder Prozentwerte:

Entscheiden Sie, ob Sie für Ihr benutzerdefiniertes Layout eine feste Pixelgröße für verschiedene Bereiche verwenden möchten oder ob Sie ein benutzerdefiniertes Layout mit Prozentwerten erstellen möchten.

Namenskonvention:

Bevor Sie wissen, wie Sie benutzerdefinierte Vorlagen für mehrere Bereiche erstellen, um sie in einem AEM Screens-Projekt zu verwenden, sollten Sie die Begriffe kennen, die Sie erstellen möchten.

Erstellen Sie ein AEM Screens-Projekt mit dem Titel customtemplate.

Navigieren Sie zu CRXDE Lite von Ihrer AEM-Instanz > Tools > CRXDE Lite.

Erstellen eines Ordners unter apps benannt als customtemplate. Erstellen Sie auf ähnliche Weise einen weiteren Ordner mit dem Titel template under customtemplate, wie in der folgenden Abbildung dargestellt.

Kopieren Sie die Vorlage „lbar-left“ unter /libs/screens/core/templates/splitscreenchannel/lbar-left und fügen Sie sie unter /apps/customtemplate/template ein.

Benennen Sie die kopierte Vorlage lbar-left (/apps/customtemplate/template) in my-custom-layout um.

Navigieren Sie zu /apps/customtemplate/template/my-custom-layout und aktualisieren Sie die Eigenschaften jcr:description nach Vorlage fürLeft20-LandscapeHD3Zone und jcr:title nach Left20-LandscapeHD3Zone.

Navigieren Sie zum offline-config Knoten von /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config und aktualisieren Sie jcr:title nach Left20-LandscapeHD3Zone.

Navigieren Sie zum jcr:content Eigenschaft von my-custom-template von /apps/customtemplate/template/my-custom-layout/jcr:content und aktualisieren Sie cq:cssClass -Eigenschaft, damit Sie aem-layout my-custom-layout.

Gemäß Schritt 4, in den Sie die Vorlage "lbar-left"kopiert haben, können Sie unter drei responsive Raster anzeigen my-custom-layout/jcr:content. Fügen Sie benutzerdefinierte CSS-Klassen zu jedem responsiven Raster im cq:cssClass -Eigenschaft, beispielsweise my-custom-layout—top-left für r1c1 Knoten.

Fügen Sie auf die gleiche Weise my-custom-layout–top-right für den Knoten r1c2 und my-custom-layout–bottom für den Knoten r2c1 hinzu.

Kopieren Sie /libs/settings/wcm/designs/screens und fügen Sie es unter /apps/settings/wcm/designs/ ein. Benennen Sie das kopierte Design anschließend in custom-template-designs um.

Navigieren Sie zu /apps/settings/wcm/designs/custom-template-designs und die Eigenschaft aktualisieren jcr:title von custom-template-designs nach customtemplate-design.

Navigieren Sie zu /apps/settings/wcm/designs/custom-template-designs und erstellen Sie eine Datei mit dem Namen „static.css“.

Kopieren Sie den Inhalt in die Datei static.css:

    /*my-custom-layout styles*/
   .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left {
    width:20%;
    height: 36%;
   float: left !important;
   }
  .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right {
   width:80%;
   height: 36%;
  float: left !important;
  }
  .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom {
  width:100%;
  height: 64%;
  }

Navigieren Sie zu /apps/<project>/templates/my-custom-layout/jcr:content und die Eigenschaft aktualisieren cq:designPath nach /apps/settings/wcm/designs/customtemplate-designs sodass Sie die in static.css konfigurierten Stile laden können.

Navigieren Sie zu Ihrem Screens-Projekt, das Sie in Schritt 1 erstellt haben, und klicken Sie auf das Kanäle Ordner.

Klicks Erstellen in der Aktionsleiste auf die Vorlage klicken Left20-LandscapeHD3Zone aus dem Erstellen Assistent.

Nachdem Sie einen Kanal mit der angepassten Vorlage erstellt haben, können Sie Ihrem Kanal über den Editor Assets hinzufügen. Die folgende Vorschau zeigt die Bilder in einer benutzerdefinierten Vorlage.