Sidor och mallar pages-and-template

Kolla in grenen tutorial/pages-templates-start från GitHub

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

Distribuera kodbasen till en lokal AEM med dina Maven-kunskaper:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Skapa en mall med sidmallstypen, som heter Artikelsida.

Växla till strukturläge.

Lägg till en Experience Fragment-komponent som fungerar som Header överst i mallen.

• Konfigurera komponenten att peka på /content/experience-fragments/wknd/us/en/site/header/master.
• Ställ in principen på Sidhuvud och kontrollera att Standardelement är inställt på header. Elementet header har CSS som mål i nästa kapitel.

Lägg till en Experience Fragment-komponent som fungerar som sidfot längst ned i mallen.

• Konfigurera komponenten att peka på /content/experience-fragments/wknd/us/en/site/footer/master.
• Ställ in principen på Sidfot och kontrollera att Standardelementet är inställt på footer. Elementet footer har CSS som mål i nästa kapitel.

Lås behållaren main som inkluderades när mallen skapades.

• Ställ in principen på Sidhuvudsida och kontrollera att standardelementet är inställt på main. Elementet main har CSS som mål i nästa kapitel.

Lägg till en bild-komponent i main-behållaren.

• Lås upp komponenten Bild.

Lägg till en Breadcrumb-komponent under Image -komponenten i huvudbehållaren.

• Skapa en princip för komponenten Breadcrumb med namnet Artikelsida - Breadcrumb. Ange Navigeringens startnivå till 4.

Lägg till en behållarkomponent under komponenten Breadcrumb och inuti behållaren main. Detta fungerar som innehållsbehållare för mallen.

• Lås upp behållaren Content.
• Ställ in principen på Sidinnehåll.

Lägg till ytterligare en behållarkomponent under Innehållsbehållaren. Det här fungerar som Side Rail -behållare för mallen.

• Lås upp behållaren Side Rail.
• Skapa en princip med namnet Artikelsida - sidospalt.
• Konfigurera de tillåtna komponenterna under WKND-webbplatsprojektet - innehåll så att de omfattar: Knapp, Ladda ned, Bild, Lista, Avgränsare, Delning via sociala medier, Text och Titel.

Uppdatera sidrotbehållarens profil. Det här är mallens yttre behållare. Ställ in principen på Sidrot.

• Under Behållarinställningar ställer du in Layout på Responsivt Grid.

Aktivera layoutläge för innehållsbehållaren. Dra handtaget från höger till vänster och krymp behållaren så att den blir åtta kolumner bred.

Aktivera layoutläge för sidoskenans behållare. Dra handtaget från höger till vänster och krymp behållaren så att den är fyra kolumner bred. Dra sedan det vänstra handtaget från vänster till höger en kolumn för att göra behållaren 3 kolumner bred och lämna ett mellanrum på 1 kolumn mellan Innehållsbehållaren.

Öppna mobilemulatorn och byt till en mobil brytpunkt. Aktivera layoutläget igen och gör Innehållsbehållaren och sidoskenbehållaren till sidans fulla bredd. Detta staplar behållarna lodrätt i den mobila brytpunkten.

Uppdatera principen för komponenten Text i innehållsbehållaren.

• Ställ in principen på Innehållstext.
• Under Plugins > Styckeformat markerar du Aktivera styckeformat och kontrollerar att offertblocket är aktiverat.

Växla till läget Inledande innehåll.

Lägg till en Title-komponent i Content container. Detta fungerar som artikelrubrik. När den lämnas tom visas automatiskt den aktuella sidans titel.

Lägg till en andra Title-komponent under den första Title-komponenten.

• Konfigurera komponenten med texten: "By Author". Det här är en textplatshållare.
• Ange typen som H4.

Lägg till en Text-komponent under By Author Title-komponenten.

Lägg till en Title-komponent i Side Rail Container.

• Konfigurera komponenten med texten: "Share this Story".
• Ange typen som H5.

Lägg till en Delning via sociala medier-komponent under Dela den här artikeln.

Lägg till en avgränsarkomponent under komponenten Delning via sociala medier.

Lägg till en Hämta-komponent under avgränsarkomponenten.

Lägg till en List-komponent under komponenten Download.

Uppdatera mallens initiala sidegenskaper.

• Under Sociala medier > Delning via sociala medier markerar du Facebook och Pinterest

Visa mallen i mallkonsolen genom att gå till http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd

Aktivera artikelsidmallen.

Redigera egenskaperna för artikelsidmallen och överför följande miniatyrbild för att snabbt identifiera sidor som skapats med artikelsidmallen:

Hämta exempelinnehållspaketet WKND-PagesTemplates-Content-Assets.zip.

Överför och installera innehållspaketet med Package Manager på http://localhost:4502/crx/packmgr/index.jsp

Uppdatera webbvariationsmallen, som är den mall som används för Experience Fragments på http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html

• Uppdatera principen för komponenten Container i mallen.
• Ställ in principen på XF Root.
• Under Tillåtna komponenter markerar du komponentgruppen WKND-webbplatsprojekt - struktur så att den innehåller komponenterna Språknavigering, Navigering och Snabbsökning .

Öppna Experience Fragment som återger rubriken på http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html

Konfigurera fragmentets rotbehållare. Det här är den yttre behållaren.

• Ange layout som responsivt stödraster

Lägg till den mörka WKND-logotypen som en bild högst upp i behållaren. Logotypen ingick i paketet som installerades i ett tidigare steg.

• Ändra layouten för den mörka logotypen WKND så att den blir två kolumner bred. Dra handtagen från höger till vänster.
• Konfigurera logotypen med Alternativ text i WKND-logotypen.
• Konfigurera logotypen till Länka till /content/wknd/us/en hemsidan.

Konfigurera den navigeringskomponent som redan finns på sidan.

• Ange Uteslut rotnivåer till 1.
• Ange Navigeringsstrukturdjupet till 1.
• Ändra layouten för komponenten Navigation så att den blir åtta kolumner bred. Dra handtagen från höger till vänster.

Ta bort komponenten Språknavigering.

Ändra layouten för komponenten Search så att den blir två kolumner bred. Dra handtagen från höger till vänster. Alla komponenter ska nu justeras vågrätt på en enda rad.

Öppna det Experience Fragment som återger sidfoten på http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html

Konfigurera fragmentets rotbehållare. Det här är den yttre behållaren.

• Ange layout som responsivt stödraster

Lägg till WKND Light-logotypen som en bild högst upp i behållaren. Logotypen ingick i paketet som installerades i ett tidigare steg.

• Ändra layouten för WKND Light-logotypen så att den blir två kolumner bred. Dra handtagen från höger till vänster.
• Konfigurera logotypen med Alternativ text i WKND Logo Light.
• Konfigurera logotypen till Länka till /content/wknd/us/en hemsidan.

Lägg till en Navigation-komponent under logotypen. Konfigurera komponenten Navigation:

• Ange Uteslut rotnivåer till 1.
• Avmarkera Samla in alla underordnade sidor.
• Ange Navigeringsstrukturdjupet till 1.
• Ändra layouten för komponenten Navigation så att den blir åtta kolumner bred. Dra handtagen från höger till vänster.

Gå till webbplatskonsolen på http://localhost:4502/sites.html/content/wknd/us/en/magazine.

Skapa en sida under WKND > US > EN > Magazine.

• Välj mallen Artikelsida.
• Under Egenskaper anger du Title till"Ultimate Guide to LA Skateparks"
• Ange namnet som"guide-la-skateparks"

Ersätt med författare med texten"By Stacey Roswells".

Uppdatera komponenten Text så att den innehåller ett stycke som fyller i artikeln. Du kan använda följande textfil som kopia: la-skate-parks-copy.txt.

Lägg till en annan Text-komponent.

• Uppdatera komponenten så att den innehåller citatet:"Det finns ingen bättre plats att dela än Los Angeles."
• Redigera RTF-redigeraren i helskärmsläge och ändra offerten ovan så att elementet Citattecken används.

Fortsätt fylla i artikelns brödtext för att matcha dummies.

Konfigurera komponenten Download om du vill använda en PDF-version av artikeln.

• Under Hämta > Egenskaper klickar du i kryssrutan för att hämta titeln från DAM-resursen.
• Ange Beskrivning till:"Hämta hela artikeln".
• Ange åtgärdstexten till: "Download PDF".

Konfigurera komponenten List.

• Välj Underordnade sidor under Listinställningar > Skapa lista med.
• Ange överordnad sida till /content/wknd/us/en/magazine.
• Under Objektinställningar markerar du Länka objekt och markerar Visa datum.

Öppna CRXDE-Lite och navigera till /content/wknd/us/en/magazine/guide-la-skateparks med trädnavigeringen.

Klicka på noden jcr:content under sidan la-skateparks och visa egenskaperna:

Observera värdet för cq:template, som pekar på /conf/wknd/settings/wcm/templates/article-page, artikelsidmallen som skapades tidigare.

Lägg också märke till värdet sling:resourceType, som pekar på wknd/components/page. Detta är den sidkomponent som skapas av AEM projekttyp och som ansvarar för återgivningen av sidan baserat på mallen.

Expandera noden jcr:content under /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content och visa nodhierarkin:

Du bör kunna mappa var och en av noderna löst till komponenter som har skapats. Se om du kan identifiera de olika layoutbehållarna som används genom att granska noderna som har prefixet container.

Kontrollera sedan sidkomponenten på /apps/wknd/components/page. Visa komponentegenskaperna i CRXDE Lite:

Det finns bara två HTML-skript, customfooterlibs.html och customheaderlibs.html, under sidkomponenten. Så hur återger den här komponenten sidan?

Egenskapen sling:resourceSuperType pekar på core/wcm/components/page/v2/page. Den här egenskapen gör att WKND:s sidkomponent kan ärva alla funktionaliteten för kärnkomponentsidkomponenten. Detta är det första exemplet på något som kallas Proxy-komponentmönster. Mer information finns här.

Inspect är en annan komponent i WKND-komponenterna, Breadcrumb-komponenten från: /apps/wknd/components/breadcrumb. Observera att samma sling:resourceSuperType-egenskap kan hittas, men den här gången pekar den på core/wcm/components/breadcrumb/v2/breadcrumb. Detta är ett annat exempel på hur du använder komponentmönstret Proxy för att inkludera en Core-komponent. Faktum är att alla komponenter i WKND-kodbasen är proxies av AEM Core Components (förutom den anpassade demo-komponenten HelloWorld). Det är en god vana att återanvända så mycket av funktionerna i kärnkomponenterna som möjligt innan skriver egen kod.

Kontrollera sedan huvudkomponentsidan på /libs/core/wcm/components/page/v2/page med CRXDE Lite:

Observera att många skriptfiler inkluderas under den här sidan. Core Component Page innehåller flera funktioner. Den här funktionen är indelad i flera skript för enklare underhåll och läsbarhet. Du kan spåra inkludering av HTML-skript genom att öppna page.html och leta efter 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>

Den andra anledningen till att HTML delas upp i flera skript är att tillåta proxykomponenterna att åsidosätta enskilda skript för att implementera anpassad affärslogik. HTML-skripten customfooterlibs.html och customheaderlibs.html skapas för det uttryckliga syftet som ska åsidosättas genom att projekt implementeras.

Du kan lära dig mer om hur faktorer för redigerbar mall påverkar återgivningen av innehållssidan genom att läsa den här artikeln.

Inspect är en annan Core-komponent, som Breadcrumb på /libs/core/wcm/components/breadcrumb/v2/breadcrumb. Visa skriptet breadcrumb.html om du vill veta hur koden för Breadcrumb-komponenten genereras.

I öppnar VSCode aem-guides-wknd-projektet.

Expandera modulen ui.content i Project Explorer. Expandera mappen src och navigera till /conf/wknd/settings/wcm/templates.

Right+Click mappen templates och välj Importera från AEM server:

article-page ska importeras och mallarna page-content, xf-web-variation ska också uppdateras.

Upprepa stegen för att importera innehåll men välj mappen policies från /conf/wknd/settings/wcm/policies.

Inspect filen filter.xml från 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>

Filen filter.xml ansvarar för att identifiera sökvägarna till noder som har installerats med paketet. Observera mode="merge" på vart och ett av filtren som anger att befintligt innehåll inte ska ändras, endast nytt innehåll läggs till. Eftersom innehållsförfattare kan uppdatera dessa sökvägar är det viktigt att en koddistribution inte skriver över innehåll. Mer information om hur du arbetar med filterelement finns i dokumentationen för FileVault.

Jämför ui.content/src/main/content/META-INF/vault/filter.xml och ui.apps/src/main/content/META-INF/vault/filter.xml för att förstå de olika noder som hanteras av varje modul.