Layouts
Most web pages in a web site share a similar layout with one or more pages and replicating that layout from page to page is slow and difficult to keep each page in sync. Expansive provides layout pages that define the common elements of pages, so that content pages can focus on the unique aspects of the page.
Defining Layouts
Layout pages provide the outer contents and content pages provide the inner contents. Expansive automatically blends the layout page with the content page to create a final composite page. Here is a sample layout page:
<html>
<head>
<title><@= meta.title @></title>
<meta charset="utf-8" />
<link href="css/all.css" rel="stylesheet" type="text/css" />
<script src="jquery/jquery.min.js"></script>
<script src="semantic/js/semantic.js"></script>
</head>
<body>
<@ content @>
<span>Generated on <[object Type]().format('%b %e, %Y') @></span>
</body>
</html>
The @ content @ element is replaced with the content page before saving to the dist directory.
Layout pages can be nested and utilize other layout pages to an arbitrary depth.
Content Pages
A content page omits all the layout boiler plate and can focus solely on the unique content for that page. Here is a sample content page.
{
title: 'Hello World'
}
<h1>Hello World with Layouts</h1>
The special area between the braces at the top of the content page is called Meta data. It provides meta data values that can be accessed via scripting in layout and partial pages. This provides a means to pass parameters to layout and partial pages.
Selecting Layouts
A content page can request a different layout by adding a layout property to the meta data section of the content page. For example:
{
layout: 'product-layout'
title: 'Hello World'
}
<h1>Hello World with Layouts</h1>
This will select the product-layout in the layouts directory. Set the layout property to the empty string "" to disable layout processing. Expansive uses the presence of a meta data section to enable layout processing. If you omit meta data in your page, you will disable layout processing.
Expansive resolves layout pages by looking for a layout file that begins with the layout name in the layouts directory. The default page layout is called default and resolves to layouts/default.html.exp.
The .exp extension indicates that this page contains embedded Expansive script that should be processed during rendering. The Date().format code above is executed when Expansive renders the site and is replaced with the current date string.