Chapter 6. Theming Our Homepage

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:

  • We will start with the obvious task of applying our website logo and working with the new site branding block. This will be followed by creating our first Twig template to handle our HTML wrapper and any assets and functionality that should be globally applied.
  • Next, we will address converting our mockup's homepage markup into a Twig template with various regions to hold content.
  • We will start with static content and then slowly convert it into dynamic content with blocks for our search block, menu, and other regions.
  • Because aggregating data is such an integral part of Drupal with Views now in core, we will discover how to replicate content to use with the theming of our homepage slider.

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.

Creating our HTML wrapper

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.

Introducing web fonts

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:

  1. Open octo.libraries.yml.
  2. Add the following entry:
       webfonts:
     version: VERSION
     css:
       theme:
         //fonts.googleapis.com/css?family=Open+Sans:300,400,
           600,700,800|Roboto+Slab: { type: external }
  3. Save octo.libraries.yml.
  4. Open octo.info.yml.
  5. Add the following library reference pointing to the entry of our new web fonts:
       libraries:
     - octo/bootstrap
     - octo/webfonts
     - octo/base
  6. Save 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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.22.181.47