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.
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.
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:
<!DOCTYPE html>
<html lang="{{ Extra.lang }}">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>{{ Extra.page_title }}}</title>
</head>
<body>
{{{ content }}}
</body>
</html>
In order to use this layout now in a page you must reference it in the Layout field and also make sure that the layouts sections declares it:
"pages":[
{
...
"Template": "post",
"Layout": "default",
},
...
]
"layouts": {
"default":"default_layout.html"
}
As it happens with the layouts, in order to make use of any template you write you need to declare the template both in the page and in the list of available templates:
"pages":[
{
...
"Template": "post",
},
...
]
"templates": {
"post":"single_post.mustache"
}
When editing the template the following variables are available:
{{ 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…
{
"pages": [...],
"extra":{
"lang": "en-US",
"copyright": "2018 My Company"
}
…then you can use them in the templates as follows:
<!DOCTYPE html>
<html lang="{{ Extra.lang }}">
...
<p>© {{ Extra.copyright }}</p>
Continue to Customizing errors →
← Back to Configuration file