We may have heard the term "template" before when talking to someone about theming and Drupal. But what exactly is a template? We can think of a template as a text file no different from any HTML document that provides a method for separating the presentation layer from the business logic. In traditional PHP websites, we have the ability to mix PHP with HTML and CSS, which makes managing web pages both difficult and dangerous. Drupal provides us with the ability to use templating engines to enforce the separation of the two, so we can begin to focus more on the HTML and CSS and worry less about the PHP.
In general, templates can contain HTML markup and PHP variables that output content contained within a Drupal database. Templates can be as small as a few lines of HTML that hold the presentational layer for a block that is displayed in a region on the page, or the actual page itself, with containers defined for header, content, and so on.
To get a better idea of what this looks like, let's take a look at the following image:
If we break down the image into logical sections of a website, we can begin to get an idea of what constitutes a template. A template can be any of the following:
html.html.twig
.page.html.twig
.page.html.twig
template or may reside in a region specified within our configuration file. This is commonly referred to as region.html.twig
.node.html.twig
and comment.html.twig
.block.html.twig
.Drupal and the theme engine it uses to convert the markup and variables into HTML interpret each individual template or series of templates. We have full control over what is output using the new Twig templating engine.
Once we begin theming, we will start to see a pattern of how templates are used, and as we gain more experience, we will find ourselves using less and less templates. However, to begin with, we will build examples of each to help clarify their functionality within Drupal.
The nice thing about Drupal is that, by default, the core system provides us with all the templates we need to use. So, knowing where to find the core templates is important because it will allow us to copy them into our own theme folder to override with our own markup.
Let's begin by opening up our Drupal instance in MAC Finder or Windows Explorer and browsing to the core/modules
folder. Contained within this folder are the core modules that make up Drupal, along with their respective templates. Most of the core templates will be located in the core/modules/system/templates
folder, as shown in the following image:
If we browse the contents of the templates
folder, we will see some of the most common templates we will be using including the following:
html.html.twig
: HTML wrapperpage.html.twig
: Page wrapperregion.html.twig
: Region wrapperThree more template folders that we need to be aware of are:
core/modules/node/templates
: This contains the templates for nodescore/modules/comment/templates
: This contains the comment templatescore/modules/block/templates
: This contains the templates for blocksWe will find ourselves frequently overriding templates, so we need to make sure that we know where to find any Twig template that we will be theming.
Most of us have done some PHP development or are at least familiar enough with it to work with the variables that Drupal outputs. So, as we look at the templates, we should be noticing that the files don't end with a file extension of .php
but instead end with a file extension of .twig
. In fact, if we were to look at the html.html.twig
template located in the core/modules/system/templates
folder, we won't even find PHP syntax inside it:
<!DOCTYPE html> <html{{ html_attributes }}> <head> <head-placeholder token="{{ placeholder_token|raw }}"> <title>{{ head_title|safe_join(' | ') }}</title> <css-placeholder token="{{ placeholder_token|raw }}"> <js-placeholder token="{{ placeholder_token|raw }}"> </head> <body{{ attributes }}> <a href="#main-content" class="visually-hidden focusable"> {{ 'Skip to main content'|t }} </a> {{ page_top }} {{ page }} {{ page_bottom }} <js-bottom-placeholder token="{{ placeholder_token|raw }}"> </body> </html>
Instead, we will see general HTML markup along with the Twig syntax that will output content within its place. We will take a closer look at Twig in a moment. First, we will try our hand at creating a basic theme.