All language subtitles for 002 Template Inheritance and Layouts_en

In this lecture, we will learn about the template, inheritance and layouts, but before we see and

understand the template inheritance typically for us, let's first see the problem it will solve.

So let's also create our blade template for this route, the contact page.

Now the route name is home contact.

Exactly.

This should also be the name of our template.

So let it be the contact blade.

Well, what should we render inside it?

We might want the same HTML5 boilerplate and just inside the body will use the H1 tag and say that that's

their contact page.

Now save the changes and let's render this template using the view function.

The template name is home contact.

If you don't pass any data to it, you don't really need to specify this second argument.

Now let's save the changes refresh and let's go to the contact page so it works properly.

The HDMI is rendered, but this two templates contain a lot of the same identical HD html and usually

you would like the layout of your website shared among a different sites.

So this is where the template inheritance can be used in Blade templating, first, let's create our

layout file with some common HTML.

So let's make our new folder inside resources views.

Call it.

Layouts and create a brand new file, let's call it ablate, BHP and inside it, let's also create this

HDMI boilerplate.

Now, watch me code and I will explain what I am doing in a second.

So this is your Laravel AAB as a title, but will use something special directive.

I will talk about that in a second.

So that's the first place we use the directive.

Now lets other DEVE element to that body and use this yield directive again, this time with an argument

called content.

So let's learn our first blade directive called Yield.

Now, directives, they always start with an at sign followed by the directive name and optionally they

take some arguments.

For example, the Yields Directive takes the name of the section it should render in the layout file.

Now, wait a minute, I haven't talked about the sections yet, but before we talk about sections,

let's jump to the template we previously created and let it extend the main layout file.

So just follow me, remove all this code and add a new blade directive called EXTENTS, so extending

a layout is done using this extended directive, it accepts the layout template as its only argument.

So in our case, this is layout's start up now let's add our age, Wantagh, with the Hello World text.

Go back to the browser, let's refresh.

So it seems it's rendered something, but when you will see the details, this is a little bit messed

up.

So we have HTML tag, then empty headstock.

And inside the body there is not only our H1, but also the metatarsus.

Well, what we actually wanted to do is render something within this body and this def tag.

So we want to render something in a specific place, not randomly.

Well, this is where the section directive comes in, that's the first and last directive we'll learn

about today.

So let's declare our directive section that will have an argument, its name called content.

The U.S. directive actually has a corresponding closing directive called A.S. that denotes the and of

a specific section.

Now, inside those two directives, you can put all the HDMI and content that should be rendered from

this specific template.

So let's do that.

We cannot H1 hello, world.

So let's check how it looks like so now the head section is correct and inside the DPH element, we

have our H1 Hello World.

So the way it works is that Blade will render the main layout file.

And the yield directive will render the content of a specific section that you have defined in your

child templates.

So let's do the same for their contact page, remove all this unnecessary HDMI and let it extend the

main layout and in the contact, let's just specify that that's the contact page.

Let's see if this works, so contact.

Yes, of course it works.

So you can see how much space we've saved, how much less of repetition we are doing by using template

inheritance and common layouts.

Now, we've used the yield twice, actually, in this layout file once for the content section and also

for the title.

So if you have something that's multiline and will output HTML mixed with text, you will use section

and under section directive, but for simpler sections you can just use the section directive, give

its name, for example, the title, and specify the value that should be rendered.

So, for example, that's our homepage.

And in the content, this would be the contact page.

So what this would do is now whenever the main layout is rendered, apart from the Laravel up, you

will get our specific title from each of those pages.

Of course, we have to verify that.

So on the contact page, you can see it's a specific title and also on the main page there is the homepage

specific title.

So this would conclude this lecture about templating Haridas and Layout's.