Building Homepage & Article Page#

#0) Expected Output

• 1 homepage (hero + section + list + CTA)
• 1 article page (page properties + content components)
• header/footer using locked structure (typically via Experience Fragment)

#1) Core Components: Commonly Used List

Notes:

• Archetype projects usually create proxy components for these Core Components.
• Policies dictate which components appear in the Component Browser.

#2) Page Anatomy (Pattern)

Header/footer data sources:

• Experience Fragment (recommended) or
• page properties / config

#3) Build Homepage (Step-by-Step)

#3.1 Create Page

• Sites → <site> → <lang-root>
• Create → Page
• Template: landing/home template
• Title: Home
• Name: home

#3.2 Add Hero (Teaser / Custom Hero)

Configuration checklist:

• Title: Welcome to My Site
• Description: We build amazing digital experiences
• Image: DAM
• Link: points to article page
• CTA label: Learn More

#3.3 Add Content Sections (Container)

Inside main responsive grid:

1. Container (section wrapper)
2. Inside Container:
   • Title: Latest Articles
   • List:
     • Source: child pages under /content/<site>/<lang>/blog
     • Sort: by date
     • Limit: 3
   • Button: View All Articles → blog listing page

#3.4 Layout Mode (Responsive)

Layout mode (ruler icon):

• Desktop: 4 + 4 + 4
• Tablet: 6 + 6
• Phone: 12

#4) Build Article Page

#4.1 Create Page

• Sites → <site> → <lang-root> → blog
• Create page using article template
• Title: Getting Started with AEM Components

#4.2 Set Page Properties (Important)

Page Information → Open Properties:

#4.3 Add Content (on page)

Suggested order:

1. Title (usually mapped from page title)
2. Image (featured)
3. Text (body)
4. Accordion (FAQ)
5. Teaser (related)

#4.4 Preview + Publish

• Preview mode to verify output
• Publish Page → Publish instance

#5) Page Properties in Code (Sling Model)

Node storage:

• page node: /content/<site>/<lang>/<page>
• properties: /content/.../<page>/jcr:content

Snippet:

@Model(adaptables = SlingHttpServletRequest.class)
public class ArticlePageModel {

  @ScriptVariable
  private Page currentPage;

  public String getTitle() { return currentPage.getTitle(); }

  public String getDescription() { return currentPage.getDescription(); }

  public Calendar getLastModified() { return currentPage.getLastModified(); }

  public String getFeaturedImage() {
    ValueMap props = currentPage.getProperties();
    return props.get("featuredImage", String.class);
  }

  public String[] getTags() {
    Tag[] tags = currentPage.getTags();
    return Arrays.stream(tags).map(Tag::getTitle).toArray(String[]::new);
  }
}

TagManager (when needing localized title or tag ID resolution):

public String getLocalizedTagTitle(String tagId, Locale locale) {
  TagManager tagManager = resource.getResourceResolver().adaptTo(TagManager.class);
  Tag tag = tagManager.resolve(tagId);
  return tag != null ? tag.getTitle(locale) : tagId;
}

#6) Troubleshooting (Page Assembly)

#7) Navigation (Core Component)

Sample site tree:

/content/<site>/<lang>
├── home
├── about
├── services
│   ├── consulting
│   └── development
├── blog
│   ├── article-1
│   └── article-2
└── contact

Suggested config:

Page opt-out: Hide in Navigation.

#8) Reuse via Experience Fragments (header/footer)

#8.1 Create Header XF

• Experience Fragments console
• Create under /content/experience-fragments/<site>/<lang>/header
• Add: Logo + Navigation + Language Navigation
• Publish XF

#8.2 Include in Template Structure

• Template editor → Structure
• Add Experience Fragment component (locked)
• Point to Header XF

Result:

• every page using the template shares the header
• updating XF reflects across entire site (after publish + cache invalidation if applicable)

#9) Authoring Tips (for Editors)

#9.1 Drag/Drop

• drag from side panel → page
• reorder within container
• toolbar: edit/config/copy/cut/delete

#9.2 Quick Edit vs Dialog

• Quick edit: inline text
• Dialog: wrench icon / double click

#9.3 Modes

#Internal Links

• Templates & Policies
• Client Libraries
• Content Fragments & GraphQL