A Page Component in a Static Template is a fundamental building block that defines the structure of a page.
Here are some key points:
Main Component:
- The Page Component is indeed the main component on a page. It serves as the container for all other components that make up the page.
- It typically includes the basic structure of the page, such as the header, footer, and main content area.
Static Template:
- In a Static Template, the structure of the page is predefined and does not change. This means that the layout and the components that can be used are fixed.
- The Page Component in a Static Template is responsible for rendering this predefined structure.
Component Hierarchy:
- The Page Component is usually the root component of the page. All other components are nested within it.
- This hierarchy ensures that the page has a consistent structure and that components are rendered in the correct order.
Differences from Other Components
Purpose and Scope:
- Page Component: Defines the overall structure and layout of the page. It is responsible for rendering the main sections of the page.
- Other Components: These are typically used to render specific pieces of content or functionality within the page. Examples include text components, image components, navigation components, etc.
Location and Organization:
- Page Component: Usually stored in a specific folder within the AEM project, often under /apps/<project-name>/components/page.
- Other Components: These can be stored in various folders depending on their purpose and organization. For example, content components might be stored under /apps/<project-name>/components/content.
Rendering and Logic:
- Page Component: Contains the logic for rendering the main structure of the page, including the header, footer, and main content area. It often includes scripts and styles that are essential for the page.
- Other Components: Focus on rendering specific content or functionality. They are usually more modular and can be reused across different pages.
Template Association:
- Page Component: Directly associated with a Static Template. The template defines which Page Component to use and how the page should be structured.
- Other Components: Can be used within the Page Component and are not directly associated with the template. They are added to the page through the Page Component or other container components.
Here is a simplified example of how a Page Component might be structured in AEM:
<!-- Page Component (e.g., /apps/my-project/components/page/base.html) -->
<div class="page">
<header class="header">
<!-- Header content -->
</header>
<main class="main-content">
<!-- Main content area where other components are rendered -->
<cq:include path="par" resourceType="foundation/components/parsys" />
</main>
<footer class="footer">
<!-- Footer content -->
</footer>
</div>In this example, the Page Component includes the header, main content area, and footer. The main content area uses a parsys (paragraph system) to allow other components to be added dynamically.
