Any good design draws the user in with a visually exciting homepage, whether it is a clean, minimal navigation menu, great-looking photographs, or clear, concise information that keeps the user engaged. We are tasked with providing all of those features and more, though the thought of implementing a homepage with all these items may seem overwhelming at first. We will soon realize that they are just a series of steps that will become the norm for any Drupal 8 project. In this chapter, we will walk through implementing the following:
As we work through each section, we have the ability to refer back to the Chapter06
exercise files folder. Each folder contains the start
and end
folders with files that we can use to compare our work when needed. This also includes database snapshots that will allow us to all start from the same point when working through various lessons.
In order to start addressing the markup of our homepage, we need to look at creating our first Twig template. The html.html.twig
template is a little different than most templates, as it contains the basic structure or wrapper for a Drupal page that the rest of our templates will inherit. This template contains your standard HTML5 markup containing html
, head
, title
, and body
elements along with any other variables that Drupal 8 needs to output content.
We can begin by navigating to core/modules/system/templates
and copying the html.html.twig
Twig template to our themes/octo/templates
folder. One thing to keep in mind as we start working with the Twig templates is that we will always copy a template from core to our themes folder to ensure that we don't accidentally modify any core files.
Next, we can open html.html.twig
and review the markup in our editor. We have the following code:
<!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>
The markup is similar to any other HTML
document, with the addition of Twig variables and filters to output attributes, title, regions, and placeholders for CSS/JS. For example, <css-placeholder token="{{ placeholder_token|raw }}">
outputs any CSS files that we added to our *.libraries.yml
file and have referenced from within our themes configuration. Then, the {{ page }}
variable will output the contents of any page.html.twig
templates that it calls.
If we begin to compare the html.html.twig
template to the markup of our homepage mockup, we can start to visualize how things come together.
Our mockup takes full advantage of Google Fonts by adding it to the head of our document. The external reference allows our CSS to render the typography on various pages. The only problem is that currently we are not including the web fonts in our Drupal theme. Because we cannot download Google Fonts and use them locally, they need to be externally hosted. But how do we add externally hosted files to a *.libraries.yml
file?
The answer is actually quite simple. We need to specify the file type as external, and adding an external asset is something new we have yet to discuss. So, we can walk through the steps involved:
octo.libraries.yml
.webfonts: version: VERSION css: theme: //fonts.googleapis.com/css?family=Open+Sans:300,400, 600,700,800|Roboto+Slab: { type: external }
octo.libraries.yml
.octo.info.yml
.libraries: - octo/bootstrap - octo/webfonts - octo/base
octo.info.yml
.Make sure to clear Drupal's cache and refresh our homepage. If we inspect the page, we should see our external reference to Google Fonts being loaded directly after Twitter Bootstrap. Now that our HTML wrapper is complete, we can move on to creating our homepage template.