Layout files
To create a layout, you need two files:
Layout configuration file
The default name for the configuration file is page-layout.yaml.
This file, as the name suggests, is written in YAML.
The content of the layout configuration file includes:
- Metadata
-
Information about the layout.
- Content zones
-
The rules defining the content areas within the layout.
The following snippet shows the basic structure:
name: "three-columns"
displayName: "Three columns"
description: "Three columns side-by-side 25/50/25"
entry: "markup.hbs"
zones:
main:
displayName: "Main Content"
description: "Main content area"A complete example of the layout configuration file is available at Configuration file example.
Layout template file
The default name for the template file is markup.hbs.
This file, as indicated by its name, is written in Handlebars, a templating language.
This file defines the HTML template used by the system to render the layout. It contains placeholders for the content blocks that are added to the layout in the page builder.
The following snippet shows how a content zone is rendered:
{{#if zones.main}}
<div class="p-2 w-50">
{{zones.main}}
</div>
{{/if}}A complete example of the layout template file is available at Template file example.