Introducing Layout Files 0:00Now, there's one big problem with our views. Notice that we create the full HTML structure for each one. Which means if we later create a new file that we need to import, you would have to copy this and switch over to every single view to include it. Clearly, that's not something you want. Instead, we should reach for layout files so that we can declare this sort of HTML once. In this lesson, I'll show you two ways to allow for that. The first option is in your views directory, simply create a file called layout, or any name you prefer, but layout is common. Next, we're going to take only the wrapping portion of our HTML and paste it in, which Creating Yield Sections 0:37name you prefer, but layout is common. Next, we're going to take only the wrapping portion of our HTML and paste it in, which means all of this, well, that's specific to that single view. So I will cut that out, leaving us with only the wrapping. And now, you've learned a little about blade directives in the last episode. Here's a new one called yield, and we're going to give it some kind of key. This is our way of saying, alright, any of the content from the views, I want to be yielded right here. Or effectively, slot that content right here between the body tags. Okay, so now for each view, I no longer have to recreate this every single time.Or effectively, slot that content right here between the body tags. Okay, so now for each view, I no longer have to recreate this every single time. Instead, I can declare my layout file by saying extends, well, we, this view is extending a layout. And then for the section called content, which is yielded right here, let's add that section called content, and again, we have to close that out, which you often do, though you don't have to do it with extends, so you don't need anything like that at the end. But anyways, now I can paste that in, and if I switch back to Firefox, we're going to get the exact same thing. But now, we're leveraging layout files.get the exact same thing. But now, we're leveraging layout files. So if I need to add some new CSS or JavaScript file, this doesn't exist, but if it did, I could add it here exactly one time. Give it a refresh, and we will see that referenced here. Perfect. But we can get rid of that. Okay, so your recap, you create a layout file, you yield your content, but again, this could be called anything you want, and then in your view, create a section that matches what you're yielding. Yielding Multiple Sections 2:17be called anything you want, and then in your view, create a section that matches what you're yielding. So if we yield content in my post view, we create a section for that content, which means this will be yielded or inserted or slotted in right there. That's basically what happens. Now sometimes, you'll want to yield multiple sections. You can imagine a situation like this, where you have some kind of banner at the top of the page. Well, you could say, we'll yield the banner right here. And now in your view, you could declare a section that will be inserted here, and thenWell, you could say, we'll yield the banner right here. And now in your view, you could declare a section that will be inserted here, and then another section called banner that will be inserted there, like this. Section banner, and let's just do an h1, my blog. All right, come back to Firefox, give it a refresh, and notice we have control over that. Really really powerful stuff here, but yeah, let's keep it simple for now. Let's next update our post view. Once again, all I need here is this, so I can get rid of the rest. I will extend my layout file, and then create a section for the content. And I'll paste that in. Layout via Blade Components 3:29I will extend my layout file, and then create a section for the content. And I'll paste that in. All right, come back to Firefox, refresh, and that works as well. So unless you have a good reason why you're not doing it, you should just about always be working with layout files. OK, so that's option number one. A different way to create layout files is to use what's known as blade components. A blade component, at the simplest level, allows you to wrap a piece of HTML. Now they're actually really really powerful, but right now, that's a good enough definition. You create components by first adding a components directory to your view.Now they're actually really really powerful, but right now, that's a good enough definition. You create components by first adding a components directory to your view. Any file you add to this directory will instantly be available as a blade component. So for example, I'm just going to move layout.blade into the components directory. If we open that up, the only change is we're no longer dealing with sections and yield, we're dealing with a blade component. This is a different approach, and it's not better, it's not worse. It's just a different way to handle this. So I will remove this, and let's replace it with echoing out a content variable. So what you see here is a basic blade component.So I will remove this, and let's replace it with echoing out a content variable. So what you see here is a basic blade component. And as long as you throw that in the components directory, you're all set to go. So let's update this now. So we can remove all of this now. And instead, you reference a blade component by creating what looks like an HTML tag. We called ours layout, but the only difference is when you reference a blade component, always preceded with x-. Now you'll remember in the layout file, it expects a variable called content, and there's a couple ways to pass that through.Now you'll remember in the layout file, it expects a variable called content, and there's a couple ways to pass that through. One, you could do it as a simple attribute. So if I switch back to Firefox, sure enough, we see hello there. Another way is to declare it as what we call a slot. x slot name, and it was called content. Hello again. Come back to Firefox, refresh, and you get hello again. So this has all the flexibility as the previous approach, but sometimes, well, you just want a default slot.So this has all the flexibility as the previous approach, but sometimes, well, you just want a default slot. You just want to say, well, if I do something like this, I want it inserted right here like we had before. And you can do that with the blade component by using this special variable name called slot. Think of slot as the default slot for your component. So if I come back to Firefox and refresh, now it works just the same. And that's a nice approach. So let's bring back that HTML, and this is the second approach. Choosing Between Approaches 6:10And that's a nice approach. So let's bring back that HTML, and this is the second approach. Refresh and we get the same thing. So now if you're thinking to yourself, well, great, but which one am I supposed to use? The answer is either. There genuinely is no better or worse option here. Here's how I often think about it. When you create your layouts as blade components, you're thinking from the top down. So notice with my view here, we start at the top, we're going to have a layout, and then I'm going to work my way down to the contents of the view.So notice with my view here, we start at the top, we're going to have a layout, and then I'm going to work my way down to the contents of the view. Now on the other hand, if I bring this back to what we had before, with the extends and section directives, this is from the bottom up. We start with a view, and then we say, this is what it would have been before. We say, okay, well, we're extending that layout file, and here's the content that should be inserted into that layout file. So notice it's slightly different. It's sort of like from the bottom up with this approach, whereas again, with blade components, you start from the top and you work your way down. Extra Credit: More Components 7:09It's sort of like from the bottom up with this approach, whereas again, with blade components, you start from the top and you work your way down. And it shouldn't sway your approach at all, but generally for layout files, I will often reach for this particular approach. It fits my head a little better. Now the final thing I'll leave you with, if you want some extra credit, is you can create components for anything. And it could be as simple as a form or a link or a basic button. And all you have to do, create a file in that components directory, add your text, echo out your slot.And all you have to do, create a file in that components directory, add your text, echo out your slot. You could even accept attributes, and you're up and running. So we'll touch on that in the future, but for now, if you want some extra credit, start researching blade components and when you might reach for them. For now, a simple layout component is exactly what we want.
