Implementing our page title

Every content type we develop in Drupal includes a title field, which is used to identify the node currently being displayed. In Drupal 8, the title field warrants its own block called Page title. This new block provides us with the flexibility to place the page title into any region and have it display wherever it is needed in our layout.

In order for us to implement the page title displayed within our mockup, we will need to complete a series of steps:

  1. First, we will copy the static markup from our mockup into our interior page template and preview the results.
  2. Second, we will configure our theme to add a new Title Bar region that we can use to assign content to.
  3. Next, we will need to assign the Page title block to our new region and then output it within our page.html.twig template.
  4. Finally, we will refactor the static Page title markup using Twig to create a new block template.

Working with static HTML

When implementing any section of content within our theme, this will often begin with copying static HTML. Having actual working HTML within our template file ensures that our content displays the way we are expecting. The other advantage of copying static HTML into our template is that it allows us to easily replace the markup with dynamic content. Let's begin by following these steps:

  1. Open page.html.twig.
  2. Navigate to Mockup/about-us.html and copy the following markup. Don't forget to include the opening and closing main layout section, as shown here:
       <main role="main" class="main">
     
       <section class="page-top">
         <div class="container">
           <h1>About Us</h1>
         </div>
       </section>
     
   </main>
  3. Paste the markup into the page.html.twig template.
  4. Save page.html.twig.

Make sure to clear Drupal's cache and refresh the About Us page within our browser. We should now see the static page title being displayed.

Working with static HTML

We may also note the Page title block being displayed below our static title. By default, Drupal assigns the Page title block to the Content region. In order for us to replace our static title with Drupal's Page title block, we will need to add a new region.

Adding new regions

When we first created our theme, we added regions for Drupal to use when assigning blocks of content. While we may have thought we accounted for all the regions our theme would need, we neglected to add one for our page title.

We can add new regions to our theme at any time by modifying our configuration file. In order to add a new Title Bar region, we will need to navigate to our themes/octo folder and follow these steps:

  1. Open the octo.info.yml file.
  2. Add the following to our regions section:
       title_bar: 'Title Bar'
  3. Save octo.info.yml.

Make sure to clear Drupal's cache and then navigate to the Block layout page located at /admin/structure/block. We should now see that the new region has been added.

Adding new regions

Reassigning the Page title block

With our new region added, we can focus on reassigning the Page title block by following these steps:

  1. Locate the Page title block in the Content region.
  2. Select Title Bar from the Region dropdown.
  3. Click on the Save blocks button.

If for any reason the Page title block is missing from the Block layout screen, we can add it by using the Place block button next to the region we want to place it in. Now we need to print our new region so that we can view the Page title block within our template.

Printing the Title Bar region

In order for our page.html.twig template to display the Page title block, we need to print the Title Bar region. The Twig variable that represents the region's name can always be found by looking in our themes octo.info.yml file.

  1. Open page.html.twig.
  2. Add the Twig variable {{ page.title_bar }} directly below the main element so that our markup looks like the following:
       <main role="main" class="main">
     {{ page.title_bar}}
  3. Save page.html.twig.

Make sure to clear Drupal's cache and then refresh the browser. Our About Us page is now displaying two page titles—one dynamic and one static, as shown in the following image:

Printing the Title Bar region

We can fix the duplicated page titles by moving our static markup into the Page title block template that Drupal is outputting. This will give us the freedom to then remove the static markup completely from our page.html.twig template while maintaining the styling that is currently being displayed.

Creating a block template

If we inspect the page title on the About Us page, we will see that Drupal is using the default block.html.twig template. We can take advantage of FILE NAME SUGGESTIONS to create our own block template specific to the Page title and then refactor the markup into it by following these steps:

  1. Navigate to core/modules/block/templates and copy the block.html.twig template to our themes/octo/templates folder.
  2. Rename block.html.twig to block--page-title-block.html.twig.
  3. Replace the content with the following markup:
       <section class="page-top">
     <div class="container">
       {{ content }}
     </div>
   </section>
  4. Save block--page-title-block.html.twig.
  5. Open page.html.twig.
  6. Delete the page-top section.
  7. Save both templates.

Make sure to clear Drupal's cache and then refresh the browser. As we navigate from page to page, we should see a single page title being displayed and updating to display the current page's title. Time to move on to our main content section.

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

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