Pagine e modelli pages-and-template

Controlla il ramo tutorial/pages-templates-start da GitHub

$ cd ~/code/aem-guides-wknd
$ git checkout tutorial/pages-templates-start

Distribuisci la base di codice in un’istanza AEM locale utilizzando le abilità Maven:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Crea un modello utilizzando il tipo di modello della pagina, denominato Pagina articolo.

Passa alla modalità Struttura.

Aggiungi un componente Frammento di esperienza che funga da intestazione nella parte superiore del modello.

• Configurare il componente in modo che punti a /content/experience-fragments/wknd/us/en/site/header/master.
• Imposta il criterio su Intestazione pagina e assicurati che l’elemento predefinito sia impostato su header. L’elemento headerha come destinazione CSS nel capitolo successivo.

Aggiungi un componente Frammento di esperienza che funga da piè di pagina nella parte inferiore del modello.

• Configurare il componente in modo che punti a /content/experience-fragments/wknd/us/en/site/footer/master.
• Imposta il criterio su Piè di pagina e assicurati che l’elemento predefinito sia impostato su footer. L’elemento footerha come destinazione CSS nel capitolo successivo.

Blocca il contenitore principale incluso al momento della creazione iniziale del modello.

• Imposta il criterio su Pagina principale e assicurati che l’elemento predefinito sia impostato su main. L’elemento main ha come destinazione CSS nel capitolo successivo.

Aggiungi un componente immagine al contenitore principale.

• Sblocca il componente Immagine.

Aggiungi un componente Breadcrumb sotto il componente Immagine nel contenitore principale.

• Crea un criterio per il componente Breadcrumb denominato Pagina articolo: Breadcrumb. Imposta il livello iniziale di navigazione su 4.

Aggiungi un componente Contenitore sotto il componente Breadcrumb e all’interno del contenitore principale. Questo funge da contenitore del contenuto per il modello.

• Sblocca il contenitore del contenuto.
• Imposta il criterio su Contenuto della pagina.

Aggiungi un altro componente Contenitore sotto il contenitore del contenuto. Questo funge da contenitore della barra laterale per il modello.

• Sblocca il contenitore della barra laterale.
• Crea un criterio denominato Pagina articolo: barra laterale.
• Configura i componenti consentiti in Progetto WKND di Sites: contenuto per includere: Pulsante, Download, Immagine, Elenco, Separatore, Condivisione social media, Testo e Titolo.

Aggiorna il criterio del contenitore Pagina principale. Questo è il contenitore più esterno del modello. Imposta il criterio su Pagina principale.

• Nelle impostazioni del contenitore, imposta il layout su Griglia reattiva.

Integra la modalità layout per il contenitore di contenuti. Trascina la maniglia da destra a sinistra e riduci il contenitore in modo che abbia una larghezza di otto colonne.

Integra la modalità layout per il contenitore della barra laterale. Trascina la maniglia da destra a sinistra e riduci il contenitore in modo che abbia una larghezza di quattro colonne. Trascina quindi la maniglia sinistra da sinistra a destra di una colonna per rendere il contenitore largo 3 colonne e lascia uno spazio di 1 colonna tra il contenitore di contenuti.

Apri l’emulatore mobile e passa a un punto di interruzione mobile. Integra la modalità layout e imposta il contenitore di contenuti e il contenitore della barra laterale per l’intera larghezza della pagina. In questo modo i contenitori vengono impilati verticalmente nel punto di interruzione mobile.

Aggiorna il criterio del componente Testo nel contenitore di contenuti.

• Imposta il criterio su Testo contenuto.
• In Plug-in > Stili paragrafo, seleziona Abilita stili paragrafo e assicurati che il blocco citazione sia abilitato.

Passa alla modalità Contenuto iniziale.

Aggiungi un componente Titolo al contenitore di contenuti. Questo funge da titolo dell’articolo. Quando viene lasciato vuoto, visualizza automaticamente il Titolo della pagina corrente.

Aggiungi un secondo componente Titolo sotto il primo componente Titolo.

• Configura il componente con il testo: "Per autore". È il segnaposto per il testo.
• Imposta il tipo su H4.

Aggiungi un componente Testo sotto il componente Titolo Autore.

Aggiungi un componente Titolo al Contenitore barra laterale.

• Configura il componente con il testo: "Condividi questa storia".
• Imposta il tipo su H5.

Aggiungi un componente Condivisione social media sotto il componente titolo Condividi questa storia.

Aggiungi un componente Separatore sotto il componente Condivisione social media.

Aggiungi un componente Scarica sotto il componente Separatore.

Aggiungi un componente Elenco sotto il componente Scarica.

Aggiorna le Proprietà pagina iniziale per il modello.

• In Social Media > Condivisione social media, seleziona Facebook e Pinterest

Visualizza il modello nella console Modelli passando a http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd

Abilita il modello della pagina dell'articolo.

Modifica le proprietà del modello Pagina articolo e carica la miniatura seguente per identificare rapidamente le pagine create utilizzando il modello Pagina articolo:

Scarica il pacchetto di contenuti di esempio WKND-PagesTemplates-Content-Assets.zip.

Carica e installa il pacchetto di contenuti utilizzando Gestione pacchetti all'indirizzo http://localhost:4502/crx/packmgr/index.jsp

Aggiorna il modello Variante Web, che è il modello utilizzato per i frammenti di esperienza in http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html

• Aggiorna il criterio del componente Contenitore nel modello.
• Imposta il criterio su XF Root.
• In Componenti consentiti seleziona il gruppo di componenti Progetto WKND Sites - Struttura per includere i componenti Navigazione lingua, Navigazione e Ricerca rapida.

Apri il frammento di esperienza che esegue il rendering dell’intestazione in http://localhost:4502/editor.html/content/experience-fragments/wknd/it/it/site/header/master.html

Configura il contenitore principale del frammento. Questo è il contenitore più esterno.

• Imposta il layout su Griglia reattiva

Aggiungi il logo WKND Dark come immagine nella parte superiore del contenitore. Il logo è stato incluso nel pacchetto installato in un passaggio precedente.

• Modifica il layout del logo WKND Dark in modo che sia largo due colonne. Trascina le maniglie da destra a sinistra.
• Configura il logo con il testo alternativo “Logo WKND”.
• Configura il logo per collegare /content/wknd/us/en alla pagina Home.

Configura il componente Navigazione già inserito nella pagina.

• Imposta Escludi livelli principali su 1.
• Imposta la profondità della struttura di navigazione su 1.
• Modifica il layout del componente Navigazione in modo che sia largo otto colonne. Trascina le maniglie da destra a sinistra.

Rimuovi il componente Navigazione lingua.

Modifica il layout del componente Ricerca in modo che sia largo due colonne. Trascina le maniglie da destra a sinistra. Ora tutti i componenti devono essere allineati orizzontalmente su un’unica riga.

Apri il frammento di esperienza che esegue il rendering del piè di pagina in http://localhost:4502/editor.html/content/experience-fragments/wknd/it/it/site/footer/master.html

Configura il contenitore principale del frammento. Questo è il contenitore più esterno.

• Imposta il layout su Griglia reattiva

Aggiungi il logo WKND Light come immagine nella parte superiore del contenitore. Il logo è stato incluso nel pacchetto installato in un passaggio precedente.

• Modifica il layout del logo WKND Light in modo che sia largo due colonne. Trascina le maniglie da destra a sinistra.
• Configura il logo con il testo alternativo “WKND Logo Light”.
• Configura il logo per collegare /content/wknd/us/en alla pagina Home.

Aggiungi un componente Navigazione sotto il logo. Configura il componente Navigazione:

• Imposta Escludi livelli principali su 1.
• Deseleziona Raccogli tutte le pagine secondarie.
• Imposta la profondità della struttura di navigazione su 1.
• Modifica il layout del componente Navigazione in modo che sia largo otto colonne. Trascina le maniglie da destra a sinistra.

Passa alla console di Sites all’indirizzo http://localhost:4502/sites.html/content/wknd/it/it/magazine.

Crea una pagina sotto WKND > IT > IT > Magazine.

• Scegli il modello Pagina articolo.
• In Proprietà imposta il Titolo su “Ultimate Guide to LA Skateparks”
• Imposta il Nome su “guide-la-skateparks”

Sostituisci il titolo Autore con il testo “Stacey Roswells”.

Aggiorna il componente Testo per includere un paragrafo per compilare l’articolo. Puoi utilizzare il seguente file di testo come copia: la-skate-parks-copy.txt.

Aggiungi un altro componente Testo.

• Aggiorna il componente per includere la citazione: "Non c'è posto migliore da condividere di Los Angeles".
• Modifica l'Editor Rich Text in modalità a schermo intero e modifica le virgolette per utilizzare l'elemento Blocco virgolette.

Continua a popolare il corpo dell’articolo in modo che corrisponda ai modelli.

Configura il componente Scarica per utilizzare una versione PDF dell'articolo.

• In Scarica > Proprietà, fai clic sulla casella di controllo per Ottieni il titolo dalla risorsa DAM.
• Imposta la Descrizione su: "Ottieni la storia completa".
• Imposta il Testo azione su: "Scarica PDF".

Configura il componente Elenco.

• In Impostazioni elenco > Genera elenco con, seleziona Pagine secondarie.
• Imposta la Pagina principale su /content/wknd/us/en/magazine.
• In, Impostazioni elemento seleziona Collega elementi e Mostra data.

Apri CRXDE-Lite e utilizza la struttura di navigazione per passare a /content/wknd/us/en/magazine/guide-la-skateparks.

Fai clic sul nodo jcr:content sotto la pagina la-skateparks per visualizzare le proprietà:

Osserva il valore per cq:template, che punta a /conf/wknd/settings/wcm/templates/article-page, il modello della pagina dell'articolo creato in precedenza.

Tieni presente anche il valore di sling:resourceType, che punta a wknd/components/page. Questo è il componente pagina creato dall’archetipo del progetto AEM ed è responsabile del rendering della pagina in base al modello.

Espandi il nodo jcr:content sotto /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content per visualizzare la gerarchia dei nodi:

Dovresti essere in grado di mappare liberamente ciascuno dei nodi ai componenti creati. Verifica se è possibile identificare i diversi contenitori di layout utilizzati esaminando i nodi con prefisso container.

Esamina quindi il componente pagina in /apps/wknd/components/page. Visualizza le proprietà del componente in CRXDE Lite:

Ci sono solo due script HTL, customfooterlibs.html e customheaderlibs.html sotto il componente pagina. Come viene eseguito il rendering della pagina da questo componente?

La proprietà sling:resourceSuperType punta a core/wcm/components/page/v2/page. Questa proprietà consente al componente pagina del WKND di ereditare tutte le funzionalità del componente pagina del componente core. Questo è il primo esempio di un Modello di componente proxy. Ulteriori informazioni sono disponibili qui.

Esamina un altro componente all'interno dei componenti WKND, il componente Breadcrumb di: /apps/wknd/components/breadcrumb. Puoi trovare la stessa proprietà sling:resourceSuperType, ma questa volta punta a core/wcm/components/breadcrumb/v2/breadcrumb. Questo è un altro esempio di utilizzo del modello di componente Proxy per includere un Componente core. Infatti, tutti i componenti nella base di codice WKND sono proxy dei Componenti core di AEM (ad eccezione del componente demo personalizzato HelloWorld). È consigliabile riutilizzare quante più funzionalità dei Componenti core possibili prima della scrittura di codice personalizzato.

Esamina quindi la pagina dei Componenti core in /libs/core/wcm/components/page/v2/page utilizzando CRXDE Lite:

Tieni presente che molti file di script sono inclusi in questa pagina. La pagina dei Componenti core contiene numerose funzionalità. Questa funzionalità è suddivisa in più script per facilitarne la manutenzione e la leggibilità. Per tracciare l'inclusione degli script HTL, apri page.html e cerca data-sly-include:

<!--/* /libs/core/wcm/components/page/v2/page/page.html */-->
<!DOCTYPE HTML>
<html data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page" lang="${page.language}"
    data-sly-use.head="head.html"
    data-sly-use.footer="footer.html"
    data-sly-use.redirect="redirect.html">
    <head data-sly-call="${head.head @ page = page}"></head>
    <body class="${page.cssClassNames}"
        id="${page.id}"
        data-cmp-data-layer-enabled="${page.data ? true : false}">
        <script data-sly-test.dataLayerEnabled="${page.data}">
        window.adobeDataLayer = window.adobeDataLayer || [];
        adobeDataLayer.push({
            page: JSON.parse("${page.data.json @ context='scriptString'}"),
            event:'cmp:show',
            eventInfo: {
                path: 'page.${page.id @ context="scriptString"}'
            }
        });
        </script>
        <sly data-sly-test.isRedirectPage="${page.redirectTarget && (wcmmode.edit || wcmmode.preview)}"
            data-sly-call="${redirect.redirect @ redirectTarget = page.redirectTarget}"></sly>
        <sly data-sly-test="${!isRedirectPage}">
            <sly data-sly-include="body.skiptomaincontent.html"></sly>
            <sly data-sly-include="body.socialmedia_begin.html"></sly>
            <sly data-sly-include="body.html"></sly>
            <sly data-sly-call="${footer.footer @ page = page}"></sly>
            <sly data-sly-include="body.socialmedia_end.html"></sly>
        </sly>
    </body>
</html>

L’altro motivo per suddividere HTL in più script è quello di consentire ai componenti proxy di ignorare singoli script per implementare una logica di business personalizzata. Gli script HTL customfooterlibs.html e customheaderlibs.html sono creati allo scopo esplicito di essere sostituiti dall’implementazione dei progetti.

Leggi questo articolo ](https://experienceleague.adobe.com/docs/experience-manager-65/developing/platform/templates/page-templates-editable.html?lang=it) per saperne di più sul modo in cui il modello modificabile influisce sul rendering della pagina del contenuto [.

Esaminare un altro Componente core, ad esempio Breadcrumb in /libs/core/wcm/components/breadcrumb/v2/breadcrumb. Visualizza lo script breadcrumb.html per comprendere come viene generato il markup per il componente Breadcrumb.

In, VSCode apri il progetto aem-guides-wknd.

Espandi il modulo ui.content in Esplora progetti. Espandi la cartella src e passa a /conf/wknd/settings/wcm/templates.

Fai clic con il pulsante destro del mouse sulla cartella templates e seleziona Importa da AEM Server:

È necessario importare article-page e aggiornare anche i modelli page-content e xf-web-variation.

Ripeti i passaggi per importare il contenuto, ma seleziona la cartella criteri da /conf/wknd/settings/wcm/policies.

Controlla il file filter.xml da ui.content/src/main/content/META-INF/vault/filter.xml.

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/conf/wknd" mode="merge"/>
    <filter root="/content/wknd" mode="merge"/>
    <filter root="/content/dam/wknd" mode="merge"/>
    <filter root="/content/experience-fragments/wknd" mode="merge"/>
</workspaceFilter>

Il file filter.xml è responsabile dell'identificazione dei percorsi dei nodi installati con il pacchetto. Osserva mode="merge" su ciascuno dei filtri che indica che il contenuto esistente non deve essere modificato, solo il nuovo contenuto viene aggiunto. Poiché gli autori di contenuto potrebbero aggiornare questi percorsi, è importante che una distribuzione del codice non sovrascriva il contenuto. Per ulteriori informazioni sull'utilizzo degli elementi del filtro, consulta la documentazione di FileVault.

Confronta ui.content/src/main/content/META-INF/vault/filter.xml e ui.apps/src/main/content/META-INF/vault/filter.xml per comprendere i diversi nodi gestiti da ciascun modulo.