2.6 Separate Into Partials

Hi and welcome back to Bolt CMS Theme Development. So far we have finished making our index template. So that's the template that controls the home page. And now we've gotta make the templates that control the rest of the site. But before we do that, we wanna make sure that for all of the other templates we create, we don't need to rewrite all of this code that that we have in our first template. So for example, this opening code here. So we've got our opening HTML tags, our head section, our body section. There's no need for us to have to rewrite that code out in each of our templates. So what we're gonna do, is we're gonna take this code out of this template, we're gonna put it in another file, our partial template file. And then we're gonna pull that partial template file into this template. And then as we go on and we create our other templates as well, we'll be able to use those partials there too. And that will be a lot more efficient. So let's start by making a partial template file that we can use to hold all of this opening code here. So inside our theme we're gonna need to make a new twig file. And call this one _header. And then open that up in Sublime Text. And now all we have to do is grab all this code and cut it and then paste it into our new file. And save that. And then back in our index file, to pull that partial file in, we're gonna say, include, and then we just put the name of the template. So that's _header.twig. And then we'll save that. And now we should see in our site is absolutely no change. There we go. So that's pulling in that header partial. And everything is working exactly as it was before. Now, let's do the same thing for the code at the very bottom. This code we know is going to be included in every page. And also our footer section is gonna be included in every page. So make another twig file. And we'll call this one _footer. And now we just do the same thing again. We'll cut this code out. Paste it into our footer partial. Save it. And then put include '_footer.twig'. And then we can consider what other parts of the code we have in our home page template that are definitely going to be used in other templates as well. So what have we got? We have our top panel. Now this is a top panel that's a full height of the screen. But on our subpages, so when a person is reading of full length entry or something along those lines, we don't really need to have a top panel taking up the full height of the screen. So we're not gonna reuse that top panel. This can be just for our index template. So we'll leave that where it is. Next up, we've got the about panel. That's also really only suitable for the front page. You don't need to have that anywhere else in the site. Then we've got our listings panel. Now this is something that we will use in other places in the site. We'll use it in the areas where we get to see a full blog listing. This is basically like a classic sidebar that you might see on a typical blog. The only difference being, with our design it runs horizontally. So, let's make another partial template file for this one. And we're gonna call it _listings_panel. And then once more. We just grab all the code for that panel and cut it. Paste it into our partial. And then add our include statement. So it's include '_listings_panel.twig'. All right, so let's test our frontend, and nothing should have changed. All right, so there's our listings panel still there. And so is our footer. So you can use that technique anywhere in your themes. Wherever you need to use a chunk of code over again in multiple templates. So, now that that's done, we're ready to move on to creating the rest of the template files that the theme needs in order to be complete. And the first one that we're gonna move on to is the listings template. If you remember back to the first lesson in the course we went over what listings are. So listings are wherever you have a presentation of multiple records. So you might be looking at a display of all of the entries in the site or all of the pages or all of the showcases. Or, you might be looking at everything that's under a particular category. So we're gonna set up that listings template in the next lesson. I'll see you there.