Using Twig templates

The easiest way to work with Twig templates is to allow Drupal and the Twig debug settings we enabled earlier to do the entire work for us. So what do I mean? Begin by navigating to the homepage and inspecting the markup using Chrome's developer tools. Locate the section of markup where we see the div element with a class of layout-container, as shown in the following image:

Twig debugging allows us to view all the information we need to identify which Twig template we can use for our homepage. If we look at the information provided, we can identify the following:

• Drupal is currently using page.html.twig

• The template is located at core/modules/system/templates/page.html.twig

• Drupal suggests that we can use page--front.html.twig to display the same content

With these three pieces of information, we can locate, copy, and modify any Twig template we may need in order to modify the layout and markup of the content coming from Drupal.

Creating a homepage template

One rule that...