4.3 Modular Home Page

Hey, welcome back to Up and Running with Grav. In these last two lessons of the course, we're gonna add in a modular page type. And we're gonna use that to set up our homepage. Right now, our homepage is just using a regular page, a standard page. And we're gonna replace that with a page that uses the modular approach. So the first thing that we're gonna need to do is make space for our homepage by renaming the page that is currently acting as the homepage. So in the pages section of the admin panel, go in and edit the page that's currently named home. And we're gonna change the title. This is a page about Grav, so we're just gonna change it to Grav. We'll save that, and there's also one more thing we're gonna need to do, though. And that is, in the advanced tab, we're gonna need to change the name of the folder from Home to Grav, and we'll save that also. Now we'll jump into our file system. And as we did with our blogger a couple of lessons ago, we're gonna set this up manually. It's just a little bit easier with modular pages and listing pages to do this part manually. So we'll create a new folder, we'll name it 04.home. Inside that we're gonna create the markdown file for our modular home page and we're gonna call it modular.md. So you probably notice that the process so far is fairly similar to the set up for a blog page. And that's because both of them are types of parent pages that are designed to have child pages providing them with content. And you might recall from earlier in the course, I pointed out that modular and listing pages are actually quite similar. But the difference is, with a listing page, all of those child pages designed to be viewed by themselves. Whereas with a modular page, the child pages are not designed to be read by themselves, they're solely designed to form components of the parent page. And once again, as with the blog, I've already prepared some content that you can just drop into your site, so you don't have to do this manually. We're gonna have three sections, or three modules, in our home page. And you can find those by going into your source files, into the pages folder again. This time going to the folder named home, and here you'll find these three folders. So we're gonna have at the top a hero module. After that, we're gonna have some intro text. And below that, we're gonna show some features. So you wanna copy these folders and paste them into the home folder of your site. So we'll just have a quick look at what's inside. You can see in each one of the folders for these modules, there is a separate markdown file. And as with everything that we've done so far, the markdown files are named according that the template that we're gonna be using to display them. In our case, we're gonna have a separate template for each one of these page modules. You don't have to do it that way, if you've got a page that's made out of ten different modules and two of those modules are very similar to one another, then they can share the same page template. That's totally fine. And that you'll also notice that in the hero folder, we have heroimage.jpg. We're gonna be using that as a cover image in the background of our hero module. Okay, so next up, let's go ahead and edit our modular.md page. As with our blog markdown page that we created earlier, this modular mark down page is not gonna include any actual page content. It's just gonna include a header or front meta section that lets the Grav system know what child content we wanna include into this page. So we'll start by just adding in a title. And then we're gonna set up the content that we wanna use here. So we'll add content: and go to a new line and we'll tab indent. We're gonna say items again just like we did with our blog. We're going to say @self.modular, and that lets Grav know that what we're doing is setting up a modular page type. Now on the next line, we're gonna set up the order that we wanna have each one of these modules appear. So we'll add order:, then on a new line we'll add custom, for custom order. And now on the following three lines, we're gonna specify each of our modules. So we'll put a dash, a space and then the name of our first module which is _hero. Then on the next line,- _intro. And on the next line,- _features. Now we are gonna have to add a little bit extra to control the order of these modules, but we're gonna do that later. For now, this will be enough to get us going. Okay, so now that we've got the content for each one of our modules in and we've got the essential things that we need to have in our modular markdown page. We can go ahead and set up the templates for each one of these modules. Okay, so we don't need our source files anymore, so I'm just gonna close down this pane where we're looking at our source files. Now we're gonna go into our themes templates folder again. Now, the templates that we're gonna be creating for these modules, they're not top level templates. And they're not partials either, so we're gonna set up a new folder to house them. And we're just gonna name that modular. Inside here, we're gonna need three templates, one for each of that modules. So we'll need one named hero.html.twig. We'll need another named intro.html.twig, and then we'll need a third one named features.html.twig. Now let's grab all three and open them up for editing. So in order for this to function, not with any type of styling or anything else, just pure functionality. All we need to do is add the expression, content. So we'll go through and add that into each one. And that's gonna allow us to output the content of each one of our modules. Now, in order to bring those three together, we need another template. And that is for our top level module page. So we'll go back into our templates folder, and we'll create a new template named modular.html.twig. And then we'll open that up for editing. Right, I'm just gonna close down a few of these files that we don't need right now, just to make everything a little bit easier to follow. Now with our modular template, we are gonna be extending on the base template again. But we're gonna be doing it in a way that we need to actually slightly modify the way that the header code is being used. By default, we just have our header running across the top with the bar that includes the site title and the menu. But we wanna change the way that that's gonna appear, and have it form a part of our hero unit. Then with the other two modules, we wanna have them work in a different way to the hero module. So what we're gonna do in our base template is set up another two blocks. We're gonna have one block for the top section of the page. And we're gonna have another block for the main section of the page. And then in our modular template, we're gonna work differently with those two blocks for our different modules. To set that up, above the existing header code, we're gonna add, block top. And then, we'll end that block below the header code. And then above the main code, we're gonna add, block main. And then we'll end that block underneath the closing main tag. So now that gives us what we need to create our modular template. So just like with our other templates, we're gonna start by extending that base template. We'll add in extends, and then partials, base.html.twig. First, we're gonna output our hero module, and we're gonna do that by tapping into that top block. So we'll add block top and then endblock. After that, we wanna output our intro and features module, and we're gonna do that in the main block. So we'll add block main and then endblock. In order to output just our hero module inside the top block, we're gonna need to do a query that's gonna fetch just that hero module only. And we wanna save that inside a variable. Much the same as when we're setting up our blog, we fetched all of the blog posts and saved them inside a variable. So we're gonna set the variable here, we'll add set hero = page.collection, but we don't want the whole page collection. We don't want all of those modules, we just want the first one which is our hero module. So we're gonna filter this page collection by adding a pipe symbol. And then just adding the word, first. So that, as long as the hero module is the first module, we'll fetch it alone. Now, we're gonna add more detail around our hero module in the next lesson. But for now, we just wanna get the content output. Just get the basic functionality in place. So for now, all we're gonna output is hero.content. Now for the other two modules, we're gonna output those in the main block section. To do that, we're gonna use a for loop again, and we're gonna iterate through page.collection. But we need to be able to check on the name of each one of the pages that we bring in so that we can identify which one of those pages is named hero. And then not output that content here, given we've already output it above. So rather than just saying something like for module in page collection, we're also gonna have it give us the name of each one of these modules. So we're gonna say, for name, module in page.collection. So, that is going to put the name of each module into this variable name and then everything else is gonna go into this variable module. And then we'll just end the for loop with endfor. Now, we can add a check to make sure that the module that's currently being iterated through is not named hero. So we're gonna put if name does not equal, and then in the string, put _hero. So when the hero module is encountered in this iteration, it will just be skipped over. For every other module, we're gonna output this content. So as with the hero module, we're not doing anything other than the absolute essentials for this to work right now. So we're just gonna put module.content and then we'll come back and spruce this all up in the next lesson. But as far as making this all work, that is now up and running. So we'll go back to our front-end. Now, we're gonna refresh here, but you're about to encounter something that might throw you off a little bit as you're working with Grav. So we've refreshed, but nothing has changed, even though we know that we've done everything correctly with editing our files. That's because Grav has an internal pacing system. So sometimes, when you're making edits to templates, or to existing content, you're not gonna see those changes because they're stuck in the case. So, we're gonna jump over to the admin panel, and we're in the dashboard section. And at the top right here, you can see this button that says, clear cache. So hit that, now we'll refresh again, and there's our three content modules. Right now, they're unstyled but all the content is coming in, so we know that we have our functionality going. So, these two headings here, this is gonna he our hero unit. This text here is our intro and here, we have the headings of our features section. You can actually turn off the caching in your Grav admin panel if you prefer to just have it off altogether. Otherwise, if you know that you've made a change correctly to your templates, or to you're content, you're not seeing it. Just hit that Clear Cache button, and you'll be all good to go. All right, so in the next lesson, which will be the last lesson of the course, we're gonna finish flushing out the templates for our modular home page. Right now, we've just got plain text, so we're gonna round that out by completing the markup and finalizing the styling of that home page. So we'll be going through all of that in the last lesson. I'll see you there.