One of the great features of Drupal 8 is the new Twig templating engine. Simply by using the recommended file name suggestions, we saw how easy it was to theme our homepage by creating a page--front.html.twig template. However, we are not able to use this same template for our interior pages as Drupal only renders our homepage template on the front page of our website.
Instead, we will need to create a new Twig template that all of our interior pages can use when a user is navigating our website. By default, Drupal outputs content using the page.html.twig template. In this chapter, we will look at using the page.html.twig template, along with discussing strategies to address the following:
- We will begin with reviewing the About Us page mockup and identify any additional components that may require custom blocks, new regions, and Twig templates.
- Then, we will take a look at reusing regions such as our header and footer as they are considered global components that will be needed across all of our interior pages.
- Drupal 8 has moved the page title into a new Page title block. We will take a closer look at how we can use this block to recreate our Title Bar region.
- Using regions to control page flow is important in order to manage the content, and in Drupal we will look at printing out different regions while outputting any block content that has been assigned to them.
- Sometimes, we have the need to manipulate our main content's markup to add additional styling. You will learn how to not only print the content region but also take advantage of Node templates.
- Finally, Views play such an integrated part of any theme, so we will take another look at Drupal Views to display the content. You will learn how to use Twig variables to override fields as well as display the content by creating block displays.
Although we will work through each section, we can refer back to the Chapter07 exercise files folder. Each folder contains a start folder and an end folder with files that we can use to compare our work when needed. This also includes database snapshots that will allow us all to start from the same point when working through various lessons.
In order for us to identify page elements, we will be recreating them for the About Us page and need to take a closer look at our mockup. The About Us page can be found in the Mockup folder located in our exercise files. Begin by opening up the about-us.html file within the browser, as shown in the following image:
There are several page elements that we will need to recreate, and we can identify the following:
- First is the header, which we created previously on our homepage. We will need to add this region to our interior pages as well to ensure that our users can navigate from page to page and use the global search functionality.
- Second is the page title, which spans across the top of all our interior pages. This is a common element in Drupal that helps the user to identify which page they are currently on.
- Third is the main content region. Any nodes or custom blocks can output content in this region. We will need to make sure that we account for the content assigned to this region and manage how it flows within our page.
As we continue to scroll down the page, we come across additional content, as shown in the following image:
- The Team Member listing represents the content that is repeated, and anytime we see repeating content, we should consider building this using Drupal 8 views. This view will be specific to our About Us page, so we will look at creating a view block for this section and control the visibility accordingly.
- Finally, we will need to include our page footer. Once again, we already created this region on our homepage, so we will need to make sure that we include it within our interior page template as well.
We identified five specific page sections that need to be developed and themed. Most of the sections are global to all pages, with the exception of our team member listing. Now that we have a plan for what we will be developing, let's get started by creating our interior page template.