> For AI agents: the complete documentation index is available at https://nhanbe.id.vn/llms.txt, the full documentation bundle is available at https://nhanbe.id.vn/llms-full.txt. # 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 | Component | Purpose | | ------------------------------- | ---------------------------------------- | | **Title** | heading H1–H6 (+ link) | | **Text** | rich text | | **Image** | responsive image + lazy loading | | **Button** | CTA link | | **Teaser** | card: image + title + desc + CTA | | **List** | list child pages / tagged pages / search | | **Navigation** | menu tree | | **Language Navigation** | switch locale | | **Breadcrumb** | breadcrumbs | | **Container** | responsive grid / layout container | | **Tabs / Accordion / Carousel** | UI layout | | **Experience Fragment** | reuse blocks (header/footer/sections) | | **Content Fragment** | render CF | | **Embed** | embed external (YouTube, …) | | **Separator** | divider | Notes: - Archetype projects usually create **proxy components** for these Core Components. - Policies dictate which components appear in the Component Browser. *** ## 2) Page Anatomy (Pattern) | Zone | Typical Content | Template Mode | | ---------- | --------------------------------------- | ---------------------- | | **Header** | logo + nav + language nav (+ search) | **Structure** (locked) | | **Main** | responsive grid (authors drag-and-drop) | editable | | **Footer** | links + legal + social | **Structure** (locked) | 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: | Tab | Property | Value (example) | | ------------ | ------------------------- | --------------------------------------------- | | Basic | Title | Getting Started with AEM Components | | Basic | Subtitle | A guide for new AEM developers | | Basic | Description | Learn how to create your first AEM component… | | Basic | Tags | select relevant tags | | Advanced | Featured Image | select DAM asset | | Social Media | og:title / og:description | for social sharing | ### 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: ```java @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): ```java 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) | Symptom | Check | Fix | | ----------------------------------- | ----------------------------------------------- | ---------------------------------------- | | Component not visible in side panel | policy allowed components | enable in container policy | | Component only shows placeholder | dialog values + model defaults | set required fields / safe `@Default` | | Header/footer missing on some pages | template structure + locked items | reapply structure; verify XF path | | Navigation missing items | nav root/depth + hide-in-nav | adjust config + page properties | | Author vs Publish differences | publish content + clientlibs + dispatcher cache | publish dependencies + invalidate caches | *** ## 7) Navigation (Core Component) Sample site tree: ```text /content// ├── home ├── about ├── services │ ├── consulting │ └── development ├── blog │ ├── article-1 │ └── article-2 └── contact ``` Suggested config: | Property | Value | Effect | | ----------------------- | ------------------------------------ | ------------------- | | Navigation Root | `/content/<site>/<lang>` | start point | | Exclude Root Level | `1` | skip root | | Structure Depth | `2` | show 2 levels | | Collect all child pages | `No` | show navigable only | 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 | Mode | Display | | --------- | --------------------- | | Edit | chrome + placeholders | | Layout | resize columns | | Preview | visitor view | | Targeting | personalization | | Timewarp | view at time | *** ## Internal Links - [Templates & Policies](https://nhanbe.id.vn/aem/foundation/templates-and-policies.md) - [Client Libraries](https://nhanbe.id.vn/aem/foundation/client-libraries.md) - [Content Fragments & GraphQL](https://nhanbe.id.vn/aem/content-and-data/graphql.md)