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

Implementa la base di codice in un’istanza AEM locale utilizzando le tue competenze Maven:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

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

Passa alla modalità Struttura.

Aggiungi un componente Frammento 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 header ha come destinazione CSS nel capitolo successivo.

Aggiungi un componente Frammento 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 footer ha come destinazione CSS nel capitolo successivo.

Blocca il contenitore main 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 Image al contenitore main.

• Sblocca il componente Immagine.

Aggiungi un componente Breadcrumb sotto il componente Image 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 Container sotto il componente Breadcrumb e all'interno del contenitore main. Funge da Contenitore contenuto per il modello.

• Sblocca il contenitore Contenuto.
• Imposta il criterio su Contenuto pagina.

Aggiungi un altro componente Contenitore sotto il Contenitore contenuto. Funge da contenitore Barra laterale per il modello.

• Sblocca il contenitore Barra laterale.
• Crea un criterio denominato Pagina articolo - Barra laterale.
• Configura i Componenti consentiti in Progetto WKND Sites - Contenuto per includere: Pulsante, Scarica, 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.

• In Impostazioni contenitore, impostare Layout su Griglia reattiva.

Coinvolgi modalità layout per il contenitore di contenuti. Trascina la maniglia da destra a sinistra e riduci il contenitore a otto colonne di larghezza.

Coinvolgi la modalità di 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. Trascinare quindi la maniglia sinistra da sinistra a destra di una colonna per rendere il contenitore largo 3 colonne e lasciare uno spazio di 1 colonna tra il contenitore contenuto.

Apri l’emulatore mobile e passa a un punto di interruzione mobile. Rivolgiti alla modalità di 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 contenuto.

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

Passa alla modalità Contenuto iniziale.

Aggiungi un componente Titolo al Contenitore contenuto. 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". Segnaposto di testo.
• Impostare 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".
• Impostare 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 List sotto il componente Download.

Aggiorna 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 Container nel modello.
• Imposta il criterio su XF Root.
• In Componenti consentiti seleziona il gruppo di componenti Progetto WKND Sites - Struttura per includere Navigazione lingua, Navigazione e Ricerca rapida componenti.

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

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

• Imposta 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.

• Modificare il layout del logo WKND Dark in modo che sia largo due colonne. Trascinare le maniglie da destra a sinistra.
• Configura il logo con Testo alternativo di "Logo WKND".
• Configura il logo per Collegare per /content/wknd/us/en la home page.

Configura il componente Navigazione già inserito nella pagina.

• Imposta Escludi livelli principali su 1.
• Impostare Annidamento struttura di spostamento su 1.
• Modificare il layout del componente Navigazione in modo che sia largo otto colonne. Trascinare le maniglie da destra a sinistra.

Rimuovi il componente Navigazione lingua.

Modificare il layout del componente Ricerca in modo che sia largo due colonne. Trascinare 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/us/en/site/footer/master.html

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

• Imposta 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.

• Modificare il layout del logo WKND Light in modo che sia largo due colonne. Trascinare le maniglie da destra a sinistra.
• Configura il logo con Testo alternativo di "WKND Logo Light".
• Configura il logo per Collegare per /content/wknd/us/en la home page.

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

• Imposta Escludi livelli principali su 1.
• Deseleziona Raccogli tutte le pagine figlie.
• Impostare Annidamento struttura di spostamento su 1.
• Modificare il layout del componente Navigazione in modo che sia largo otto colonne. Trascinare le maniglie da destra a sinistra.

Passa alla console Sites all'indirizzo http://localhost:4502/sites.html/content/wknd/us/en/magazine.

Crea una pagina sotto WKND > US > EN > Magazine.

• Scegli il modello Pagina articolo.
• In Proprietà impostare Titolo su "Guida di Ultimate agli skatepark LA"
• Imposta Name su "guide-la-skateparks"

Sostituisci Per titolo autore con il testo "Di Stacey Roswells".

Aggiorna il componente Testo per includere un paragrafo per compilare l'articolo. È possibile 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 in modo che utilizzi una versione PDF dell'articolo.

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

Configura il componente List.

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

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

Fare clic sul nodo jcr:content sotto la pagina la-skateparks e 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.

Notare inoltre il valore di sling:resourceType, che punta a wknd/components/page. Questo è il componente pagina creato dall’archetipo di progetto AEM ed è responsabile del rendering della pagina basata sul modello.

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

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

Esaminare quindi il componente page 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 page. 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 page del WKND di ereditare tutte le funzionalità del componente page del componente core. Questo è il primo esempio di un modello di componente proxy 🔗. Ulteriori informazioni sono disponibili qui.

Inspect è un altro componente all'interno dei componenti WKND, il componente Breadcrumb di: /apps/wknd/components/breadcrumb. È possibile 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 AEM (ad eccezione del componente demo personalizzato HelloWorld). È consigliabile riutilizzare quante più funzionalità dei Componenti core possibili prima della scrittura di codice personalizzato.

Esaminare 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 sotto 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, aprire page.html e cercare 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🔗 per saperne di più sul modo in cui il modello modificabile influisce sul rendering della pagina di contenuto .

Inspect è un altro componente core, come il 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 apre il progetto aem-guides-wknd.

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

Fare clic con il pulsante destro del mouse sulla cartella templates e selezionare Importa da server AEM:

È 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.

Inspect 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, ma 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, vedere la documentazione di FileVault.

Confrontare 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.