Partial Pages
Sometimes you have a portion of content that needs to be shared over multiple pages. It may be a navigation bar, page footer, or common piece of scripting. While Layout pages provide for reuse of the outermost page content, Partial Pages provide the ability to reuse any inner portion of content.
A partial page is invoked via the partial(name) Javascript function. This function is processed when the site is rendered and the function call is replaced with the contents of the processed partial page. For example, consider the following page layout.
<!DOCTYPE html>
<html lang="en">
<head>
<@ partial('head') @>
</head>
<body>
<@ partial('nav') @>
<@ content @>
</body>
</html>
Creating Partial Pages
A partial page is no different from any other web page except that it does not do layout processing and so does not have a <@ content @> element. A partial page may reference other partial pages and may include any Expansive pipeline processing. For example, a HTML page may include a partial page that is defined using Markdown.
Passing Parameters to Partial Pages
Data may be passed to partial pages by either setting properties in the page's meta data. Pages have an optional special area between braces at the top of the page to define page meta data. This provides data values that can be passed to partial and layout pages to be accessed via scripting. For example:
{
color: 'red',
title: 'Hello World'
}
<@ partial('hero') @>
This passes the color and title meta data properties to the hero partial page. The hero page will receive the parameter in its meta data and can access this via the meta global property. For example (partials/hero.html.exp):
<p>The color is: <@= meta.color @>
You can pass parameters to a single partial page via the partial() function call. For example:
<@ partial('hero', { color: 'rec' }) @>
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. 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.