AEM Templates

🔍 What Is It?

In AEM, every page is based on a template. A template defines:

• →Page structure — the layout, zones, and containers on the page
• →Page component — the Java/HTL code that renders the page
• →Allowed components — which components authors can add
• →Initial content — pre-populated content when a new page is created
• →Thumbnail — what authors see when choosing a template

There are two types of templates in AEM:

1. Static Templates (legacy) — defined in code under /apps, require developer changes
2. Editable Templates (modern) — created in AEM's UI, managed by template authors

New projects should always use Editable Templates.

🎯 Why Do We Need It?

Templates solve the "blank page problem." Without templates:

• →Every new page would start completely empty
• →Authors would have to rebuild the header, footer, and navigation on every page
• →There would be no consistency across pages
• →Developers would need to be involved in every page creation

With templates:

• →Authors pick a template and get a page that's already structured
• →Header and footer are locked in — consistent across all pages
• →Only appropriate components are available for each page type
• →New pages are created in seconds, not hours

🏗️ What Happens in Real Projects?

A typical enterprise AEM project has multiple templates:

• →Home Page Template — one per site, very structured
• →Article Template — for blog posts and news articles
• →Landing Page Template — flexible layout for campaigns
• →Product Page Template — structured for product information
• →Search Results Template — specific to search functionality

Template authors (usually senior content people or UX leads) create and maintain these templates. Developers build the underlying page components and components that templates use.

⚙️ How It Works

Static Templates (Legacy)

Stored in /apps/mysite/templates/. Each template is a node with:

• →jcr:primaryType = cq:Template
• →sling:resourceType — points to the page component
• →allowedPaths — where this template can be used
• →ranking — order in the template picker

Editable Templates (Modern)

Stored in /conf/mysite/settings/wcm/templates/. Created through the Template Editor UI. Has three layers:

• →Structure — locked components (header, footer)
• →Initial Content — pre-populated editable content
• →Layout — responsive grid configuration

Template → Page Component → HTL

When a page is rendered, AEM:

1. Reads the page's sling:resourceType (set by the template)
2. Finds the page component at that path in /apps
3. Runs the page component's HTL script
4. The HTL script renders the page structure and includes child components

💻 Example

Static Template vs Editable Template — Comparing the two template approaches with real code examples.

<!-- /apps/mysite/templates/article-page/.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"
    jcr:primaryType="cq:Template"
    jcr:title="Article Page"
    jcr:description="Template for news and blog articles"
    ranking="{Long}200"
    allowedPaths="[/content/mysite/en/articles(/.*)?,/content/mysite/en/blog(/.*)?]"
    sling:resourceType="mysite/components/page/article">
  <!-- Initial content node -->
  <jcr:content
      jcr:primaryType="cq:PageContent"
      sling:resourceType="mysite/components/page/article"
      jcr:title="New Article">
    <root jcr:primaryType="nt:unstructured"
          sling:resourceType="wcm/foundation/components/responsivegrid">
      <header jcr:primaryType="nt:unstructured"
              sling:resourceType="mysite/components/structure/header"/>
    </root>
  </jcr:content>
</jcr:root>

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits