Back to topic list

Working with templates


Enduro is built around templates.


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



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'


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:

    2016 enduro.js

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:

    2016 enduro.js


    2016 enduro.js

Now it’s ready to be used like this:

    Content goes here


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

Back to topic list

Shout out to pexels and freepik