A template is basically an html file with some extra features to make development easier. Templates make it easy to repeat all the basic elements in your pages, like headers and navigation.
Introduction to Templates
Technical Details
Innota uses a powerful template engine called Twig.
Read Twig for Template Designers to learn the basics of Twig.
There are three types of templates in Innota:
- Page templates
- Post templates
- Templates (regular templates, or partial templates)
A page template is a template that can be used to display pages, and a post template is template that can be used in blog posts. All the other templates are for defining the main layout, small helper templates and so on.
You can have multiple templates for different kinds of pages or posts. For instance, you could have a template for regular blog posts, and a different template for blog posts about new products your company is making. You would still write blog posts like you normally do, but you can use a different template to make the different types of blog posts look totally different.
Creating a Page Template
Click on Add template -> Page template. Actually, a page template is just like any template, except that the filename starts with page/.
Each template has a filename and content. For page and post templates there's a special block where the actual content of the page or post will be inserted. Here's an example of a simple, fully working page template
<html>
<head>
<title>{{ page.title }} | {{ site.title }}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
As you probably guessed, the syntax {{}} is for displaying variables. In this case the page title for all pages is combination of the page and site titles.
The {% block content %}{% endblock %} is where the actual content of the page will be injected. At this point the content is already converted from Markdown.
Extending Templates
The example above is pretty simple and you probably have lots other content that is repeated on every page, like a footer, some metadata and so on. If you need more than one page template you will quickly notice that you're repeating yourself in all the page templates. This is where extending comes in.
Page and post templates can extend other templates. Lets create a little bit more complex page structure and put it inside a template called simply base
<html>
<head>
<title>{{ page.title }} | {{ site.title }}
</head>
<body>
<header>
<h1>{{ site.title }}</h1>
</header>
<main>
{% block content_main %}{% endblock %}
</main>
<aside>
{% block content_sidebar %}{% endblock %}
</aside>
<footer>
My fancy footer.
</footer>
</body>
</html>
This will be our new base template that defines the most basic html structure for all of our pages.
There's a lot more content here. There's a header and a footer, and a sidebar that stay the same on all pages. Now, lets change the page template from previous example to use this new base templates.
{% extends 'base' %}
{% block content_main %}
{% block content %}{% endblock %}
{% endblock %}
All you need to extend a template is {% extends 'base' %} at the top of the template.
Creating more page or post templates is now pretty easy. Lets create a post template that displays some post details in the sidebar. Here's template post/default
{% extends 'base' %}
{% block content_main %}
{% block content %}{% endblock %}
{% endblock %}
{% block content_sidebar %}
Posted at {{ page.date | date("Y-m-d") }}
{% endblock %}
This is exactly the same as the page template we created earlier, but it includes the post date in the sidebar block.
The date("Y-m-d") is also new here. This is called the date filter. It just changes to the date of the post to look like 2016-01-16. You can read more about the date filter in thw Twig Documentation.