Corporate Training
Request Demo
Click me

100+ Popular IT Courses to Learn.

15+ Categories. 500+ IT Courses to Learn.

Leadership Program

VIEW ALL LEADERSHIP PROGRAMS
 
 
 
Digital Marketing Courses
 
 
Corporate Training
Request Demo
Click me

100+ Popular IT Courses to Learn.

15+ Categories. 500+ IT Courses to Learn.

Leadership Program

VIEW ALL LEADERSHIP PROGRAMS
 
 
 
Digital Marketing Courses
 
 
Menu
Let's Talk
Request Demo

Tutorials

Templating and Page Authoring

11. Templating and Page Authoring

Adobe Experience Manager (AEM) provides a robust templating system that allows you to define the structure and layout of web pages. Templating simplifies the process of creating consistent and responsive web pages while providing content authors with a flexible framework for content creation. In this detailed tutorial, we'll explore the concepts of templating and page authoring in AEM, complete with practical examples.

Prerequisites:

Before diving into AEM component development, make sure you have the following prerequisites in place:

  • AEM Development Environment: Set up a local AEM development environment or access a remote AEM instance with developer access.

  • Integrated Development Environment (IDE): Use a code editor or IDE (e.g., Adobe Brackets, Visual Studio Code, IntelliJ IDEA) for writing and managing code.

  • Basic Knowledge of HTML, CSS, and JavaScript: Familiarity with web technologies is essential.

Creating an AEM Page Template:

AEM Page Templates define the structure and layout of web pages. Let's create a basic page template for an "Article" page.

1. Project Structure: Create or access your AEM project's structure.

2. Page Template Folder: In your project, create a folder for the "Article" page template. The folder structure might look like this:

/apps//templates/article
 

3. Page Template JCR Node: Define the page template in the JCR by creating a 'cq:Template'  node with appropriate properties and subnodes. Use CRXDE Lite or a similar tool for this task.

4. Page Template Structure: Define the structure within the page template folder:

/apps//templates/article/
├── .content.xml
├── structure.html
├── initial-content
│   └── jcr:content
│       └── text
│           └── cq:template
└── allowedPaths
 

5. Content Configuration (.content.xml): Create a '.content.xml' file to define the page template's properties and allowed components. Example '.content.xml':

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="cq:Template"
          allowedPaths="/content">
  <jcr:content
      jcr:primaryType="cq:PageContent"
      sling:resourceType="cq:Page">
    <jcr:content
        jcr:primaryType="nt:unstructured"
        cq:template="/libs/wcm/foundation/templates/basic">
      <text
          jcr:primaryType="nt:unstructured"
          sling:resourceType="foundation/components/text"
          textIsRich="true"
          textIsOptional="false"/>
    </jcr:content>
  </jcr:content>
</jcr:root>
 

6. Page Structure (structure.html): Create a 'structure.html' file to define the layout of the "Article" page template. This file contains HTML markup and placeholders for components. Example 'structure.html':

<html>
<head>
    <title>Article Template</title>
</head>
<body>
    <div class="article-header">
        <cq:include path="header" resourceType="myproject/components/header"/>
    </div>
    <div class="article-content">
        <cq:include path="text" resourceType="foundation/components/text"/>
    </div>
</body>
</html>  
 

7. Authoring Environment Configuration: Configure the AEM authoring environment to use the new page template.

Creating and Authoring Pages:

Once the page template is created, you can start creating and authoring pages based on that template.

  •  Authoring Environment: Log in to your AEM authoring environment.

  • Create a New Page: Create a new page using the "Article" page template. Fill in the page's content, including the header and article text.

  • Component Insertion: Insert components into the page's placeholders as defined in the template.

  • Preview and Edit: Preview the page to see how it looks. If further edits are needed, click "Edit" to make changes.

  •  Publish the Page: When the page is ready, publish it to make it live on the website.

Conclusion:

Creating and authoring pages in Adobe Experience Manager (AEM) using templates provides a structured and efficient way to maintain consistency across your website. By following the steps outlined in this tutorial and customizing them to your project's requirements, you can effectively develop and manage templates and pages, ensuring a seamless and engaging web experience for your audience.