Canvas

Welcome to Canvas, the flexible, fast, and secure template engine for Blutui.

This document describes the syntax and semantics of the template engine and will be most useful as reference to those creating Canvas templates.

Synopsis

A template is a regular text file. It can generate any text-based format (HTML, XML, CSV, LaTeX, etc.).

A template contains variables or expressions, which get replaced with values when the template is evaluated, and tags, which control the template’s logic.

Below is a minimal template that illustrates a few basics. We will cover further details later on:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>

  <body>
    <ul id="navigation">
      {% for item in navigation %}
        <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
      {% endfor %}
    </ul>

    <h1>My Webpage</h1>
    {{ a_variable }}
  </body>
</html>

There are two kinds of delimiters: {% ... %} and {{ ... }}. The first one is used to execute statements such as for-loops, the latter outputs the result of an expression.

Project Structure

The Canvas file structure gives you the ability to structure your project in a way that suits your workflow. However you are required to include the public/ and views/ folders. The following is a breakdown of the required folders:

  • public: This directory contains your projects public assets. CSS, JS, and image files can all be found in this folder and are accessible from your browser.
  • views: This directory is the location for your projects .html templates. All pages and templates are rendered from this folder.

The folder structure within the public and views directory are completely up to you. To get started with creating a page you have two options:

  • Create a page through Canvas: This can be achieved by creating a pages folder in your views directory, then create a new .html, for example: index.html (the homepage of your site).
  • Create a page through the Dashboard: Create a new page through the "Pages" menu and specify a "Layout". A layout is relative to the views directory of your project.

The default project comes with a pages folder in the views directory.