Table of Contents

Templates

API2HTML presents the data by rendering logic-less templates using the Mustache engine.

The templates are the essential part of API2HTML as they are the only thing you need to code to make your site. All the templates are expected to be mustache templates. In the examples we use the extension .mustache but it is up to you the extension you want to use (or none), even .html, as long as you declare the filename in the templates section.

Template vs Layout

A template and a layout are in essence the same thing: HTML content that will be loaded in the page.

The difference between the two is that the layout is reused across many pages, while the template is specific to the page you are loading.

A layout usually contains the common elements that are present in every page, such as the navigation bar, a header, footers, meta, DOCTYPE and other “surrounding” content, and then defines a variable {{{ content }}} that will be replaced with the template.

Working with layouts

When writing a layout you will use the variable {{{ content }}} (note 3 curly braces per side, not 2) to place the template inside.

This is a basic example of how a Layout can look like, let’s say we named it default_layout.html:

Variables available in the templates

{{ Data }}: Contains the response of the API when encapsulated in an object (response starts with {)

{{ Array }}: Contains the response of the API when encapsulated in an array (response starts with [). The configuration page must declare "IsArray": true.

{{ Extra }}: Any value declared in the extra section of the configuration page or the site configuration.

{{ Params }}: If the URL you are accessing accepted parameters you’ll see them here. For instance if you have a page like "URLPattern": "/archives/:tag", you will be able to print in the template {{ Params.tag }}

In all four cases the attributes of the inner values can be accessed with the dot ..

For instance, having in the configuration file the following variables…