Creating Page Templates | Adobe Experience Manager (AEM)
Creating page templates in Adobe Experience Manager (AEM) is an essential task when developing websites and web applications in AEM. Templates in AEM define the structure and layout for pages, and they are typically created using a combination of HTL (HTML Template Language), JCR (Java Content Repository), and AEM-specific components.
Here’s a step-by-step guide on how to create page templates in AEM:
1. Understand the Requirements
Before creating a page template, ensure you understand the following:
- The layout of the page (e.g., header, footer, content sections).
- The components that need to be included (e.g., navigation, text, images, forms).
- Any custom logic or styling that will be applied.
- The page type (e.g., homepage, product page, blog page).
2. Create a Template Structure
In AEM, templates are created under /apps (for custom applications) and are usually stored under a folder like /apps/<project>/templates.
- Create a Template Folder
- Navigate to CRX/DE Lite or use the AEM web interface to create a new folder for your templates.
- For example, create the following structure:
/apps/<project>/templates.
2. Create a Template Definition AEM uses a Template as a definition for pages. You will define the template and its associated properties in a cq:Template node in the JCR repository.
- Navigate to
/apps/<project>/templatesand create a new folder for the template (e.g.,/apps/<project>/templates/my-template). - Inside this folder, create a new node
jcr:primaryType = "cq:Template".
3. Define Template Properties In the cq:Template node, add basic properties like:
sling:resourceType: The resource type of the template.cq:allowedParents: The allowed page types (likepageorhomepage).cq:templateType: Defines whether it’s a designable or non-designable template.
Example of a template definition:
/apps/<project>/templates/my-template
jcr:primaryType = "cq:Template"
sling:resourceType = "wcm/templates/default"
cq:allowedParents = ["page"]
cq:templateType = "designable"3. Create the Template HTML/HTL Files
Templates in AEM often consist of two parts:
- Template HTML (HTL) File — Defines the structure of the page.
- Template JavaScript/CSS — Includes the front-end logic and styles for the page.
Example of a simple template (e.g., page.html):
<!DOCTYPE html>
<html lang="${wcmmode.language}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${pageProperties.title}</title>
</head>
<body>
<div class="header">
<sly data-sly-resource="${'header' @ resourceType='myproject/components/header'}" />
</div>
<div class="content">
<sly data-sly-resource="${'content' @ resourceType='myproject/components/content'}" />
</div>
<div class="footer">
<sly data-sly-resource="${'footer' @ resourceType='myproject/components/footer'}" />
</div>
</body>
</html>- The
slytag is a special tag in HTL, which allows AEM to render dynamic content. - The
resourceTypeattribute refers to the location of the components to be included in the template, such as the header, footer, and content.
4. Create a Page Template Structure
You can create a Page from the template in AEM’s authoring interface (e.g., the Sites console):
- Go to AEM Sites and click on the Create button.
- Select Page.
- Choose the template you just created (e.g.,
/apps/<project>/templates/my-template). - Fill in other necessary page properties (e.g., title, URL).
- Create the page, and AEM will render it using the template.
5. Create Components for the Template
Since templates rely on components to display content, you’ll need to create the components you reference in the HTL files (e.g., header, footer, content).
- Create Components
- Navigate to /apps/<project>/components.
- Create new components (e.g.,
header,footer,content). - Each component should contain an HTL file, a Java class (optional for backend logic), and the necessary JavaScript/CSS files.
2. Use Editable Templates (Optional)
- Editable templates in AEM allow page authors to customize content and layout. These templates support the use of content policies that define component variations across pages.
6. Assign Template to a Page
Once the template is created, you can assign it to pages directly via the AEM author interface. You can also create custom workflows to automate the template assignment process.
- In the Sites console, navigate to the page properties of a new page and select the template you’ve created.
- Publish the page when ready to make it live.
