Pagina's en sjablonen pages-and-template

Kijk uit de tutorial/pages-templates-start vertakking van GitHub

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

Stel codebasis aan een lokale AEM instantie op gebruikend uw Maven vaardigheden:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Een sjabloon maken met de opdracht Type paginasjabloon, benoemd Artikelpagina.

Overschakelen op Structuur -modus.

Een Ervaar fragment als de Koptekst boven aan de sjabloon.

• Vorm de component om te richten /content/experience-fragments/wknd/us/en/site/header/master.
• Beleid instellen op Paginakoptekst en ervoor zorgen dat de Standaardelement is ingesteld op header. De headerelement is gericht met CSS in het volgende hoofdstuk.

Een Ervaar fragment als de Voettekst onder aan de sjabloon.

• Vorm de component om te richten /content/experience-fragments/wknd/us/en/site/footer/master.
• Beleid instellen op Paginavoettekst en ervoor zorgen dat de Standaardelement is ingesteld op footer. De footer element is gericht met CSS in het volgende hoofdstuk.

De hoofd container die was inbegrepen toen het malplaatje aanvankelijk werd gecreeerd.

• Beleid instellen op Hoofdpagina van pagina en ervoor zorgen dat de Standaardelement is ingesteld op main. De main element is gericht met CSS in het volgende hoofdstuk.

Een Afbeelding aan de component hoofd container.

• Ontgrendel de Afbeelding component.

Voeg een Broodkruimel component onder de component Afbeelding in de hoofdcontainer.

• Een beleid maken voor de Broodkruimel component benoemd Artikel pagina - Broodkruimel. Stel de Beginniveau navigatie tot 4.

Voeg een Container component onder de component Broodkruimel en binnen de hoofd container. Dit fungeert als Inhoud container voor de sjabloon.

• Ontgrendel de Inhoud container.
• Beleid instellen op Pagina-inhoud.

Nog een toevoegen Container component onder de component Inhoud container. Dit fungeert als Zijspoor container voor de sjabloon.

• Ontgrendel de Zijspoor container.
• Een beleid maken met de naam Artikel Pagina - zijspoor.
• Vorm Toegestane componenten krachtens WKND-siteproject - Inhoud op te nemen: Knop, Downloaden, Afbeelding, Lijst, Scheidingsteken, Delen van sociale media, Tekst, en Titel.

Werk het beleid van de container van de Wortel van de Pagina bij. Dit is de buitenste container op de sjabloon. Beleid instellen op Basispagina.

• Onder Containerinstellingen, stelt u de Layout tot Responsief raster.

Modus Lay-out inschakelen voor de Inhoud container. Sleep de handgreep van rechts naar links en krimpt de container tot acht kolommen breed.

Modus Lay-out inschakelen voor de Zijspoor, container. Sleep de greep van rechts naar links en krimpt de container in tot vier kolommen breed. Sleep vervolgens de linkergreep van links naar rechts om de container 3 kolommen breed te maken en een tussenruimte van 1 kolom tussen de kolommen te laten staan Inhoud container.

Open de mobiele emulator en schakel over naar een mobiel onderbrekingspunt. Schakel de lay-outmodus opnieuw in en maak de Inhoud container en de Zijspoor, container de volledige breedte van de pagina. Hierdoor worden de containers verticaal in het mobiele onderbrekingspunt gestapeld.

Het beleid van de Tekst in de Inhoud container.

• Beleid instellen op Inhoudstekst.
• Onder Plug-ins > Alineastijlen, controle Alineastijlen inschakelen en ervoor zorgen dat de Offerteblok is ingeschakeld.

Overschakelen op Oorspronkelijke inhoud -modus.

Voeg een Titel aan de component Inhoud container. Dit is de titel van artikel. Als de pagina leeg blijft, wordt automatisch de titel van de huidige pagina weergegeven.

Een seconde toevoegen Titel component onder de eerste component Title.

• Configureer de component met de tekst "Door auteur". Dit is een tijdelijke aanduiding voor tekst.
• Te gebruiken tekst instellen H4.

Voeg een Tekst component onder de component Op auteur Component Titel.

Voeg een Titel aan de component Zijspoorcontainer.

• Configureer de component met de tekst "Dit artikel delen".
• Te gebruiken tekst instellen H5.

Voeg een Delen van sociale media component onder de component Dit artikel delen Component Titel.

Voeg een Scheidingsteken component onder de component Delen van sociale media component.

Voeg een Downloaden component onder de component Scheidingsteken component.

Voeg een Lijst component onder de component Downloaden component.

Werk de Oorspronkelijke pagina-eigenschappen voor de sjabloon.

• Onder Sociale media > Delen van sociale media, controle Facebook en Pinterest

Bekijk het malplaatje in de console van het Malplaatje door te navigeren aan http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd

Inschakelen de sjabloon voor artikelpagina.

Bewerk de eigenschappen van de sjabloon Artikelpagina en upload de volgende miniatuur om snel pagina's te identificeren die zijn gemaakt met de sjabloon Artikelpagina:

Download het pakket met voorbeeldinhoud WKND-PagesTemplates-Content-Assets.zip.

Upload en installeer het inhoudspakket met Package Manager op http://localhost:4502/crx/packmgr/index.jsp

Werk het malplaatje van de Variatie van het Web bij, dat het malplaatje voor de Fragmenten van de Ervaring bij wordt gebruikt http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html

• Werk het beleid bij Container op de sjabloon.
• Beleid instellen op XF-basiskleur.
• Onder, Toegestane componenten Selecteer de componentgroep WKND-siteproject - structuur op te nemen Taalnavigatie, Navigatie, en Snel zoeken componenten.

Open het fragment van de Ervaring dat de Kopbal bij teruggeeft http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html

De hoofdmap configureren Container van het fragment. Dit is de meest buitenste Container.

• Stel de Layout tot Responsief raster

Voeg de WKND Donker logo als een afbeelding boven aan het dialoogvenster Container. Het logo is opgenomen in het pakket dat in een vorige stap is geïnstalleerd.

• De lay-out van de WKND Donker logo te worden twee kolommen breed. Sleep de handgrepen van rechts naar links.
• Het logo configureren met Alternatieve tekst van "WKND-logo".
• Het logo configureren om Koppeling tot /content/wknd/us/en de startpagina.

Vorm Navigatie die al op de pagina is geplaatst.

• Stel de Basisniveaus uitsluiten tot 1.
• Stel de Navigatiestructuurdiepte tot 1.
• De lay-out van de Navigatie te gebruiken component acht kolommen breed. Sleep de handgrepen van rechts naar links.

Verwijder de Taalnavigatie component.

De lay-out van de Zoeken te gebruiken component twee kolommen breed. Sleep de handgrepen van rechts naar links. Alle componenten moeten nu horizontaal op één rij worden uitgelijnd.

Open het fragment van de Ervaring dat de Voettekst bij teruggeeft http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html

De hoofdmap configureren Container van het fragment. Dit is de meest buitenste Container.

• Stel de Layout tot Responsief raster

Voeg de WKND-lichtlogo als een afbeelding boven aan het dialoogvenster Container. Het logo is opgenomen in het pakket dat in een vorige stap is geïnstalleerd.

• De lay-out van de WKND-lichtlogo te worden twee kolommen breed. Sleep de handgrepen van rechts naar links.
• Het logo configureren met Alternatieve tekst van "WKND Logo Light".
• Het logo configureren om Koppeling tot /content/wknd/us/en de startpagina.

Voeg een Navigatie onder het logo. Vorm Navigatie component:

• Stel de Basisniveaus uitsluiten tot 1.
• Uitschakelen Alle onderliggende pagina's verzamelen.
• Stel de Navigatiestructuurdiepte tot 1.
• De lay-out van de Navigatie te gebruiken component acht kolommen breed. Sleep de handgrepen van rechts naar links.

Ga naar de Sites-console op http://localhost:4502/sites.html/content/wknd/us/en/magazine.

Een onderliggende pagina maken WKND > VS > NL > Tijdschrift.

• Kies de optie Artikelpagina sjabloon.
• Onder Eigenschappen instellen Titel naar "Ultimate Guide to LA Skateparks"
• Stel de Naam tot "guide-la-skateparks"

Vervangen Op auteur Titel met de tekst "Door Stacey Roswells".

Werk de Tekst om een alinea op te nemen om het artikel te vullen. U kunt het volgende tekstbestand als kopie gebruiken: la-skate-parks-copy.txt.

Nog een toevoegen Tekst component.

• Werk de component bij om het aanhalingsteken op te nemen: "Er is geen betere plaats om te delen dan Los Angeles.".
• Bewerk de Rich Text Editor in de modus Volledig scherm en wijzig het bovenstaande citaat om de Offerteblok element.

Blijf de tekst van het artikel vullen om deze aan te passen aan de modellen.

Vorm Downloaden om een PDF-versie van het artikel te gebruiken.

• Onder Downloaden > Eigenschappen, klik checkbox aan De titel ophalen van de DAM-middelen.
• Stel de Beschrijving naar: "Get the Full Story".
• Stel de Tekst van handeling naar: "Download PDF".

Vorm Lijst component.

• Onder Lijstinstellingen > Lijst samenstellen met, selecteert u Onderliggende pagina's.
• Stel de Bovenliggende pagina tot /content/wknd/us/en/magazine.
• Onder, Iteminstellingen controleren Items koppelen en controle Datum tonen.

Openen CRXDE-Lite en gebruik de boomnavigatie om te navigeren naar /content/wknd/us/en/magazine/guide-la-skateparks.

Klik op de knop jcr:content knooppunt onder de la-skateparks pagina en bekijk de eigenschappen:

Let op de waarde voor cq:template, die /conf/wknd/settings/wcm/templates/article-page, de sjabloon voor artikelpagina die u eerder hebt gemaakt.

Let ook op de waarde van sling:resourceType, die wknd/components/page. Dit is de paginacomponent die door het AEM projectarchetype wordt gecreeerd en is verantwoordelijk voor het teruggeven van pagina die op het malplaatje wordt gebaseerd.

Breid uit jcr:content knooppunt onder /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content en bekijk de knooppunthiërarchie:

U zou elk van de knopen aan componenten moeten kunnen losjes in kaart brengen die werden authored. Controleren of u de verschillende containers voor lay-out kunt identificeren die worden gebruikt door de knooppunten te inspecteren die vooraf zijn ingesteld container.

Controleer de pagina-component op /apps/wknd/components/page. De componenteigenschappen weergeven in CRXDE Lite:

Er zijn slechts twee HTML-scripts. customfooterlibs.html en customheaderlibs.html onder de pagina-component. Hoe geeft deze component de pagina weer?

De sling:resourceSuperType eigenschap verwijst naar core/wcm/components/page/v2/page. Met deze eigenschap kan de paginacomponent van de WKND overerven alles de functionaliteit van de pagina-component Core Component. Dit is het eerste voorbeeld van iets dat de Proxycomponentpatroon. Meer informatie is beschikbaar op hier.

Inspect een andere component binnen de WKND-componenten, de Breadcrumb component van: /apps/wknd/components/breadcrumb. Hetzelfde geldt sling:resourceSuperType eigenschap kan worden gevonden, maar deze keer verwijst deze naar core/wcm/components/breadcrumb/v2/breadcrumb. Dit is een ander voorbeeld van het gebruiken van het de componentenpatroon van de Volmacht om een Component van de Kern te omvatten. In feite, zijn alle componenten in de WKND codebasis volmachten van AEMComponenten van de Kern (behalve de component van douane demo HelloWorld). Het is aan te raden om zoveel mogelijk van de functionaliteit van kerncomponenten te hergebruiken voor aangepaste code schrijven.

Controleer de pagina Core Component op /libs/core/wcm/components/page/v2/page CRXDE Lite gebruiken:

U ziet dat er veel scriptbestanden onder deze pagina staan. De pagina Core Component bevat een groot aantal functies. Deze functionaliteit is opgedeeld in meerdere scripts voor eenvoudiger onderhoud en leesbaarheid. U kunt de opname van de HTML-scripts traceren door het dialoogvenster page.html en op zoek naar 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>

De andere reden om HTML in veelvoudige manuscripten uit te breken is de volmachtscomponenten toe te staan om individuele manuscripten met voeten te treden om douanebedrijfslogica uit te voeren. De HTML-scripts customfooterlibs.html, en customheaderlibs.html, worden gecreëerd om expliciet te worden vervangen door de uitvoering van projecten.

U kunt meer weten over de manier waarop de bewerkbare sjabloon invloed heeft op de rendering van de inhoudspagina door dit artikel te lezen.

Inspect nog een Core Component, zoals de Breadcrumb op /libs/core/wcm/components/breadcrumb/v2/breadcrumb. De weergave breadcrumb.html om te begrijpen hoe de prijsverhoging voor de component Breadcrumb uiteindelijk wordt geproduceerd.

In, opent VSCode aem-guides-wknd project.

Breid uit ui.content in de explorator van het Project. Breid uit src en navigeer naar /conf/wknd/settings/wcm/templates.

Right+Click de templates map en selecteer Importeren vanaf AEM server:

De article-page moeten worden ingevoerd en page-content, xf-web-variation sjablonen moeten ook worden bijgewerkt.

Herhaal de stappen om inhoud te importeren, maar selecteer de beleid map van /conf/wknd/settings/wcm/policies.

Inspect the filter.xml bestand van 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>

De filter.xml is verantwoordelijk voor het identificeren van de paden van knooppunten die samen met het pakket zijn geïnstalleerd. Let op: mode="merge" op elk van de filters die aangeeft dat bestaande inhoud niet moet worden gewijzigd, wordt alleen nieuwe inhoud toegevoegd. Aangezien de inhoudsauteurs deze wegen kunnen bijwerken, is het belangrijk dat een codeplaatsing doet niet overschrijven, inhoud. Zie de FileVault-documentatie voor meer informatie over het werken met filterelementen.

Ververgelijken ui.content/src/main/content/META-INF/vault/filter.xml en ui.apps/src/main/content/META-INF/vault/filter.xml om de verschillende knopen te begrijpen die door elke module worden beheerd.