Pagina's en sjablonen pages-and-template

Controle uit de tutorial/pages-templates-start tak 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

Creeer een malplaatje gebruikend het Type van Malplaatje van de Pagina, genoemd Pagina van het Artikel.

Schakelaar in de wijze van de Structuur.

Voeg een component van het Fragment van de Ervaring toe om als Kopbal bij de bovenkant van het malplaatje te handelen.

• Configureer de component die naar /content/experience-fragments/wknd/us/en/site/header/master moet wijzen.
• Plaats het beleid aan Kopbal van de Pagina en zorg ervoor dat het StandaardElement aan header wordt geplaatst. Het header element wordt gericht met CSS in het volgende hoofdstuk.

Voeg een component van het Fragment van de Ervaring toe om als Voettekst bij de bodem van het malplaatje te handelen.

• Configureer de component die naar /content/experience-fragments/wknd/us/en/site/footer/master moet wijzen.
• Plaats het beleid aan Voettekst van de Pagina en zorg ervoor dat het StandaardElement aan footer wordt geplaatst. Het element footer wordt in het volgende hoofdstuk gebruikt voor CSS.

Vergrendel de belangrijkste container die inbegrepen was toen het malplaatje aanvankelijk werd gecreeerd.

• Plaats het beleid aan Hoofd van de Pagina en zorg ervoor dat het StandaardElement aan main wordt geplaatst. Het element main wordt in het volgende hoofdstuk gebruikt voor CSS.

Voeg een component van het Beeld aan de belangrijkste container toe.

• Ontgrendel de component van het Beeld.

Voeg a component Breadcrumb onder de component van het Beeld in de belangrijkste container toe.

• Creeer een beleid voor de genoemde component 0} Breadcrumb Artikel Pagina - Breadcrumb . Plaats het Niveau van het Begin van de Navigatie aan 4.

Voeg de component van de a Container onder de Breadcrumb component en binnen de belangrijkste container toe. Dit doet dienst als container van de Inhoud voor het malplaatje.

• Ontgrendel de container van de Inhoud.
• Plaats het beleid aan Inhoud van de Pagina.

Voeg een andere component van de Container onder de container van de Inhoud toe. Dit doet dienst als Zijspoor container voor het malplaatje.

• Ontgrendel de container van het Rail van de Kant.
• Creeer een beleid genoemd Pagina van het Artikel - zij Rail.
• Vorm Toegestane Componenten onder Project van de Plaatsen WKND - Inhoud om te omvatten: Knoop, Download, Beeld, Lijst, Scheidingsteken, Sociale Media die delen, ​ ​Tekst, en Titel.

Werk het beleid van de container van de Wortel van de Pagina bij. Dit is de buitenste container op de sjabloon. Plaats het beleid aan Wortel van de Pagina.

• Onder de Montages van de Container, plaats de Lay-out aan Responsieve Net.

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

De Wijze van de Lay-out van de Invoeging voor de container van het Kernspoor. Sleep de greep van rechts naar links en krimpt de container in tot vier kolommen breed. Dan sleep het linkerhandvat van links naar rechts één kolom om container 3 kolommen breed te maken en een 1 kolomhiaat tussen de container van de Inhoud te verlaten.

Open de mobiele emulator en schakel over naar een mobiel onderbrekingspunt. Modus van de de lay-out van de macht opnieuw en maak de container van de Inhoud en de container van het Spoorspoor van de Kant de volledige breedte van de pagina. Hierdoor worden de containers verticaal in het mobiele onderbrekingspunt gestapeld.

Werk het beleid van de component van de Tekst in de container van de Inhoud bij.

• Plaats het beleid aan tekst van de Inhoud.
• Onder Insteekmodules > Stijlen van de Paragraaf, controle laat paragraafstijlen toe en zorgt ervoor dat het blok van het Citaat wordt toegelaten.

Schakelaar aan Aanvankelijke wijze van de Inhoud.

Voeg a component van de Titel 0} {aan de container van de Inhoud toe. Dit is de titel van artikel. Als de pagina leeg blijft, wordt automatisch de titel van de huidige pagina weergegeven.

Voeg een tweede component van de Titel onder de eerste component van de Titel toe.

• Configureer de component met de tekst "Door auteur". Dit is een tijdelijke aanduiding voor tekst.
• Stel het type in op H4 .

Voeg de component van de a Tekst onder door de component van de Titel van de Auteur toe.

Voeg de component van de Titel van a ​ ​aan de Zijde Container van het Spoorspoor toe.

• Configureer de component met de tekst "Dit artikel delen".
• Stel het type in op H5 .

Voeg a Sociale Media toe die component onder delen deze component van de Titel van het Verhaal delen.

Voeg de component van de Scheidingsteken van de a ​ ​onder de Sociale Media toe die component delen.

Voeg de component van de a Download onder de Scheidingsteken component toe.

Voeg de component van de a Lijst onder de 3} component van de Download {toe.

Werk Aanvankelijke Eigenschappen van de Pagina voor het malplaatje bij.

• Onder Sociale Media > Sociale Media die delen, controleer Facebook en Pinterest

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

laat het malplaatje van de Pagina van het Artikel toe.

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 van de steekproefinhoud WKND-PagesTemplates-Content-Assets.zip.

Upload en installeer het inhoudspakket gebruikend de Manager van het Pakket in 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 in http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.htmlwordt gebruikt

• Werk het beleid bij de component van de Container op het malplaatje.
• Plaats het beleid aan XF Wortel.
• Onder, Toegelaten Componenten selecteren de componentengroep het Project van Plaatsen WKND - Structuur om Navigatie van de Taal, Navigatie, en Snelle componenten van het Onderzoek te omvatten.

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

Vorm de wortel Container van het fragment. Dit is de buitenste meest Container.

• Plaats de Lay-out aan Responsief Net

Voeg het Donkere Logo van WKND als beeld aan de bovenkant van de Container toe. Het logo is opgenomen in het pakket dat in een vorige stap is geïnstalleerd.

• Wijzig de lay-out van het Donkere Logo WKND om twee kolommen breed te zijn. Sleep de handgrepen van rechts naar links.
• Vorm het embleem met Alternatieve Tekst van "Logo WKND".
• Vorm het embleem aan Verbinding aan /content/wknd/us/en de pagina van het Huis.

Vorm de component van de Navigatie die reeds op de pagina wordt geplaatst.

• Plaats de Exclude Niveaus van de Wortel aan 1.
• Plaats de Diepte van de Structuur van de Navigatie aan 1.
• Wijzig de lay-out van de component van de Navigatie om acht kolommen breed te zijn. Sleep de handgrepen van rechts naar links.

Verwijder de component van de Navigatie van de Taal 0}.

Wijzig de lay-out van de component van het Onderzoek om twee kolommen breed te zijn. 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 in http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.htmlteruggeeft

Vorm de wortel Container van het fragment. Dit is de buitenste meest Container.

• Plaats de Lay-out aan Responsief Net

Voeg het Lichte Logo van WKND als beeld aan de bovenkant van de Container toe. Het logo is opgenomen in het pakket dat in een vorige stap is geïnstalleerd.

• Wijzig de lay-out van het Lichte Logo WKND om twee kolommen breed te zijn. Sleep de handgrepen van rechts naar links.
• Vorm het embleem met Alternatieve Tekst van "het Licht van het Logo van WKND".
• Vorm het embleem aan Verbinding aan /content/wknd/us/en de pagina van het Huis.

Voeg de component van de a Navigatie onder het embleem toe. Vorm de component van de Navigatie:

• Plaats de Exclude Niveaus van de Wortel aan 1.
• Uncheck verzamel alle kindpagina's.
• Plaats de Diepte van de Structuur van de Navigatie aan 1.
• Wijzig de lay-out van de component van de Navigatie om acht kolommen breed te zijn. Sleep de handgrepen van rechts naar links.

Navigeer aan de console van Plaatsen in http://localhost:4502/sites.html/content/wknd/us/en/magazine.

Creeer een pagina onder WKND > V.S. > EN > Tijdschrift.

• Kies het malplaatje van de Pagina van het Artikel.
• Onder Eigenschappen plaats de Titel aan "Ultieme Gids aan LA Skateparks"
• Plaats de Naam aan "gids-la-skateparks"

Vervang door de Titel van de Auteur met de tekst "door Stacey Roswells".

Werk de component van de Tekst bij om een paragraaf te omvatten om het artikel te bevolken. U kunt het volgende tekstdossier als exemplaar gebruiken: la-skate-parks-copy.txt.

Voeg een andere component van de Tekst toe.

• Werk de component bij om het aanhalingsteken op te nemen: "Er is geen betere plaats om te delen dan Los Angeles.".
• Bewerk de Rijke Redacteur van de Tekst op het volledig-schermwijze en wijzig het bovengenoemde citaat om het element van het Blok van 0} Citaat te gebruiken.

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

Vorm de component van de Download om een versie van de PDF van het artikel te gebruiken.

• Onder Download > Eigenschappen, klik checkbox aan krijgt de titel van de activa DAM.
• Plaats de Beschrijving aan: "krijg het Volledige Artikel".
• Plaats de Tekst van de Actie aan: "PDF van de Download".

Vorm de component van de Lijst.

• Onder de Montages van de Lijst > Bouwt Lijst Gebruikend, uitgezochte Pagina's van het Kind.
• Plaats de Ouderlijke Pagina aan /content/wknd/us/en/magazine.
• Onder, de controle van de Montages van het Punt 0} en controle tonen datum .

Open CRXDE-Liteen gebruik de boomnavigatie om aan /content/wknd/us/en/magazine/guide-la-skateparks te navigeren.

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

Let op de waarde voor cq:template , die verwijst naar /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 naar wknd/components/page wijst. 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.

Vouw het knooppunt jcr:content onder /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content uit en bekijk de hiërarchie van het knooppunt:

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

Controleer vervolgens de paginacomponent bij /apps/wknd/components/page . De componenteigenschappen weergeven in CRXDE Lite:

Er staan slechts twee HTML-scripts, customfooterlibs.html en customheaderlibs.html onder de paginacomponent. zo hoe geeft deze component de pagina terug?

De eigenschap sling:resourceSuperType verwijst naar core/wcm/components/page/v2/page . Dit bezit staat de de paginacomponent van WKND toe om alle de functionaliteit van de de paginacomponent van de Component van de Kern te erven. Dit is het eerste voorbeeld van iets genoemd het Patroon van de Component van de Volmacht. Meer informatie kan hierworden gevonden.

Inspect een andere component binnen de WKND-componenten, de Breadcrumb -component van: /apps/wknd/components/breadcrumb . Dezelfde eigenschap sling:resourceSuperType 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 beste praktijken om zoveel mogelijk van de functionaliteit van de Componenten van de Kern te hergebruiken alvorens douanecode te schrijven.

Controleer vervolgens de pagina Core Component op /libs/core/wcm/components/page/v2/page met behulp van CRXDE Lite:

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 overtrekken door de page.html te openen en naar data-sly-include te zoeken:

<!--/* /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 gemaakt voor het expliciete doel dat moet worden overschreven door het implementeren van projecten.

U kunt meer over leren hoe de Bewerkbare factoren van het Malplaatje in het teruggeven van de inhoudspagina door dit artikelte lezen.

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

In, opent VSCode het aem-guides-wknd project.

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

Right+Click de templates omslag en selecteer Invoer van AEM Server:

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

Herhaal de stappen om inhoud in te voeren maar selecteer de beleid omslag van /conf/wknd/settings/wcm/policies.

Inspect het 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>

Het bestand filter.xml identificeert de paden van knooppunten die met het pakket zijn geïnstalleerd. Let op mode="merge" op elk van de filters die aangeeft dat bestaande inhoud niet moet worden gewijzigd, alleen nieuwe inhoud wordt toegevoegd. Aangezien de inhoudsauteurs deze wegen kunnen bijwerken, is het belangrijk dat een codeplaatsing ​ ​geen inhoud overschrijft. Zie de documentatie FileVaultvoor meer details bij het werken met filterelementen.

Vergelijk ui.content/src/main/content/META-INF/vault/filter.xml en ui.apps/src/main/content/META-INF/vault/filter.xml om inzicht te krijgen in de verschillende knooppunten die door elke module worden beheerd.