Creazione di modelli personalizzati per i layout multizona creating-custom-templates-multizone
In questa pagina viene illustrato come creare un modello personalizzato per un layout multizona.
Considerazioni importanti considerations
Prima di creare un modello personalizzato in un layout multizona è necessario tenere presenti due considerazioni importanti:
-
Dimensioni pixel fisse o percentuali:
Decidi se utilizzare dimensioni pixel fisse per aree diverse per il layout personalizzato o se desideri creare un layout personalizzato utilizzando le percentuali.
note note NOTE L’utilizzo della percentuale per impostare le zone per il layout personalizzato consente di riutilizzare il modello su schermi di varie dimensioni. -
Convenzione di denominazione:
Consente di comprendere come creare modelli personalizzati per più aree da utilizzare in un progetto AEM Screens. Ma prima di tutto, devi capire il limite dei modelli che vuoi creare.
table 0-row-2 1-row-2 2-row-2 3-row-2 Nome layout Descrizione Left20-LandscapeHD3Zone
Layout orizzontale a tre zone che consente di creare tre zone:
* Zona 1 come 20% dello schermo orizzontale e verticale da sinistra
* Zona 2 come 80% dello schermo orizzontale e 20% dello schermo verticale giustificato a destra
* Zona 3 come 100% dello schermo orizzontale e 80% dello schermo verticale. Il rapporto di formato è 16:9Upper20-PortraitHD2Zone
Modello di ritratto in due zone che copre il 20% dello schermo dalla parte superiore, con proporzioni di 16:9 Right20-LandscapeSD3Zone
Modello a tre aree che copre il 20% dello schermo da destra, con proporzioni di 4:3 note important IMPORTANT Le aree definite nel layout personalizzato potrebbero non corrispondere alle proporzioni complessive dell'intero layout. La convenzione di denominazione utilizzata in questo documento specifica le proporzioni del layout personalizzato nel suo complesso.
Esempio di utilizzo del caso Left20-LandscapeHD3Zone
Layout custom-template-one
Seguire la sezione seguente per creare un modello personalizzato Left20-LandscapeHD3Zone
con la seguente configurazione:
Left20
- La zona superiore a sinistra copre il 20% delle dimensioni dello schermo orizzontale e verticale.Landscape
- Orientamento dello schermo.HD
- Proporzioni 16:9.3Zone
- Tre aree della visualizzazione.
Rappresentazione visiva del layout MultiZone multi-layout-visual-one
Il layout Left20-LandscapeHD3Zone
consente di creare il seguente layout multizona nel progetto:
Creazione di un layout Left20-LandscapeHD3Zone
landscape-layout-one
Per creare un layout Left20-LandscapeHD3Zone
per un progetto AEM Screens, eseguire la procedura seguente.
-
Creare un progetto AEM Screens con titolo
customtemplate
. -
Passa a CRXDE Liti dalla tua istanza AEM > Strumenti > CRXDE Liti.
-
Crea una cartella in app con titolo
customtemplate
. Analogamente, creare un'altra cartella con titolo modello incustomtemplate
, come illustrato nella figura seguente.note note NOTE Fare clic su Salva tutto nella barra delle azioni di CRXDE Lite ogni volta che si crea, si modifica o si copia contenuto in uno dei nodi. In caso contrario, non è possibile eseguire il commit degli aggiornamenti. -
Copia il modello a sinistra della barra da
/libs/screens/core/templates/splitscreenchannel/lbar-left
a/apps/customtemplate/template
. -
Rinomina lbar-left (
/apps/customtemplate/template
) copiato in my-custom-layout.
-
Passare a
/apps/customtemplate/template/my-custom-layout
e aggiornare le proprietàjcr:description
a Modello perLeft20-LandscapeHD3Zone
ejcr:title
aLeft20-LandscapeHD3Zone
. -
Passare al nodo
offline-config
da/apps/customtemplate/template/my-custom-layout/jcr:content/offline-config
e aggiornarejcr:title
aLeft20-LandscapeHD3Zone
. -
Passa alla proprietà
jcr:content
di my-custom-template da/apps/customtemplate/template/my-custom-layout/jcr:content
e aggiorna la proprietàcq:cssClass
per poter utilizzare aem-Layout my-custom-layout. -
Con riferimento al passaggio (4) in cui è stato copiato il modello barra a sinistra, è possibile visualizzare tre griglie reattive in
my-custom-layout/jcr:content
. Aggiungi una classe CSS personalizzata a ciascuna griglia reattiva nella proprietàcq:cssClass
, ad esempio my-custom-layout-top-left per il nodo r1c1.Allo stesso modo, aggiungi my-custom-layout-top-right per r1c2 e my-custom-layout-bottom per il nodo r2c1.
note note NOTE Queste classi personalizzate vengono utilizzate nel CSS per impostare la larghezza/altezza di queste griglie reattive. note note NOTE È possibile aggiungere o rimuovere le griglie reattive in base al numero di griglie totali desiderate. In questo esempio vengono visualizzate due griglie nella prima riga e una nella seconda riga, in modo da ottenere un totale di tre griglie reattive (r1c1, r1c2, r2c1). -
Copiare
/libs/settings/wcm/designs/screens
in/apps/settings/wcm/designs/
e rinominare la progettazione copiata come custom-template-designs. -
Passa a
/apps/settings/wcm/designs/custom-template-designs
e aggiorna la proprietàjcr:title
di custom-template-designs in customtemplate-design. -
Passare a
/apps/settings/wcm/designs/custom-template-designs
e creare un file static.css. -
Copia il contenuto nel file
static.css
:code language-shell /*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%; }
note note NOTE Puoi aggiornare le percentuali in base ai requisiti del modello personalizzato. -
Passare a
/apps/<project>/templates/my-custom-layout/jcr:content
e aggiornare la proprietàcq:designPath
a/apps/settings/wcm/designs/customtemplate-designs
in modo da poter caricare gli stili configurati in static.css.note note NOTE Digita tutti gli stili invece di copiare o incollare, il che può causare spazi bianchi che causano problemi di stile CSS.
Visualizzazione del risultato viewing-result
Segui i passaggi seguenti per utilizzare il modello personalizzato di cui sopra nel tuo progetto AEM Screens:
-
Passa al progetto Screens creato al passaggio 1 e fai clic sulla cartella Canali.
-
Fare clic su Crea nella barra delle azioni e fare clic sul modello
Left20-LandscapeHD3Zone
nella procedura guidata Crea. -
Dopo aver creato un canale con il modello personalizzato, puoi aggiungere risorse al canale dall’editor. L’anteprima seguente mostra le immagini in un modello personalizzato.
Inserimento di un'immagine come livello di sfondo inserting-image
Potete inserire un'immagine come livello di sfondo nel layout:
È possibile regolare la regola CSS per utilizzare "data-uri" e allineare direttamente l'immagine (Base64
codificata) nel file CSS creato in (passaggio 13), static.css.
Questa disposizione viene eseguita come segue:.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }
Oppure, puoi seguire i passaggi seguenti:
- Assicurati che l’immagine sia inclusa in qualche modo nella configurazione offline per il canale.
- Utilizza un collegamento diretto all’immagine nel CSS qui sopra, invece della variante "data-uri".
Aggiornamento del colore di sfondo updating-color
Per modificare il colore di sfondo, aggiungere il codice seguente al file xml (passaggio 13), static.css.
.cq-Screens-channel--multizone.my-CustomLayout { background-color: …; }