Clone

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:

<!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"
   }

Working with templates

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"
   }

Variables available in the templates

When editing the template the following variables are available:

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>&copy; {{ Extra.copyright }}</p>

Continue to Customizing errors

← Back to Configuration file