The blog section of our website will be by far be the most complex to set up, as we will be taking advantage of the Twig template layer to modify the HTML markup from the Node level all the way down to the field level. What does this mean? It simply means we will be breaking our mockup down into small chunks, whether it be the blog teaser, a listing of blog categories, or even the simple blog image itself.
In this chapter, we will look at creating multiple Twig templates that our Blog listing page will use, as well as the following:
While we work through each section, we have the ability to refer back to the Chapter08
exercise files folder. Each folder contains a start
and 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 to assist us in identifying page elements that we will be recreating for the blog page, it would make sense to open up our mockup and review the layout and structure. The Blog page can be found in the Mockup
folder located in our exercise files. Begin by opening up the blog.html
file within the browser, as shown in the following image:
If we look at our mockup and break it down into manageable parts, we will notice several components that we will need to create using our existing post content type:
So we have identified four specific page components for our blog listing page. We will concentrate on creating these various items of our site and, once complete, we should be able to compare our blog listing page with our mockup.