蜜豆视频

DocumentationAEMAEM TutorialsAEM 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鈥檚 explore the relationship between a base page component and editable templates. Learn to build out an unstyled Article template based on some mockups from . 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:

  1. Check out the tutorial/pages-templates-start branch from

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

  2. 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 or check out the code locally by switching to the branch tutorial/pages-templates-solution.

Objective

  1. Inspect a page design created in 蜜豆视频 XD and map it to Core Components.
  2. Understand the details of Editable Templates and how policies can be used to enforce granular control of page content.
  3. 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 蜜豆视频 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 蜜豆视频 XD adobexd

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

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鈥檙e 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 蜜豆视频. And with any implementation there鈥檚 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鈥檚 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鈥檚 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鈥檝e identified through our UI kit. And so they鈥檙e all listed here. And, you know, if you select any of the components in one of the artboards, you can actually say, 鈥淗ey, let me reveal this component in assets.鈥 And I can say, 鈥淥h, okay, this is a weekend title H1.鈥 And if we go over here, let鈥檚 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鈥檙e 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鈥檒l get more into the UI elements in other chapters of the weekend tutorial. In this chapter, we鈥檙e 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鈥檙e just trying to map out the structure that we want the template to drive. So we鈥檝e got a common header component and which is going to include the logo, navigation search. We鈥檙e going to use an approach using experience fragments. And then beneath that we鈥檝e 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鈥檝e got a breadcrumb component. And then beneath that we鈥檙e 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鈥檒l 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鈥檒l use the same approach, using inexperienced fragment. So what we鈥檙e 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鈥檚 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 .

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:

  1. Structure - defines components that are a part of the template. These are not editable by content authors.
  2. Initial Content - defines components that the template start with, these can be edited and/or deleted by content authors
  3. 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:

Transcript
Pages in AEM are based off of a template. The AEM project archetype created a content page template for us, and that鈥檚 what we have used so far to create a few test pages. Let鈥檚 go ahead and review them now.
I鈥檒l 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鈥檝e 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鈥檝e got a global header and a global footer. We鈥檝e 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鈥檚 go ahead and create a new template for our article page. I鈥檒l return to the console and create a new template. I鈥檒l 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鈥檚 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鈥檒l start by adding a new experience fragment component above the main container. Next, I鈥檒l configure the experience fragment to point to the header fragment generated by the AEM project archetype.
I鈥檒l 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鈥檒l 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鈥檒l repeat the same steps to include the footer. I鈥檒l add another experience fragment component and I鈥檒l configure it to point to the footer variation.
Next, I鈥檒l update the experience fragment footer鈥檚 policy to reuse the footer policy.
So, I鈥檒l select page footer and here we鈥檙e setting the default element to be a footer. Next, let鈥檚 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鈥檒l also go ahead and update the policy of this container and I鈥檒l select the page main policy and what this is going to do is it鈥檚 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鈥檚 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鈥檚 update the article page template to match the mockups.
Returning to AEM, I鈥檒l 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鈥檚 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鈥檒l create a new policy Article Page-Breadcrumb and set the navigation start level to four. We鈥檒l see the effects of these changes when we create a page.
Next, let鈥檚 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鈥檒l update the policy. I鈥檒l 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鈥檒l leave the rest of the default settings as is and save our changes.
Next, let鈥檚 add another container to act as our side rail.
I鈥檒l go ahead and unlock it to allow authors to add components. Next, I鈥檒l configure the allowed components. I鈥檒l create a new policy of Article Page-Side Rail and we鈥檒l select the allowed components. Since this is a smaller container, I鈥檓 going to limit which components are allowed to be added. So, under WKND Sites Project content, I鈥檒l 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鈥檒l update the policy of the page root container.
And under container settings, I鈥檒l set the layout to be responsive grid so that we can use the layout mode.
Next, I鈥檒l 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鈥檒l repeat these steps with the side rail component. This time, I鈥檒l make it four columns wide. There is a gap in the mockups so I鈥檒l drag the left handle one column to the right and shrink the side rail to be three columns wide.
Let鈥檚 add some responsive features. We鈥檒l 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鈥檒l 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鈥檚 update the policy of the text component. Components also have their own policy that can enable additional behavior.
Let鈥檚 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鈥檓 going to switch into the initial content mode. Here, we can define several components that will be initially added to the page when it鈥檚 created. By pre-populating the page, we can help save content authors some time, but they鈥檒l also have the flexibility to delete these components if they need to.
I鈥檒l start by adding a title component to represent the title of the main article. Next, I鈥檒l add another title component for the author. I鈥檒l pre-populate it with the text by author and we鈥檙e going to change it to an H4 element.
Next, let鈥檚 add a simple text component to the main container.
I鈥檒l also go ahead and pre-populate the side rail. I鈥檒l add a new title component and update it to be Share This Story and set the element to be in H5.
Beneath that, I鈥檒l add a social media sharing component which will allow site visitors to quickly share the articles on their favorite social media platforms.
Next, I鈥檒l add a separator component beneath that.
Beneath that, I鈥檒l 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鈥檒l add a list component that will be populated with related articles for additional navigation. Let鈥檚 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鈥檒l 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鈥檚 view the template in the console. Currently, it鈥檚 in a draft state so no authors can create pages from it.
I鈥檒l toggle the state to enable it.
I鈥檒l 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

  1. Create a template using the Page Template Type, named Article Page.

  2. Switch into Structure mode.

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

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

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

  6. Add an Image component to the main container.

    • Unlock the Image component.

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

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

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

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

  11. Engage Layout Mode for the Content container. Drag the handle from right to left and shrink the container to be eight columns wide.

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

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

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

  1. Switch to Initial Content mode.

  2. 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鈥檚 Title.

  3. Add a second Title component beneath the first Title component.

    • Configure the component with the text: 鈥淏y Author鈥. This is a text placeholder.
    • Set the type to be H4.

  4. Add a Text component beneath the By Author Title component.

  5. Add a Title component to the Side Rail Container.

    • Configure the component with the text: 鈥淪hare this Story鈥.
    • Set the type to be H5.

  6. Add a Social Media Sharing component beneath the Share this Story Title component.

  7. Add a Separator component beneath the Social Media Sharing component.

  8. Add a Download component beneath the Separator component.

  9. Add a List component beneath the Download component.

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

  1. View the template in the Template console by navigating to

  2. Enable the Article Page template.

  3. Edit the properties of the Article Page template and upload the following thumbnail to quickly identify pages created using the Article Page template:

    Article Page template thumbnail

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:

Transcript
Next let鈥檚 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鈥檝e got a package that installs a few assets and pages.
I鈥檒l 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鈥檚 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鈥檚 nice to have a few pages created in advance. Let鈥檚 navigate to the template for our experience fragment under tools, general templates. I鈥檒l 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鈥檚 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鈥檚 navigate to experience fragments the header and footer experience fragments were pre-created as part of the project. Let鈥檚 update the header to match the structure of the mockups. First, let鈥檚 modify the root container to make use of the responsive grid, then let鈥檚 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鈥檚 configure the navigation. We鈥檒l 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鈥檚 modify the width of the navigation to be eight columns wide.
For simplicity, We鈥檒l delete the language navigation component it can always be added back later. Next let鈥檚 modify the search component and make this two columns wide. Now we have all the components laid out horizontally.
Let鈥檚 move on to the footer fragment.
Again, we鈥檒l add the weekend logo, although this time it will be the light version. I鈥檒l shrink it to two columns wide.
I鈥檒l also go ahead and configure the component. First. I鈥檒l set the alt text to be weekend logo light and then I鈥檒l go ahead and link it to the weekend homepage.
Next let鈥檚 add a navigation component.
We鈥檒l configure the navigation route to point to the weekend homepage, and I鈥檒l uncheck the collect all child pages and save the changes.
I鈥檒l shrink the component to be eight columns wide so that it is horizontal with the logo. I鈥檒l leave the rest of the fragment as is. -

High-level steps for the video above:

  1. Download the sample content package WKND-PagesTemplates-Content-Assets.zip.

  2. Upload and install the content package using Package Manager at

  3. Update the Web Variation template, which is the template used for Experience Fragments at

    • 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

  1. Open the Experience Fragment that renders the Header at

  2. Configure the root Container of the fragment. This is the outer most Container.

    • Set the Layout to Responsive Grid

  3. 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 鈥淲KND Logo鈥.
    • Configure the logo to Link to /content/wknd/us/en the Home page.

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

  5. Remove the Language Navigation component.

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

  1. Open the Experience Fragment that renders the Footer at

  2. Configure the root Container of the fragment. This is the outer most Container.

    • Set the Layout to Responsive Grid

  3. 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 鈥淲KND Logo Light鈥.
    • Configure the logo to Link to /content/wknd/us/en the Home page.

  4. 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:

Transcript
Now that article page template, header and footer are configured, let鈥檚 go ahead and create a new article page.
From the site鈥檚 console, I鈥檒l navigate beneath magazine and create a new page.
I鈥檒l select our article page template. And I鈥檒l title it 鈥淭he 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鈥檝e 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鈥檝e got our two containers with some initial content.
Comparing it to the mock-up, I鈥檒l go ahead and add a skateboarding image.
Next, I鈥檒l 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鈥檚 look at some of the advanced features of the text component.
I鈥檒l go ahead and add another text component.
Here I鈥檒l add a quote for the article from a famous pro skater.
I鈥檒l go ahead and open up the text editor in full screen mode. Here we can see a lot more rich text capabilities. So, we鈥檝e got bold, italics underlined, we also have those other features that we enabled as part of the policy.
I鈥檒l go ahead and modify the element to be a quote block and save the changes.
And I鈥檒l 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 鈥淰enice Beach.鈥 And this will be a new section on the article.
We can add additional images. And I鈥檒l actually swap this one out.
And we can continue to build up the article.
Next, let鈥檚 go ahead and populate the download component. So, we鈥檒l choose from our asset finder, a PDF version of the article, I鈥檓 just drag it on to the download component. Next, let鈥檚 fill out some properties. So, for the title, we鈥檙e 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鈥檒l be download PDF.
Let鈥檚 also configure the list component. So, we鈥檙e going to build this list using child pages. And for the parent page, I鈥檓 just going to go ahead and select the magazine page. And this is a dynamically generated list. I鈥檒l link the items and show the date.
Okay, so the article page is starting to take shape. It鈥檚 currently not styled, but it鈥檚 starting to resemble the mock-ups. And if we compare the two you can see that we鈥檝e got our header, our hero image, title, text, social media icons download components. So, all of the structural elements are in place. They鈥檙e just not currently styled to match the mock-ups. So, in the next chapter, that鈥檚 what we鈥檙e going to look at. -

High-level steps for the video above:

  1. Navigate to the Sites console at .

  2. Create a page beneath WKND > US > EN > Magazine.

    • Choose the Article Page template.
    • Under Properties set the Title to 鈥淯ltimate Guide to LA Skateparks鈥
    • Set the Name to 鈥済uide-la-skateparks鈥

  3. Replace By Author Title with the text 鈥淏y Stacey Roswells鈥.

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

  5. Add another Text component.

    • Update the component to include the quote: 鈥淭here 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.

  6. Continue populating the body of the article to match the mockups.

  7. 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: 鈥淕et the Full Story鈥.
    • Set the Action Text to: 鈥淒ownload PDF鈥.

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

  1. Open and use the tree navigation to navigate to /content/wknd/us/en/magazine/guide-la-skateparks.

  2. Click on the jcr:content node beneath the la-skateparks page and view the properties:

    JCR Content 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.

  3. Expand the jcr:content node beneath /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content and view the node hierarchy:

    JCR Content LA Skateparks

    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.

  4. Next inspect the page component at /apps/wknd/components/page. View the component properties in CRXDE Lite:

    Page Component properties

    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鈥檚 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.

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

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

  7. 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 plugin. But they could be doing using any IDE that you have configured to import or import content from a local instance of AEM.

  1. In, the VSCode open the aem-guides-wknd project.

  2. Expand the ui.content module in the Project explorer. Expand the src folder and navigate to /conf/wknd/settings/wcm/templates.

  3. Right+Click the templates folder and select Import from AEM Server:

    VSCode import template

    The article-page should be imported, and the page-content, xf-web-variation templates should also be updated.

    Updated templates

  4. Repeat the steps to import content but select the policies folder from /conf/wknd/settings/wcm/policies.

    VSCode import policies

  5. Inspect the filter.xml file from ui.content/src/main/content/META-INF/vault/filter.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>

    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 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 蜜豆视频 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 or review and deploy the code locally at on the Git branch tutorial/pages-templates-solution.

  1. Clone the repository.
  2. Check out the tutorial/pages-templates-solution branch.
recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9