Modelli di pagina - Statici

Ultimo aggiornamento: 2023-05-04
  • Argomenti:
  • Developing
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Developer
ATTENZIONE

AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

Un modello viene utilizzato per creare una pagina e definisce quali componenti possono essere utilizzati all’interno dell’ambito selezionato. Un modello è una gerarchia di nodi con la stessa struttura della pagina da creare, ma senza alcun contenuto effettivo.

Ogni modello presenta una selezione di componenti disponibili per l’uso.

  • I modelli sono costituiti da Componenti;
  • I componenti utilizzano e consentono l’accesso ai Widget e questi vengono utilizzati per il rendering del contenuto.
NOTA

Modelli modificabili sono inoltre disponibili e sono il tipo consigliato di modelli per la maggior flessibilità e le funzioni più recenti.

Proprietà e nodi secondari di un modello

Un modello è un nodo di tipo cq:Template e ha le seguenti proprietà e nodi figlio:

Nome
Tipo
Descrizione
.
cq:Template Modello corrente. Un modello è di tipo nodo cq:Template.
allowedChildren Stringa[] Percorso di un modello che può essere un elemento secondario di questo modello.
allowedGenents Stringa[] Percorso di un modello che può essere un elemento padre di questo modello.
allowedPaths Stringa[] Percorso di una pagina che può essere basata su questo modello.
jcr:created Data Data di creazione del modello.
jcr:description Stringa Descrizione del modello.
jcr:title Stringa Titolo del modello.
classificazione Lungo Classificazione del modello. Utilizzato per visualizzare il modello nell'interfaccia utente.
jcr:content cq:PageContent Nodo contenente il contenuto del modello.
thumbnail.png nt:file Miniatura del modello.
icon.png nt:file Icona del modello.

Un modello è la base di una pagina.

Per creare una pagina, il modello deve essere copiato (node-tree /apps/<myapp>/template/<mytemplate>) nella posizione corrispondente nell'albero del sito: questo è ciò che accade se una pagina viene creata utilizzando Siti Web scheda .

Questa azione di copia dà alla pagina anche il suo contenuto iniziale (di solito solo contenuto di livello principale) e la proprietà sling:resourceType, il percorso del componente della pagina che viene utilizzato per eseguire il rendering della pagina (tutto nel nodo figlio jcr:content).

Struttura dei modelli

Ci sono due aspetti da considerare:

  • la struttura del modello stesso
  • la struttura del contenuto prodotto quando viene utilizzato un modello

La struttura di un modello

Un modello viene creato sotto un nodo di tipo cq:Template.

screen_shot_2012-02-13at63646pm

È possibile impostare varie proprietà, in particolare:

  • jcr:title - titolo del modello; viene visualizzata nella finestra di dialogo durante la creazione di una pagina.
  • jcr:description - descrizione del modello; viene visualizzata nella finestra di dialogo durante la creazione di una pagina.

Questo nodo contiene un nodo jcr:content (cq:PageContent) che può essere utilizzato come base per il nodo di contenuto delle pagine risultanti; fa riferimento, utilizzando sling:resourceType, al componente da utilizzare per il rendering del contenuto effettivo di una nuova pagina.

screen_shot_2012-02-13at64010pm

Questo componente viene utilizzato per definire la struttura e la progettazione del contenuto quando viene creata una nuova pagina.

screen_shot_2012-02-13at64137pm

Contenuto prodotto da un modello

I modelli vengono utilizzati per creare pagine di tipo cq:Page (come indicato in precedenza, una pagina è un tipo speciale di componente). Ogni pagina AEM ha un nodo strutturato jcr:content. Tale comportamento:

  • è di tipo cq:PageContent
  • è un tipo di nodo strutturato contenente una definizione di contenuto definita
  • ha una proprietà sling:resourceType per fare riferimento al componente contenente gli script sling utilizzati per il rendering del contenuto

Modelli predefiniti

AEM viene fornito con una serie di modelli predefiniti disponibili. In alcuni casi, è possibile utilizzare i modelli così come sono. In tal caso, è necessario assicurarsi che il modello sia disponibile per il sito web.

Ad esempio, AEM viene fornito con diversi modelli, tra cui una pagina di contenuto e una home page.

Titolo Component Dove si trova Scopo
Home page homepage geometrixx Modello della home page del Geometrixx.
Pagina contenuto contentpage geometrixx Modello di pagina del contenuto di Geometrixx.

Visualizzazione dei modelli predefiniti

Per visualizzare un elenco di tutti i modelli nel repository, procedere come segue:

  1. In CRXDE Lite, apri le Strumenti menu e fai clic su Query.

  2. Nella scheda Query

  3. Come Tipo, seleziona XPath.

  4. Nel campo di inserimento Query, immetti la stringa seguente:

    //element(*, cq:Template)

  5. Fai clic su Esegui. L’elenco viene visualizzato nella casella dei risultati.

Nella maggior parte dei casi, si prende un modello esistente e ne si sviluppa uno nuovo per il proprio uso. Vedi Sviluppo di modelli di pagina per ulteriori informazioni.

Per abilitare un modello esistente per il sito web e desideri che venga visualizzato nel Crea pagina finestra di dialogo durante la creazione di una pagina in Siti Web dal Siti Web imposta la proprietà allowedPaths del nodo del modello su: /content(/.*?lang=it)?

Modalità di applicazione delle progettazioni di modelli

Quando gli stili vengono definiti nell’interfaccia utente tramite Modalità Progettazione, la progettazione viene mantenuta nel percorso esatto del nodo di contenuto per il quale viene definito lo stile.

ATTENZIONE

L'Adobe consiglia di applicare i disegni solo attraverso Modalità Progettazione.

Ad esempio, la modifica dei progetti in CRX DE non è una best practice e l’applicazione di tali progetti può variare dal comportamento previsto.

Se le progettazioni vengono applicate solo utilizzando la modalità Progettazione, le sezioni seguenti: Risoluzione del percorso di progettazione, Albero decisionalee Esempio non sono applicabili.

NOTA

Questa sezione descrive il comportamento nella risoluzione del percorso di progettazione a partire dalla AEM 6.4.2.0.

Risoluzione del percorso di progettazione

Quando esegui il rendering del contenuto basato su un modello statico, AEM tenterà di applicare la progettazione e gli stili più rilevanti al contenuto in base a un attraversamento della gerarchia dei contenuti.

AEM determina lo stile più pertinente per un nodo di contenuto nel seguente ordine:

  • Se esiste una progettazione per il percorso completo ed esatto del nodo di contenuto (come quando la progettazione è definita in modalità Progettazione), utilizza tale progettazione.
  • Se esiste una progettazione per il nodo di contenuto del padre, utilizza tale progettazione.
  • Se esiste una progettazione per qualsiasi nodo sul percorso del nodo di contenuto, utilizza tale progettazione.

Negli ultimi due casi, se è presente più di una progettazione applicabile, utilizza quella più vicina al nodo del contenuto.

Albero decisionale

Questa è una rappresentazione grafica del Risoluzione del percorso di progettazione logica.

design_path_resolution

Esempio

Considera una semplice struttura di contenuto come segue, in cui una progettazione può essere applicata a uno qualsiasi dei nodi:

/root/branch/leaf

Nella tabella seguente viene descritto come AEM scegliere una progettazione.

Ricerca Di Design Per
Sono Presenti Progettazioni Per
Progettazione scelta
Commenti
leaf

root

branch

leaf

leaf La corrispondenza più esatta è sempre presa.
leaf

root

branch

branch Ritornate alla corrispondenza più vicina nella parte inferiore dell'albero.
leaf root root Se tutto il resto fallisce, prendi quello che rimane.
branch branch branch
branch

branch

leaf

branch
branch

root

branch

branch
branch

root

leaf

root

Se non c'è una corrispondenza esatta, prendere quella più in basso nell'albero.

Il presupposto è che questo sarà sempre applicabile, ma più in alto l'albero può essere troppo specifico.

Sviluppo di modelli di pagina

AEM modelli di pagina sono semplicemente modelli utilizzati per creare nuove pagine. Possono contenere il contenuto iniziale necessario o il contenuto necessario, il cui ruolo consiste nel creare le strutture dei nodi iniziali corrette, con le proprietà richieste (principalmente sling:resourceType) impostate per consentire la modifica e il rendering.

Creazione di un nuovo modello (basato su un modello esistente)

Inutile dire che un nuovo modello può essere creato completamente da zero, ma spesso un modello esistente verrà copiato e aggiornato per risparmiare tempo e fatica. Ad esempio, i modelli all’interno di Geometrixx possono essere utilizzati per iniziare a usarli.

Per creare un nuovo modello basato su un modello esistente:

  1. Copiare un modello esistente (preferibilmente con una definizione il più simile possibile a quello che si desidera ottenere) in un nuovo nodo.

    In genere, i modelli sono memorizzati in /apps/<website-name>/templates/<template-name>.

    NOTA

    L’elenco dei modelli disponibili dipende dalla posizione della nuova pagina e dalle restrizioni di posizionamento specificate in ciascun modello. Vedi Disponibilità del modello.

  2. Modificare la jcr:title del nuovo nodo del modello per riflettere il suo nuovo ruolo. È inoltre possibile aggiornare jcr:description se del caso. Modifica la disponibilità del modello della pagina come appropriato.

    NOTA

    Se desideri che il modello sia visualizzato nella Crea pagina finestra di dialogo durante la creazione di una pagina in Siti Web dal Siti Web imposta la allowedPaths proprietà del nodo del modello a: /content(/.*)?

    chlimage_1-251

  3. Copia il componente su cui si basa il modello (indicato dalla sling:resourceType proprietà jcr:content nodo all'interno del modello) per creare una nuova istanza.

    In genere, i componenti sono memorizzati in /apps/<website-name>/components/<component-name>.

  4. Aggiorna jcr:title e jcr:description del nuovo componente.

  5. Sostituire il file thumbnail.png se si desidera visualizzare una nuova immagine thumbnail nell'elenco di selezione del modello (dimensioni 128 x 98 px).

  6. Aggiorna sling:resourceType del modello jcr:content per fare riferimento al nuovo componente.

  7. Apporta ulteriori modifiche alla funzionalità o alla progettazione del modello e/o del relativo componente sottostante.

    NOTA

    Modifiche apportate al /apps/<website>/templates/<template-name> il nodo influenzerà l’istanza del modello (come nell’elenco di selezione).
    Modifiche apportate al /apps/<website>/components/<component-name> il nodo influisce sulla pagina di contenuto creata quando viene utilizzato il modello.

    Ora puoi creare una pagina all’interno del sito web utilizzando il nuovo modello.

NOTA

La libreria client dell'editor presuppone la presenza di cq.shared spazio dei nomi nelle pagine di contenuto e se è assente nell'errore JavaScript Uncaught TypeError: Cannot read property 'shared' of undefined risulterà.
Tutte le pagine di contenuto di esempio contengono cq.shared, quindi qualsiasi contenuto basato su di essi include automaticamente cq.shared. Tuttavia, se decidi di creare da zero pagine di contenuto personalizzate senza basarle su contenuti di esempio, devi assicurarti di includere il cq.shared spazio dei nomi.
Vedi Utilizzo delle librerie lato client per ulteriori informazioni.

Rendere disponibile un modello esistente

Questo esempio illustra come consentire l’utilizzo di un modello per determinati percorsi di contenuto. I modelli disponibili per l’autore della pagina durante la creazione di nuove pagine sono determinati dalla logica definita in Disponibilità del modello.

  1. In CRXDE Lite, passa al modello da utilizzare per la pagina, ad esempio il modello Newsletter .

  2. Modificare la allowedPaths proprietà e altre proprietà utilizzate per disponibilità del modello. Ad esempio: allowedPaths: /content/geometrixx-outdoors/[^/]+(/.*)? significa che questo modello è consentito in qualsiasi percorso in /content/geometrixx-outdoors.

    chlimage_1-252

In questa pagina