The next item we will move on to is creating the main homepage template. By default, Drupal uses the page.html.twig template to render any regions we have defined within our configuration. Because we broke out our Mockup into functional areas, we have a sense of what each region will contain. Our job is to recreate the homepage, which will require us to follow these basic theming techniques.
- First, we will take advantage of Drupal's file name suggestions to create our homepage template.
- Then, we will replace the contents of our template with the contents of our Mockups homepage.
- Finally, we will need to review the output of our new template.
If we inspect the homepage, it is currently using the core page.html.twig template to output content. But if we take advantage of the FILE NAME SUGGESTIONS provided, we are presented with a couple of additional choices for displaying content.
The reason we are interested in alternative templates for our homepage is due to the fact that as we navigate from page to page, we have clear layout changes. Our homepage has a completely different layout than our interior page, with the exception of any global elements. Knowing this, it would make sense to create a separate homepage template to manage our content.
We can begin by following these steps:
- Navigate to
core/modules/system/templatesand copypage.html.twig. - Place the copy within our
themes/octo/templatesfolder. - Rename
page.html.twigto the suggested name ofpage--front.html.twig.
Make sure to clear Drupal's cache and refresh our homepage. If we inspect the page again, we will note that we have an indicator next to page--front.html.twig under the FILE NAME SUGGESTIONS, and the output is now pointing to our themes folder.
When working with a mockup, the easiest way to start any theming project is by simply replacing the Twig templates contents with the static content from our design.
- Open
page--front.html.twigand delete the entire contents. - Navigate to
Mockup/index.htmland copy the markup between the opening and closingbodyelement minus the JavaScript references and paste it intopage--front-html.twig. - Save
page--front-html.twig.
Make sure to clear Drupal's cache and refresh the homepage within our browser. We should now have a working copy of the homepage mockup; well, sort of.
If it was only that simple, we would all be Drupal rock stars. What we do have though is a good starting point for which we can begin to replace static content with dynamic content. Also, we can validate the following:
- Our
page--front.html.twigtemplate is only being used on the homepage, or else our Error page would look the same once we navigated to any other page. - Our CSS, JavaScript, and assets are being included properly or else our homepage would look horrible.