Documentation AEM AEM Tutorials AEM Sites WKND Tutorials

Pages and Templates pages-and-template

Last update: Tue May 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

Beginner
Developer

[For publishing from AEM Sites using Edge Delivery Services, click here.]{class="badge positive" title="Publish from AEM to Edge Delivery Services"}

In this chapter, let’s explore the relationship between a base page component and editable templates. Learn to build out an unstyled Article template based on some mockups from Adobe XD. In the process of building out the template, Core Components and advanced policy configurations of the Editable Templates are covered.

Prerequisites prerequisites

Review the required tooling and instructions for setting up a local development environment.

Starter Project

NOTE

If you successfully completed the previous chapter, you can reuse the project and skip the steps for checking out the starter project.

Check out the base-line code that the tutorial builds on:

Check out the tutorial/pages-templates-start branch from GitHub

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

Deploy code base to a local AEM instance using your Maven skills:

code language-shell
`$ mvn clean install -PautoInstallSinglePackage`

note note
NOTE
If using AEM 6.5 or 6.4, append the `classic` profile to any Maven commands.

code language-shell
`$ mvn clean install -PautoInstallSinglePackage -Pclassic`

You can always view the finished code on GitHub or check out the code locally by switching to the branch tutorial/pages-templates-solution.

Objective

Inspect a page design created in Adobe XD and map it to Core Components.
Understand the details of Editable Templates and how policies can be used to enforce granular control of page content.
Learn how Templates and Pages are linked

What you are going to build what-build

In this part of the tutorial, you build a new Article Page Template that can be used to create article pages and aligns with a common structure. The Article Page Template is based on designs and a UI Kit produced in Adobe XD. This chapter is only focused on building out the structure or skeleton of the template. No styles are implemented but the template and pages are functional.

Article Page Design and un-styled version

UI Planning with Adobe XD adobexd

Usually, planning for a new website starts with mockups and static designs. Adobe XD is a design tool building user experience. Next let’s inspect a UI Kit and mockups to help plan the structure of the Article Page Template.

https://video.tv.adobe.com/v/30214?quality=12&learn=on

Transcript

So in most cases, planning for a new website starts with mockups and static designs. And in this tutorial, we are going to build a new article template based on some mockups created by the weekend design team. So the first thing that we’re going to do is open up an XD file that was created by our weekend design team. And the first artboard that I want to highlight is the UI Kit. Now, the UI kit identifies all the key colors, fonts and styles that make up the weekend brand. And we can actually see some different components like title, text, a breadcrumb button. And these are actually styles of existing core components that are provided by Adobe. And with any implementation there’s going to be some percentage of components that are accustom, that required a unique business logic and might not be covered by core components. And this is really expected. But by planning up front with core components and building something like this UI Kit, it’s a lot easier to map to existing out of the box functionality. And you can also quickly identify and prioritize any custom components that you might need to build. So now, let’s look at the mockups for the article page. And because our design team has already created these UI kit upfront, we can easily see that many of the elements that make up this mock-up map directly to core components. We have navigation component, search component, image component, breadcrumbs, titles and and so on and so forth. And one of the cool things about building the UI kit first, is that actually all of these components actually have a link to one of the components listed in the UI kit. So let me show you what I mean.

If we open up the assets panel in XD, you can actually see all of the components that we’ve identified through our UI kit. And so they’re all listed here. And, you know, if you select any of the components in one of the artboards, you can actually say, “Hey, let me reveal this component in assets.” And I can say, “Oh, okay, this is a weekend title H1.” And if we go over here, let’s look at this one. This is reveal this component in assets. Okay, this is just using a simple text component. And then another really cool thing that you can do with this approach, is you can actually right-click a component and say, edit master component. And let me just zoom out a little bit so we can see this.

So these two, these two are actually linked.

If we actually edit the master component for say the title, or maybe play around with the color of this, you can see that they’re both changing on the fly. So all of the components in our mockup are now linked to one of these master components. And it just makes it really easy to, you know, to keep everything in sync. All right, so we’ll get more into the UI elements in other chapters of the weekend tutorial. In this chapter, we’re actually going to focus on, you know, taking the structure of this mockup and creating a template out of it. And so we actually have this third artboard for our template identification. And this is where we’re just trying to map out the structure that we want the template to drive. So we’ve got a common header component and which is going to include the logo, navigation search. We’re going to use an approach using experience fragments. And then beneath that we’ve got, you know, it just is just going to be a standard image component, but we want a consistent hero image to appear on each of our article pages. Beneath that we’ve got a breadcrumb component. And then beneath that we’re actually going to have two containers. And this is, these containers are going to allow a content author to come in and populate the main body of the article, and then we’ll also have a second container that will act as kind of like the side rail for some of that navigation. And then at the very bottom we will also have, you know, a common footer use throughout the site. And we’ll use the same approach, using inexperienced fragment. So what we’re going to do is see how far we can get with just the out of the box core components and editable templates to build out this structure. Now, it’s not going to have any styles, but we should be able to get this basic structure and working and it should all be functional. -

Download the WKND Article Design File.

NOTE

A generic AEM Core Components UI Kit is also available as a starting point for custom projects.

Create the Article Page Template

When creating a page you must select a template, which is used as the basis for creating the page. The template defines the structure of the resultant page, initial content, and allowed components.

There are three main areas of Editable Templates:

Structure - defines components that are a part of the template. These are not editable by content authors.
Initial Content - defines components that the template start with, these can be edited and/or deleted by content authors
Policies - defines configurations on how components behave and what options authors have.

Next, create a template in AEM that matches the structure of the mockups. This occurs in a local instance of AEM. Follow the steps in the video below:

https://video.tv.adobe.com/v/330991?quality=12&learn=on

Transcript

Pages in AEM are based off of a template. The AEM project archetype created a content page template for us, and that’s what we have used so far to create a few test pages. Let’s go ahead and review them now.

I’ll navigate to tools, general, templates.

Under the WKND Sites folder, I can see two templates.

The first is the Content Page template and then we’ve also got a Web Variation template for experience fragments. If we go ahead and open up the Content Page template, we can see the basic structure.

We’ve got a global header and a global footer. We’ve got a title plate, a component placeholder, and then a main container. The container defines which components are allowed to be added to the page.

Let’s go ahead and create a new template for our article page. I’ll return to the console and create a new template. I’ll select the page as the template type.

And for the template title, all put in Article Page.

When we open up our new template in structure mode, we have a pre-defined container with several allowed components already configured. Next, let’s add a header. A header is typically made up of multiple components and a standard best practice is to manage the header as an experience fragment. So, we’ll start by adding a new experience fragment component above the main container. Next, I’ll configure the experience fragment to point to the header fragment generated by the AEM project archetype.

I’ll configure the policy of the experience fragment. Policies are similar to dialogs in that they allow us to configure various properties and behavior of a component. Policies differ in that they can be reused across templates to promote consistency.

Next, I’ll select the page header policy, which will define the default element of the outer div as a header element. Notice that the same policy is also being used by the Content Page template.

I’ll repeat the same steps to include the footer. I’ll add another experience fragment component and I’ll configure it to point to the footer variation.

Next, I’ll update the experience fragment footer’s policy to reuse the footer policy.

So, I’ll select page footer and here we’re setting the default element to be a footer. Next, let’s go ahead and lock this main layout container. This is going to be a fixed container that will act as the main body of the article template.

I’ll also go ahead and update the policy of this container and I’ll select the page main policy and what this is going to do is it’s going to set the HTML element to main since this will act as the main body of the template. And we can then go ahead and target this element with CSS to control the width of our main body container.

Okay, so let’s quickly review the WKND article template in our XD file. We have decided to have a hero image, breadcrumb, and then two layout containers, a main container and a side rail. Let’s update the article page template to match the mockups.

Returning to AEM, I’ll go ahead and add an image component. We want this image component to be a fixed part of the template, but we want to give authors the ability to choose unique images per page. By unlocking the component, we can achieve this behavior. Users will not be able to remove this image from their page, but they will be able to edit it.

Let’s add our breadcrumb component. The breadcrumb will not be edited at the page level, but we will update the policy to configure where the breadcrumb navigation will start. I’ll create a new policy Article Page-Breadcrumb and set the navigation start level to four. We’ll see the effects of these changes when we create a page.

Next, let’s add the container that will act as the primary content container in our two-column layout.

Go ahead and unlock the container to allow authors to add components to it.

And then we’ll update the policy. I’ll set the policy to be page content.

This will include all of the components under WKND Sites Project content, as well as the form container.

The default components tab defines component mapping used when an asset is dragged and dropped from the asset finder. So, for example, if a user drags an image, then the WKND image component will be used. We’ll leave the rest of the default settings as is and save our changes.

Next, let’s add another container to act as our side rail.

I’ll go ahead and unlock it to allow authors to add components. Next, I’ll configure the allowed components. I’ll create a new policy of Article Page-Side Rail and we’ll select the allowed components. Since this is a smaller container, I’m going to limit which components are allowed to be added. So, under WKND Sites Project content, I’ll select button, download, image, list, separator, social media sharing, text, and title.

In the mockups, we have the containers laid out side by side. Next, we will use a feature of AEM, layout mode, to configure the widths of the containers. First, I’ll update the policy of the page root container.

And under container settings, I’ll set the layout to be responsive grid so that we can use the layout mode.

Next, I’ll shrink the main container to eight columns wide by selecting the component, clicking the layout button, and dragging the handle from right to left.

I’ll repeat these steps with the side rail component. This time, I’ll make it four columns wide. There is a gap in the mockups so I’ll drag the left handle one column to the right and shrink the side rail to be three columns wide.

Let’s add some responsive features. We’ll go ahead and open up the mobile emulator and switch to a smaller view port. In this mobile view port, we want the containers to stack vertically. I’ll engage layout mode again and make the containers the full width of the page. This way, they stack vertically.

I can then preview the containers using the various breakpoints shown in the emulator. In the desktop breakpoint, you can see that the containers sit side by side, but as we move to smaller breakpoints, they stack vertically.

Let’s update the policy of the text component. Components also have their own policy that can enable additional behavior.

Let’s select the content text policy, and we can go ahead and enable some additional features.

Many of the core components have advanced policy configurations, and these can be configured per container as well as be re-used across templates.

At this point, the structure of the template looks good. Next, I’m going to switch into the initial content mode. Here, we can define several components that will be initially added to the page when it’s created. By pre-populating the page, we can help save content authors some time, but they’ll also have the flexibility to delete these components if they need to.

I’ll start by adding a title component to represent the title of the main article. Next, I’ll add another title component for the author. I’ll pre-populate it with the text by author and we’re going to change it to an H4 element.

Next, let’s add a simple text component to the main container.

I’ll also go ahead and pre-populate the side rail. I’ll add a new title component and update it to be Share This Story and set the element to be in H5.

Beneath that, I’ll add a social media sharing component which will allow site visitors to quickly share the articles on their favorite social media platforms.

Next, I’ll add a separator component beneath that.

Beneath that, I’ll add a download component. Eventually, we might want to have a PDF version of the article that users can download and take offline.

Finally, we’ll add a list component that will be populated with related articles for additional navigation. Let’s update the initial page properties for the template. Page properties are additional metadata at the page level. By configuring it at the template level, we can define some default properties that will be added whenever a new page is created.

In this case, I’ll enable social media sharing for both Facebook and Pinterest.

After saving the changes, now we can see the social media icons appear in the social media sharing component.

Let’s view the template in the console. Currently, it’s in a draft state so no authors can create pages from it.

I’ll toggle the state to enable it.

I’ll also update the properties and upload a thumbnail so that we can more easily identify the template.

Hitting refresh, now we can see the thumbnail. -

High-level steps for the video above:

Structure configurations

Create a template using the Page Template Type, named Article Page.
Switch into Structure mode.
Add an Experience Fragment component to act as the Header at the top of the template.
- Configure the component to point to /content/experience-fragments/wknd/us/en/site/header/master.
- Set the policy to Page Header and ensure that the Default Element is set to header. The headerelement is targeted with CSS in the next chapter.
Add an Experience Fragment component to act as the Footer at the bottom of the template.
- Configure the component to point to /content/experience-fragments/wknd/us/en/site/footer/master.
- Set the policy to Page Footer and ensure that the Default Element is set to footer. The footer element is targeted with CSS in the next chapter.
Lock the main container that was included when the template was initially created.
- Set the policy to Page Main and ensure that the Default Element is set to main. The main element is targeted with CSS in the next chapter.
Add an Image component to the main container.
- Unlock the Image component.
Add a Breadcrumb component beneath the Image component in the main container.
- Create a policy for the Breadcrumb component named Article Page - Breadcrumb. Set the Navigation Start Level to 4.
Add a Container component beneath the Breadcrumb component and inside the main container. This acts as the Content container for the template.
- Unlock the Content container.
- Set the policy to Page Content.
Add another Container component beneath the Content container. This acts as the Side Rail container for the template.
- Unlock the Side Rail container.
- Create a policy named Article Page - Side Rail.
- Configure the Allowed Components under WKND Sites Project - Content to include: Button, Download, Image, List, Separator, Social Media Sharing, Text, and Title.
Update the policy of the Page Root container. This is the outer-most container on the template. Set the policy to Page Root.
- Under Container Settings, set the Layout to Responsive Grid.
Engage Layout Mode for the Content container. Drag the handle from right to left and shrink the container to be eight columns wide.
Engage Layout Mode for the Side Rail container. Drag the handle from right to left and shrink the container to be four columns wide. Then drag the left handle from left to right one column to make the container 3 columns wide and leave a 1-column gap between the Content container.
Open mobile emulator and switch to a mobile breakpoint. Engage layout mode again and make the Content container and the Side Rail container the full width of the page. This stacks the containers vertically in the mobile breakpoint.
Update the policy of the Text component in the Content container.
- Set the policy to Content text.
- Under Plugins > Paragraph Styles, check Enable paragraph styles and ensure that the Quote block is enabled.

Initial Content configurations

Switch to Initial Content mode.
Add a Title component to the Content container. This acts as the Article title. When it is left empty, it automatically displays the current page’s Title.
Add a second Title component beneath the first Title component.
- Configure the component with the text: “By Author”. This is a text placeholder.
- Set the type to be H4.
Add a Text component beneath the By Author Title component.
Add a Title component to the Side Rail Container.
- Configure the component with the text: “Share this Story”.
- Set the type to be H5.
Add a Social Media Sharing component beneath the Share this Story Title component.
Add a Separator component beneath the Social Media Sharing component.
Add a Download component beneath the Separator component.
Add a List component beneath the Download component.
Update the Initial Page Properties for the template.
- Under Social Media > Social Media Sharing, check Facebook and Pinterest

Enable the template and add a thumbnail

View the template in the Template console by navigating to http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd
Enable the Article Page template.
Edit the properties of the Article Page template and upload the following thumbnail to quickly identify pages created using the Article Page template:

Update the Header and Footer with Experience Fragments experience-fragments

A common practice when creating global content, such as a header or footer, is to use an Experience Fragment. Experience Fragments, allows users to combine multiple components to create a single, reference-able, component. Experience Fragments have the advantage of supporting multi-site management and localization.

The AEM Project Archetype generated a Header and Footer. Next, update the Experience Fragments to match the mockups. Follow the steps in the video below:

https://video.tv.adobe.com/v/330992?quality=12&learn=on

Transcript

Next let’s make some updates to the header and footer to match the mockups. It is a best practice to implement global elements like the header and footer as an inexperienced fragment. This allows authors to combine multiple components and manage them in a single location. Experience fragments support localization and multilingual sites. So, it is possible to create variations of the header per locale.

To accelerate the tutorial, I’ve got a package that installs a few assets and pages.

I’ll upload this via package manager and install the package. In AM assets I can now see a light and dark logo for the weekend site. I can also see some sample images to use for the skate article. Next in the site’s hierarchy we can see a few shell pages created for the different sections of the site. Since the navigation will be driven based on the Sites hierarchy. It’s nice to have a few pages created in advance. Let’s navigate to the template for our experience fragment under tools, general templates. I’ll go ahead and open the web experience template which is the template used for the experience fragments. Unlike our page templates the experience fragment template is just a single container. Let’s quickly update the allowed components in the container to include the language navigation navigation and quick search components. We are turning back to the AM start menu let’s navigate to experience fragments the header and footer experience fragments were pre-created as part of the project. Let’s update the header to match the structure of the mockups. First, let’s modify the root container to make use of the responsive grid, then let’s add the weekend dark logo.

All modify the layout to be two columns wide, and unconfigure the logo to link to the homepage.

Next let’s configure the navigation. We’ll exclude the route level at one and set the navigation depth to one level beneath the navigation route which is the weekend homepage under U.S. English.

Let’s modify the width of the navigation to be eight columns wide.

For simplicity, We’ll delete the language navigation component it can always be added back later. Next let’s modify the search component and make this two columns wide. Now we have all the components laid out horizontally.

Let’s move on to the footer fragment.

Again, we’ll add the weekend logo, although this time it will be the light version. I’ll shrink it to two columns wide.

I’ll also go ahead and configure the component. First. I’ll set the alt text to be weekend logo light and then I’ll go ahead and link it to the weekend homepage.

Next let’s add a navigation component.

We’ll configure the navigation route to point to the weekend homepage, and I’ll uncheck the collect all child pages and save the changes.

I’ll shrink the component to be eight columns wide so that it is horizontal with the logo. I’ll leave the rest of the fragment as is. -

High-level steps for the video above:

Download the sample content package WKND-PagesTemplates-Content-Assets.zip.
Upload and install the content package using Package Manager at http://localhost:4502/crx/packmgr/index.jsp
Update the Web Variation template, which is the template used for Experience Fragments at http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html
- Update the policy the Container component on the template.
- Set the policy to XF Root.
- Under, the Allowed Components select the component group WKND Sites Project - Structure to include Language Navigation, Navigation, and Quick Search components.

Update Header Experience Fragment

Open the Experience Fragment that renders the Header at http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html
Configure the root Container of the fragment. This is the outer most Container.
- Set the Layout to Responsive Grid
Add the WKND Dark Logo as an image to the top of the Container. The logo was included in the package installed in a previous step.
- Modify the layout of the WKND Dark Logo to be two columns wide. Drag the handles from right to left.
- Configure the logo with Alternative Text of “WKND Logo”.
- Configure the logo to Link to /content/wknd/us/en the Home page.
Configure the Navigation component that is already placed on the page.
- Set the Exclude Root Levels to 1.
- Set the Navigation Structure Depth to 1.
- Modify the layout of the Navigation component to be eight columns wide. Drag the handles from right to left.
Remove the Language Navigation component.
Modify the layout of the Search component to be two columns wide. Drag the handles from right to left. All the components should now be aligned horizontally on a single row.

Open the Experience Fragment that renders the Footer at http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html
Configure the root Container of the fragment. This is the outer most Container.
- Set the Layout to Responsive Grid
Add the WKND Light Logo as an image to the top of the Container. The logo was included in the package installed in a previous step.
- Modify the layout of the WKND Light Logo to be two columns wide. Drag the handles from right to left.
- Configure the logo with Alternative Text of “WKND Logo Light”.
- Configure the logo to Link to /content/wknd/us/en the Home page.
Add a Navigation component beneath the logo. Configure the Navigation component:
- Set the Exclude Root Levels to 1.
- Uncheck Collect all child pages.
- Set the Navigation Structure Depth to 1.
- Modify the layout of the Navigation component to be eight columns wide. Drag the handles from right to left.

Create an Article Page

Next, create a page using the Article Page template. Author the content of the page to match the site mockups. Follow the steps in the video below:

https://video.tv.adobe.com/v/330993?quality=12&learn=on

Transcript

Now that article page template, header and footer are configured, let’s go ahead and create a new article page.

From the site’s console, I’ll navigate beneath magazine and create a new page.

I’ll select our article page template. And I’ll title it “The Ultimate Guide” to LA skate parks.

And the name will be guide dash LA dash skate parks.

Opening the page, we can see how the template influenced the page, we can see the updated header and footer. And notice that these cannot be modified here.

Beneath the header, we have our hero image. And this can be edited, but it is fixed in place.

And beneath that, we’ve got the breadcrumb component, which is fixed and locked. And it shows the magazine hierarchy as well as the current page. And beneath this, we’ve got our two containers with some initial content.

Comparing it to the mock-up, I’ll go ahead and add a skateboarding image.

Next, I’ll update the by author title, and give it the name Stacy Ross Wells.

And I can add some text to populate the article body.

Let’s look at some of the advanced features of the text component.

I’ll go ahead and add another text component.

Here I’ll add a quote for the article from a famous pro skater.

I’ll go ahead and open up the text editor in full screen mode. Here we can see a lot more rich text capabilities. So, we’ve got bold, italics underlined, we also have those other features that we enabled as part of the policy.

I’ll go ahead and modify the element to be a quote block and save the changes.

And I’ll continue to fill out the rest of the page based on the mock-ups. So, I can add a new title, give it a title of “Venice Beach.” And this will be a new section on the article.

We can add additional images. And I’ll actually swap this one out.

And we can continue to build up the article.

Next, let’s go ahead and populate the download component. So, we’ll choose from our asset finder, a PDF version of the article, I’m just drag it on to the download component. Next, let’s fill out some properties. So, for the title, we’re just going to get the title from the damn asset. And for the description will be get the full story. And for the action text, it’ll be download PDF.

Let’s also configure the list component. So, we’re going to build this list using child pages. And for the parent page, I’m just going to go ahead and select the magazine page. And this is a dynamically generated list. I’ll link the items and show the date.

Okay, so the article page is starting to take shape. It’s currently not styled, but it’s starting to resemble the mock-ups. And if we compare the two you can see that we’ve got our header, our hero image, title, text, social media icons download components. So, all of the structural elements are in place. They’re just not currently styled to match the mock-ups. So, in the next chapter, that’s what we’re going to look at. -

High-level steps for the video above:

Navigate to the Sites console at http://localhost:4502/sites.html/content/wknd/us/en/magazine.
Create a page beneath WKND > US > EN > Magazine.
- Choose the Article Page template.
- Under Properties set the Title to “Ultimate Guide to LA Skateparks”
- Set the Name to “guide-la-skateparks”
Replace By Author Title with the text “By Stacey Roswells”.
Update the Text component to include a paragraph to populate the article. You can use the following text file as the copy: la-skate-parks-copy.txt.
Add another Text component.
- Update the component to include the quote: “There is no better place to shred than Los Angeles.”.
- Edit the Rich Text Editor in full-screen mode and modify the above quote to use the Quote Block element.
Continue populating the body of the article to match the mockups.
Configure the Download component to use a PDF version of the article.
- Under Download > Properties, click the checkbox to Get the title from the DAM asset.
- Set the Description to: “Get the Full Story”.
- Set the Action Text to: “Download PDF”.
Configure the List component.
- Under List Settings > Build List Using, select Child Pages.
- Set the Parent Page to /content/wknd/us/en/magazine.
- Under, the Item Settings check Link Items and check Show date.

Inspect the node structure node-structure

At this point, the article page is clearly unstyled. However the basic structure is in place. Next, inspect the node structure of the article page to gain a better understanding of the role of the template, page, and components.

Use the CRXDE-Lite tool on a local AEM instance to view the underlying node structure.

Open CRXDE-Lite and use the tree navigation to navigate to /content/wknd/us/en/magazine/guide-la-skateparks.
Click on the jcr:content node beneath the la-skateparks page and view the properties:

Notice the value for cq:template, which points to /conf/wknd/settings/wcm/templates/article-page, the Article Page Template created earlier.

Also notice the value of sling:resourceType, which points to wknd/components/page. This is the page component created by the AEM project archetype and is responsible for rendering page based on the template.
Expand the jcr:content node beneath /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content and view the node hierarchy:

You should be able to loosely map each of the nodes to components that were authored. See if you can identify the different Layout Containers used by inspecting the nodes prefixed with container.
Next inspect the page component at /apps/wknd/components/page. View the component properties in CRXDE Lite:

There are only two HTL scripts, customfooterlibs.html and customheaderlibs.html beneath the page component. So how does this component render the page?

The sling:resourceSuperType property points to core/wcm/components/page/v2/page. This property allows the WKND’s page component to inherit all the functionality of the Core Component page component. This is the first example of something called the Proxy Component Pattern. More information can be found here.
Inspect another component within the WKND components, the Breadcrumb component from: /apps/wknd/components/breadcrumb. Notice that the same sling:resourceSuperType property can be found, but this time it points to core/wcm/components/breadcrumb/v2/breadcrumb. This is another example of using the Proxy component pattern to include a Core Component. In fact, all the components in the WKND code base are proxies of AEM Core Components (except for the custom demo HelloWorld component). It is a best practice to reuse as much of the functionality of Core Components as possible before writing custom code.

Next inspect the Core Component Page at /libs/core/wcm/components/page/v2/page using CRXDE Lite:

note note
NOTE
In, AEM 6.5/6.4 the Core Components are located under `/apps/core/wcm/components`. In, AEM as a Cloud Service, the Core Components are located under `/libs` and are updated automatically.

Core Component Page

Notice that many script files are included beneath this page. The Core Component Page contains numerous functionalities. This functionality is broken into multiple scripts for easier maintenance and readability. You can trace the inclusion of the HTL scripts by opening the page.html and looking for data-sly-include:

code language-html

code language-html
<!--/* /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>

<!--/* /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>

The other reason for breaking out the HTL into multiple scripts is to allow the proxy components to override individual scripts to implement custom business logic. The HTL scripts customfooterlibs.html, and customheaderlibs.html, are created for the explicit purpose to be overridden by implementing projects.

You can learn more about how the Editable Template factors into the rendering of the content page by reading this article.

Inspect another Core Component, like the Breadcrumb at /libs/core/wcm/components/breadcrumb/v2/breadcrumb. View the breadcrumb.html script to understand how the markup for the Breadcrumb component is ultimately generated.

Saving Configurations to Source Control configuration-persistence

Often, especially at the beginning of an AEM project it is valuable to persist configurations, like templates and related content policies, to source control. This ensures that all developers are working against the same set of content and configurations and can ensure additional consistency between environments. Once a project reaches a certain level of maturity, the practice of managing templates can be turned over to a special group of power users.

For now, templates are treated like other pieces of code and sync the Article Page Template down as part of the project.
Until now code is pushed from the AEM project to a local instance of AEM. The Article Page Template was created directly on a local instance of AEM, so it needs to import the template into the AEM project. The ui.content module is included in the AEM project for this specific purpose.

The next few steps are done in the VSCode IDE using the VSCode AEM Sync plugin. But they could be doing using any IDE that you have configured to import or import content from a local instance of AEM.

In, the VSCode open the aem-guides-wknd project.
Expand the ui.content module in the Project explorer. Expand the src folder and navigate to /conf/wknd/settings/wcm/templates.
Right+Click the templates folder and select Import from AEM Server:

The article-page should be imported, and the page-content, xf-web-variation templates should also be updated.
Repeat the steps to import content but select the policies folder from /conf/wknd/settings/wcm/policies.

Inspect the filter.xml file from ui.content/src/main/content/META-INF/vault/filter.xml.

code language-xml

code language-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>`

<!--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>

The filter.xml file is responsible for identifying the paths of nodes that are installed with the package. Notice the mode="merge" on each of the filters which indicates that existing content not to be modified, only new content is added. Since content authors may be updating these paths, it is important that a code deployment does not overwrite content. See the FileVault documentation for more details on working with filter elements.

Compare ui.content/src/main/content/META-INF/vault/filter.xml and ui.apps/src/main/content/META-INF/vault/filter.xml to understand the different nodes managed by each module.

note warning
WARNING
In order to ensure consistent deployments for the WKND Reference site some branches of the project are set up such that `ui.content` overwrites any changes in the JCR. This is by design, i.e for Solution Branches, since code/styles are written for specific policies.

Congratulations! congratulations

Congratulations, you have created a template and page with Adobe Experience Manager Sites.

Next Steps next-steps

At this point, the article page is clearly unstyled. Follow the Client-Side Libraries and Front-end Workflow tutorial to learn the best practices for including CSS and JavaScript to apply global styles to the site and integrate a dedicated front-end build.

View the finished code on GitHub or review and deploy the code locally at on the Git branch tutorial/pages-templates-solution.

Clone the github.com/adobe/aem-wknd-guides repository.
Check out the tutorial/pages-templates-solution branch.

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9

Pages and Templates pages-and-template

Prerequisites prerequisites

Starter Project

Objective

What you are going to build what-build

UI Planning with Adobe XD adobexd

Create the Article Page Template

Structure configurations

Initial Content configurations

Enable the template and add a thumbnail

Update the Header and Footer with Experience Fragments experience-fragments

Update Header Experience Fragment

Update Footer Experience Fragment

Create an Article Page

Inspect the node structure node-structure

Saving Configurations to Source Control configuration-persistence

Congratulations! congratulations

Next Steps next-steps