All language subtitles for 007 Extending Our Base Template with Blocks_Downloadly.ir_en

All right.

In this video, I will show you how to use

one of the most important

and also most complex features of Pug.

And that are extends.

With extends, we will be able to use

the same base layout for every single page

that we want to render.

Right now, we have our base template kind of finished

with a nice header and a nice footer.

So now, let's actually start filling out its content.

Now, of course, we want to load

different content for different pages.

And to start, we want to have a overview page

with all the tours, and then a page

with all the tour details for one specific tour.

So let's now implement some routes

for both of these pages.

And I'm going to do that right here

below the first one that we already created.

So, /overview

And then something very similar to before.

And again, a bit later, actually in the next video

we will then put these routes

into their own separate file.

So, render, and now on this overview page

we will actually want to render

a template called overview.

That doesn't yet exist,

so let's now quickly go ahead and create one.

So, overview.pug

And actually let's also pass in some data.

And we will pass in the title of the page

which in this case, we'll say,

All Tours.

Now let's just grab this code

and copy it for the tour.

So we also want a route for a specific tour again.

And here, we will want to have

a template which is also called tour.

And then the title of that, for now,

let's do it again,

The Forest Hiker Tour.

So for now, this is just a placeholder,

and of course a bit later we will

then actually make this dynamic.

Because at this point, we are still

kind of learning how Pug really works.

Let's now create that tour template as well.

And that's it.

Okay, now with these two new templates here done,

this is what we're going to do.

In each of these templates, and in this case here

the overview, we only want to put

the content for that specific page.

So we want no footer here and no header

and none of the stuff that we have in the base.

So, again, really just the content

for the overview page.

So that's exactly what we're going to put in this file,

and then, we will basically inject this content

into the base template, which we can call

the parent template.

This process is then called extending.

So whenever the overview template is rendered,

we then take the base template

and fill it up with the content of this file,

and so we extend it.

Here is how we implement that.

First off, in the base, we need to put a block.

I will actually do that here.

So let's delete all of this,

and here, put a block.

And that block, I'm going to call it content.

Then inside that block, we can actually also

have some content.

So let's just put a h1 here.

But this content will then later be overwritten.

But anyway, let's put it here

just as a placeholder, basically.

So, This is a placeholder heading.

Okay, so we have our block here,

and now we can go to our overview page

and say that we want to extend our base template.

So, extend base.

Or actually, that's called extends.

So this file extends the base file.

And of course, if this one here

would be called, for example, index.pug,

then here we would say extends index.

Now what exactly is the content

that's going to be extended in the base template?

Well, that's whatever we put in the content block.

So, also here, we create a block called content.

And then in there, we can as always put our content.

So let's just say, This is the tour overview.

Here, we basically redefine the content block

that is in the base.

So again, we have this block here

which is called content, and now by putting

the same content block right here in this page,

which is then extending the base,

we are basically redefining that block.

Each file can only extend one other file.

So we can only extend the base here,

but we can have different blocks in each of the files.

So we could have a block for the head here as well.

And then we could extend that also

in the overview template.

And, actually, we will do that a bit later.

But for now, of course, let's keep it simple.

Okay, does this make sense?

Let's now go ahead and actually do the same thing here.

So this extends the base layout.

And what exactly does it extend?

Well, it will extend the content block.

And so this one we'll put on the h1,

This is the tour detail page.

So, before testing this, let's quickly recap

what we just did.

So, we want to use this base template here

kind of as our starting point.

So, as a skeleton that has all the HTML stuff,

like this head,

and also the header and the footer,

but not the specific content for each page.

Then, in each of these pages here,

we only have the content for that page itself.

And we can do that because we can

basically inject this content here

into the parent base template by using extend.

So basically, think of this as the opposite of including.

Here, this template included two parent templates.

This template here included two child templates,

the header and the footer.

So, again, the base is the parent,

and the header and the footer are the children.

So here, the parent included the children.

But with extends, it's the other way around,

where the children, as we can say,

so we can kind of say that the overview

is a child as well of the base,

but here its the child that kind of includes the base.

So, basically, everything that's around this block content.

You can imagine that all of this code here,

all of this which is not the block content

is then copied right into this file.

That's a nice way of imagining how this works.

That allows us to then use here in our route

the overview and the tour templates instead of using base.

But still, of course, using all of this HTML

that we have in here.

Okay, so I hope that makes sense now.

Let's actually go ahead and try this out.

I'm just going to copy the URL.

So now let's write overview.

And so, indeed, we get the h1 which says

This is the tour overview.

And actually let's also use the title variable

that we passed into these templates.

Remember that here we have the title All Tours

on the overview, and then on the tour,

we have The Forest Hiker.

So let's actually put that on the title.

In fact, we can actually do that

right here in the base template.

So when right here in the overview

we extend the base template,

the base template still has access to the locals,

so, to the variables, that we passed into the template.

Here, we can do what we did before,

so, interpolation with the variable, so with the local.

So, all we need to do is put the title here, like this.

And if we now reload,

then you see All Tours here on top.

Now let's try tour.

And so this is the tour detail page,

and up here you see The Forest Hiker Tour.

Now if we load this one

then we should get that placeholder

that we put in the block.

Remember that?

And, indeed, This is the placeholder heading.

Great.

This is a powerful and very important mechanism

for us to understand and to use

for all of the templates that we're going to build

in the rest of the section.

In the next video, we will then finally

clean up a little bit this mess that we have here,

and refactor all of this code here

into some different files.