Adding About Route 0:00Let's add one more route together. I'm going to paste all of this in, and this time, when the user visits slash about, I will load a Vue called about. Okay. Now, in my resources directory, I can add a new file named about.blade.php. Now one more time, I'm going to open up the contact page, grab this HTML, and paste it in, and this time I'll say about us. Okay. Let's see if it works. I'm going to go back to our welcome page, and now I'm going to swap this out with an Building Navigation Links 0:30Let's see if it works. I'm going to go back to our welcome page, and now I'm going to swap this out with an unordered list. We'll have one for our contact page, and another for the about page. Makes sense? We have a list of links. Okay. Refresh, and now we have one to contact, and one to about. But now we realized we have our little navigation link, but as soon as I'm on the contact page, I'm stuck here, right?But now we realized we have our little navigation link, but as soon as I'm on the contact page, I'm stuck here, right? So if you ever find yourself in this situation where you think, well, okay, I need to just grab that, we'll bring this in here as well, and this in here at the bottom. Bottom not a great place to put your navigation links, but you get the idea. All right. Well, now we can at least go back. That's good. So we're on the home page, about, contact. Uh-oh, but now we can't get back to the home page. Creating a Layout File 1:20So we're on the home page, about, contact. Uh-oh, but now we can't get back to the home page. You can see very quickly this breaks down. And then imagine as soon as you add yet another link, you have to copy and paste that to every new view. So this isn't even remotely scalable in the least. We're going to fix this by using a layout file. You can do this in a number of ways. Some people create a file, they'll call it master or layout, any of these would be fine. But we're going to add a special extension, layout.blade.extension.Some people create a file, they'll call it master or layout, any of these would be fine. But we're going to add a special extension, layout.blade.extension. Blade is Layerfell's templating engine. Think of it as a layer on top of PHP that gives you some nice syntactic sugar. But ultimately, it will compile down to basic PHP, and that is what ultimately gets rendered in the browser. Okay. So in this layout file, I'm going to add everything that should be consistent across all views. This will be usually your header, your footer, maybe some signup link, some navigation bar. You get the idea. Yielding and Extending Layout 2:14This will be usually your header, your footer, maybe some signup link, some navigation bar. You get the idea. Let's go to our welcome page. And at the moment, it looks like all of this minus the specifics. So something like that. But now, if we have this layout file, I still need a way to say, all right, well, the specifics, things like this, where do I want that to go within here? We can allow for that by using the yield keyword, at symbol, yield, and we're going to give it a name. What does this represent?it a name. What does this represent? Well, how about the content? Now, in any file, we can register a section for that content. Take a look. I no longer need all of this. Instead, I'm going to extend which layout file? Well, this one here. So I can say extends layout. Extend the layout file here.So I can say extends layout. Extend the layout file here. Now, if this file was in a directory, then you would want to make sure you update that. So if you had maybe your layouts directory, and then you named the file app. All right. So this is going to look into the views directory, into the layouts directory for a file named app. And notice we use a dot notation to separate the directories, but you could do this if you want. I just like the period.you want. I just like the period. All right. Let's bring it back to what we had. And now, we're going to register a section for the content. Let's try it. Section for the content. And then I need to specify the end of my section. Think of this as a section block, and we'll say my first website. All right.Think of this as a section block, and we'll say my first website. All right. Let's first see if this works. I'm going to visit my homepage, and there we go. But now this time, we're leveraging a layout file. All we did was register a section for the content. And behind the scenes, Laravel is going to pluck that out and insert that section wherever we yielded it in the master file. So if you instead yield it below the navigation, like this, all right, well, if we come back, now the navigation will be on top, and your main section content will be on the bottom. Applying Layout to Views 4:07So if you instead yield it below the navigation, like this, all right, well, if we come back, now the navigation will be on top, and your main section content will be on the bottom. Let's do the same thing for the other files. So here's our homepage. I'll copy that. The about page will be everything except for the wrapping HTML. Let's paste all of that in from the other file, and then I can just take what we had here and paste it in. There we go. All right.There we go. All right. Let's see if that works. Let's visit the about page. There we go. There's one more to do. But it still hasn't been updated. So all we have here is an H1. So again, let's extend layout, and then register a section for the content. And paste it in.So again, let's extend layout, and then register a section for the content. And paste it in. There we go. Refresh, and now we have our contact page, the about page, and let's add one more for the homepage. This time, I only need to update it in one location, home. All right. Refresh. Here's our homepage. Here's the about page. Dynamic Page Titles 5:09Here's our homepage. Here's the about page. Here's the contact page. But now, you'll notice that the title here is just the URL, and that's because right here we left it blank. So yeah, we could say contact page, refresh, and now we've updated the title. However, as soon as I visit the about us page, that's no longer correct. So it sounds like this needs to be dynamic as well. Now you can either do this programmatically, or you can pass it from the controller, or what I often do is I simply yield the title.Now you can either do this programmatically, or you can pass it from the controller, or what I often do is I simply yield the title. And now every view can be responsible for declaring what its title should be. So for example, in contact, we'll have a section for the title. And here we'll say contact page, or contact us. Okay. So now, if I give it a refresh on contact, that's now working. But about us is still nothing. And in fact, if we view the source, you can see it's nothing. We have a couple choices here.And in fact, if we view the source, you can see it's nothing. We have a couple choices here. You could always set a default. So if I was building a new Lerikas, I might just set a default of Lerikas there. If you don't give me anything else, I will use that. So if I come back and refresh, you didn't give us anything else, so we set the title to Lerikas. But on the contact page, we did set it to something else, so we used that instead. Now one quick note. You'll see this here.Now one quick note. You'll see this here. What you could also do, if we switch back, is pass it through inline, like so. Since we don't really have enough to warrant the section block, this would be an option as well. So come back, refresh, and we still get the exact same thing as before. Okay. So we have contact. Let's do the about page. And finally, let's do the home page.Let's do the about page. And finally, let's do the home page. And in this case, it would basically be the default, right? It would be the Lerikas for my website title. So I can leave that one blank. Okay. Let's try it. Home has a title of Lerikas. About us has a title of About us. And contact has a title of Contact.About us has a title of About us. And contact has a title of Contact. So that's how we handle situations where we need portions of the layout file to be dynamic. In the next lesson, I'll show you how to pass any kind of data to your views.
