Fixing Navigation Links 0:00Okay, welcome back. So in this episode, I'd like to take a bit of time to talk more about Vues, and how we can share HTML and templates. I'll give you an example. So if we go to the home page, here's where I added two quick dummy links to the about page and contact. But actually, we need to update those URLs, right? So we come back, we're going to go into Vues, index, and remove the extension here. And further, we can get rid of the page. Okay, maybe one more for about our culture. And I believe that URL is about slash culture. Okay, so if I go back to Chrome, and we go back to the home, we can go to about, about our culture, and contact. So this is great. But notice that every time we click away, we lose our navigation. And of course, that's because we only defined the navigation in this view. So what a lot of newcomers end up doing is they think, well, I just have to repeat that. Avoiding Duplicate Navigation 0:44we lose our navigation. And of course, that's because we only defined the navigation in this view. So what a lot of newcomers end up doing is they think, well, I just have to repeat that. So I'm going to add it here, and every other page that we can direct to. So if I come back to Chrome, we go to about. And now, yeah, it's true, the navigation is here. And on that note, we probably need a link back to the home page. But look at the workflow I had to do here. So I add a new link to the home page, come back, refresh. Now I go to home. But now the home page isn't there. So I'm having to repeat myself over and over. And as you can imagine, this breaks down really, really quickly, you don't want to do this. So instead, there's lots of ways you can handle this. But here's a good first step. You take any reusable code, and you extract it to what we might call a partial. So for example, I could say, Extracting Nav Partial 1:28lots of ways you can handle this. But here's a good first step. You take any reusable code, and you extract it to what we might call a partial. So for example, I could say, PHP include, or require, either one will do. And we're going to link to a partial slash nav file. Okay, let's create that. And then we'll talk more. Views, partials, nav.php. And I'm going to save that but not add anything. So if I come back to Chrome, our navigation disappears. But when I enter it here, and come back, now it comes back. So we're taking reusable templates or HTML here, and we're extracting them to their own partials. So now we're one step closer. We can still go quite a few steps closer, but this is one step closer. So now you're about view does not reproduce the navigation, it simply references it here. So if I come back to Chrome, homepage has navigation, about page has navigation. However, if you ever need tonot reproduce the navigation, it simply references it here. So if I come back to Chrome, homepage has navigation, about page has navigation. However, if you ever need to modify this navigation, you no longer have to go to every single view, you change it in one place, I'll make that capital. If I come back, that will be reflected everywhere. But now we have a similar situation for other pages. So we are reproducing this wrapping HTML. So like, let's say we just hard code this. And we we say that we want the body to have a background color of gray. Okay, well, once again, it'll show up. Let's make it a little more visible. There we go. So yes, it'll show up on the homepage. But as soon as we leave there, well, it's a whole new block of HTML, so it resets. So you're in that exact same situation. And it's true. One option, of course, is to simply defer to a style sheet. So we could say we want a public, ideally, you'll have some Moving Styles to CSS 3:06so it resets. So you're in that exact same situation. And it's true. One option, of course, is to simply defer to a style sheet. So we could say we want a public, ideally, you'll have some kind of public folder. And that will be the entry point for any of your assets and your site itself. But we'll get there eventually. Anyways, we'll have style that CSS and create that. And I will paste that in there. And if we come back to Chrome, give this a refresh, we still get the same thing. But now we've extracted all of this to an external style sheet. So yeah, we're in that same situation, though. We have improved it a bit. But I'm still having to update every file to include new items in the head tag. So if I come to about, now that one works. But of course, any other page fails to work. Okay, so now we've got so we're making progress. What if we instead take this top part, and actually including the Creating Head and Footer Partials 3:52now that one works. But of course, any other page fails to work. Okay, so now we've got so we're making progress. What if we instead take this top part, and actually including the navigation, and maybe that could instead be its own partial require partials slash head, and I will create that views partials head that PHP, and I'm just going to paste that in there. Okay, so if I come back, we can do the exact same thing with the footer. So we could say once again, views partials footer and paste that in. And also incidentally, any scripts you want to add could be placed there or any scripts you want to import. And now once again, you would take this, and you would place this at the bottom. And this will be your footer. And let's add the extension here. Okay, let's see if this still works. Chrome about and we have a mistake require partial slash nav failed to open. Ah, this is the case because it is relative. So we already are in the partialshere. Okay, let's see if this still works. Chrome about and we have a mistake require partial slash nav failed to open. Ah, this is the case because it is relative. So we already are in the partials directory. So we just have to load nav dot PHP. Anyways, if we come back and refresh, that should now work and it does. So now about has the entire HTML tag. If we go to home, let's update that as well. Here's our index view. Well, we can get rid of all of that and replace it with PHP require partials slash head. Now I can get rid of the navigation, I can take all this and unindent it. And then finally, the section at the bottom can be replaced with the footer itself. Okay, so let's close that out. Come back. If I give this a refresh, we still get the same thing. But once again, we are extracting some of these templates. And this is a good first step to get into. Once again, you'll find that there are template engines like twig or Laravel's blade. Applying Layout Partials Everywhere 5:40But once again, we are extracting some of these templates. And this is a good first step to get into. Once again, you'll find that there are template engines like twig or Laravel's blade. They give you a really nice system for working with layouts and sections and including different parts. It's pretty nice. But at our current level, yeah, this is kind of a good start. Now, once again, if I ever need to change something related to the header, whether it's added new style sheets or something else, I only have to change it in one place, and it will be reflected on the about page and also the homepage. So that means we can take, for example, about, and I can replace that here. So I'll just take this junk here. And now everything else can leave, come back, go to our culture. Now we're using the template. And then finally, the same thing for the contact page. So there's the unique body for the contact.And now everything else can leave, come back, go to our culture. Now we're using the template. And then finally, the same thing for the contact page. So there's the unique body for the contact. And then everything else can leave. All right, go to contacts. And now they are all using the same templates. So good job. You're making some more progress. Now, you're learning about partials and kind of drying up your templates so that you don't have to rewrite all of the head and the footer and the navigation from scratch. You extract those to their own partials so that they may be included anywhere in your project that they are needed.
