In this article, we cover the building blocks of the information architecture of a page.
Topics covered here:
The information architecture of the page
The page structures how the content appears on the front end, and it's made up of three building blocks:
- Templates
- Layouts
- Modules
Producers are responsible for combining the three building blocks mentioned above into pages, making sure front-end content displays accordingly.
FORGE Page Builder provides a set of built-in templates, layouts, and modules, yet new ones can be created to cover additional use cases.
Templates
Templates bring into the page some common elements, like a header and footer, and they define the slot(s) where to insert layouts and modules.
Reference scenario
For the index page — in the website and app folders — the Default template is available, as well as custom templates.
The Default template has a header, footer, and a central slot for layouts and modules:
Layouts
Layouts are structured sets of slots (e.g., one row with two columns) where you can insert other layouts and modules.
Reference scenario
For the index page, you can add a section layout that graphically isolates the content it includes:
Modules
Modules contain the instruction for the front-end to render specific editorial entities (e.g., albums or stories) or lists of editorial entities (e.g., editorial selections).
Modules are the leaves of the information architecture tree of each page, and they connect with content through:
- Slug: The unique identifier of an editorial entity. The slug pre-determines which content the module renders.
- Tag: The content taxonomy element that categorizes the editorial entities. When using tags, the module's content is dynamic and evolves accordingly with the content and its taxonomy.
Reference scenario
For the page index, you can add an editorial list module. Then, configure that module to show the stories with the tag latestnews for the website and the tag app-news for the app:
Menu and details navigation
In the presentation structure, a page is a step in navigating the content through the front-end.
The FORGE Page Builder supports two kinds of navigation:
- Menu: The navigation through the main menus and submenus.
- Editorial entities' details: The navigation starts from an item in a list of editorial entities and lands on this item's detail page.
Menu
Defining menus and submenus determines the front-end information architecture for their users. The Page Builder allows the creation of multiple levels of menu items — see The menu for more information.
Reference scenario
Each of your sites has a dedicated folder and the same structure:
-
(folder) website
-
(menu) menu
- Home
-
Alpha in the world
- Italy
- United Kingdom
- United States
- Who we are
- (page) index
-
(menu) menu
-
(folder) archive
- (page) alpha-news-old
-
(folder) app
- (menu) menu → Two menu items: Home (linking index), Old News (relating alpha-new-old)
- (page) index
-
(folder) archive
- (page) alpha-news-old
Entity navigation and navigation rules
Given an entity (stories, images, documents, etc.), the FORGE Page Builder automatically calculates what page has to render that entity through the navigation rules.
In the example below, the navigation rule sets up that the page ~/page-builder-test/_a_big_fan_of_alpha/website/target/detail renders those stories that have the alpha-news tag:
Refer to the The entity navigation article for a detailed description of the navigation rules behavior.