Creating the About View 0:00Let's discuss layout files in this lesson. So I'm going to use Command-P and Sublime Text to browse to my routes file. And we have two routes set up so far for Pages Controller. So if we switch over to that, yeah, we can see our home route loads a welcome view. And now let's make the about view do the same. Return Vue.about. Okay. So, as you remember, in our resources views directory, we can add an about page here. About.blade.php. Okay.About.blade.php. Okay. But now what about the basic boilerplate like your HTML here? Now in this case, let's get rid of all that style crap. But yeah, just in general, your HTML, your head section, do we have to do this and then just update things where necessary about page? Nah, you don't have to do that. That would be really bad, right? Because every time you make a change to, for example, pull in a new style sheet, you would need to update that in each view, which is a terrible idea. Introducing Layout Files 0:51Because every time you make a change to, for example, pull in a new style sheet, you would need to update that in each view, which is a terrible idea. So instead, we're going to use a layout file, or you might see these referred to as master pages. Think of them as basic boilerplate for your wrapping HTML. And then within each view, you only need to define subsets. Let me show you how this works. I'm going to create a new file and we'll call this layout.blade.php. And now let's insert some HTML. And now down here within the body section, I'm going to add a new blade directive called Adding Yield Placeholders 1:19And now let's insert some HTML. And now down here within the body section, I'm going to add a new blade directive called yield. So if I say yield content, and this can be anything we want, by the way, this can be yield foobar. It's just an identifier for a section that you'll create within your view. So in this case, this says, yeah, any section we've defined called content, I want to yield. So I want to take that section and insert it right here. Let's try it out. In my welcome view, yep, I no longer need any of this stuff. Extending Layout in Views 1:48Let's try it out. In my welcome view, yep, I no longer need any of this stuff. Now in this case, if I do want to keep the style sheet, yes, of course, you would put that right here. But anyways, I'd get rid of the entire thing. And now I would say I'm going to extend my layout file. Now I only have to create a section. So right here, if I want a section for my content, notice that keyword content, then I would say section content. And then stop designates the end of the section.I would say section content. And then stop designates the end of the section. Okay, so now I can say the welcome page goes here. And let's boot up a surfer and take a look. php artisan serve, command click on this, and here we go. So on my Mac, I can hit command option U to view the source, and you can see it was inserted directly where we expected. Now let's do the same thing for the about page. Right now we are duplicating all of that wrapping HTML, but we're going to fix that. Back to our editor, I can copy some of this, switch over to about that blade and get ridRight now we are duplicating all of that wrapping HTML, but we're going to fix that. Back to our editor, I can copy some of this, switch over to about that blade and get rid of all of the doc type and all of that. And now I can just say the about page goes here. Okay, so now if I refresh, we get the same thing basically, but we're not repeating ourselves over and over. So this means if we decide yeah, I don't want to use this style sheet, I don't have to go to multiple views to remove it, I only need to browse to my main layout file, get rid of it. And now if I refresh, it'll be reflected in every location, as you can see right there.of it. And now if I refresh, it'll be reflected in every location, as you can see right there. Okay, so mostly that's the essentials of layout files. Just remember, you create a layout file, you yield content wherever it's necessary, and then your views can define individual sections, which will then be inserted at that location. So a common thing people do is you might have a yield footer section, and you might have a yield header section. So now imagine if, for whatever reason, your about page has a custom bit of CSS you want to include. Okay, well now you have a place to do that. Custom Header/Footer Sections 3:56to include. Okay, well now you have a place to do that. Section header, and now you add your link right here. And the same is true for your footer. So maybe, yeah, you want to pull in a special script, or you just want to run some JavaScript. Well now you can do that. You could say alert about page only. You get the basic idea where I'm going. But if I were to switch back, the home page doesn't load the JavaScript, but the about page did have a section for that, so we see it reflected here.But if I were to switch back, the home page doesn't load the JavaScript, but the about page did have a section for that, so we see it reflected here. And that's all there is to it.
