Templating Introduction

Your sites HTML output is controlled by the templates you define and configure.

Templating in Enact is powered by the Twig Templating System by Sensio Labs, which is a flexible, fast, and secure templating engine for PHP. We believe it is hands down the best templating system available for PHP, and that is why we choose it. If you haven't used it before you're in for a real treat, and we think you will agree with us that it is the best after using it for only an hour or so.

Storage#

Your templates live in the enact/template/ folder, and follow a naming convention like products.html or products.twig, both extensions are enabled by default, and can be changed via the defaultTemplateExtensions configuration.

You can create any number of sub-directories, and directories in the sub-directories ad infinitum inside the template folder to organize your templates as you see fit.

Paths#

Paths to your templates are relative to the enact/template/ folder, so if you have a template located at enact/template/news/breaking.html you would call it by specifying:

  • news/breaking.html

  • news/breaking

You will be entering paths to your templates in a couple situations:

In Enact, requests to your site have the ability to be resolved directly to a template without a entry or route match, because of this it is highly suggested you go read through the Routing documentation to understand how index templates and private template prefixes are used.

Suggested Layout Pattern#

When you first install Enact, you will notice there are two templates already created in your template folder. The index.html template and _layout.html, open the index template and look at the first line of the file

{% extends “_layout.html” %}

See the twig extends docs.

The extends twig tag does exactly what it sounds like, it allows the template making the extends call (the child template) to extend the defined template (the parent template). In this case, the index template is extending the layout template. The magic occurs by defining what is known in twig as a block in both the parent and child templates. The child template will then set the content it wants to extend the parent template with by wrapping it inside of the named block. Notice the next lines in the index template

{% block content %}

{% endblock %}

Inside the block is the content that will be set in the parents block definition.

This pattern allows for defining the basic HTML skeleton of each page, so your templates can focus on only the content specific to the current page, without redefining the skeleton and resources your pages use.