Working with templates

Handlebars

Enduro is built around http://handlebarsjs.com/ templates.

Templates

To include a variable in your template, wrap it in two sets of curly braces. Like this:

<div>
    <h2>{{title}}</h2>
    <h2>{{text}}</h2>
</div>

Context

So where does the title and text come from? For every page in the pages folder there is a javascript object file in cms folder. For this case, the context file will look like this

{
    title: 'enduro',
    text: 'everybody loves enduro'
}

Components

One good idea is to split up the page into smaller parts – components. For example, let’s create a footer component and save it in the components folder:

<footer>
    2016 enduro.js
</footer>

Now you can comfortably include it in the homepage by adding {{>footer}}.

Note: whatever folder structure there is in the components directory, components are registered by the file name only.

Block components

Another option is to create a block component, which wraps around whatever is inside. Let’s create a body component that looks like this:

<header>
    2016 enduro.js
</header>

{{>@partial-block}}

<footer>
    2016 enduro.js
</footer>

Now it’s ready to be used like this:

{{#>body}}
    Content goes here
{{/body}}

Helpers

Handlebars is logicless templating engine – so no mixing in code. Only way to built complex templates are using helpers.

For example: {{lorem 20}} will print random 20 lorem words.

Handlebars itself has some built-in helpers such as {{#if}} {{#each}} – Checkout the list here: Handlebars helpers

Built in helpers

I decided to include some handy helpers directly in enduro. Check out the list here: Built-in helpers

Custom helpers

You can, and probably will have to write your own helpers. Just add .js files in assets/hbs_helpers.

Check out this slug helper:

// * ———————————————————————————————————————————————————————— * //
// *    slug helper
// * ———————————————————————————————————————————————————————— * //

__templating_engine.registerHelper("slug", function (input) {
    return input.toString().toLowerCase()
        .replace(/s+/g, '-') // Replace spaces with -
        .replace(/[^w-]+/g, '') // Remove all non-word chars
        .replace(/--+/g, '-') // Replace multiple - with single -
        .replace(/^-+/, '') // Trim - from start of text
        .replace(/-+$/, '') // Trim - from end of text
});