Original subtitles

In this lecture, I want to just very quickly

show you a feature that we actually have

in all programming languages. | www.downloadly.ir

We're just to include one file and in this case,

one template into another template.

So let's say that we wanted to keep

our base layout here really clean

without any content in it.

And so what we're gonna do is put all the code

for the header into one header file.

And then include that file right here.

And the same also for the footer.

And so then, our content block,

so basically our body here

becomes this very clean element only with these includes

and then this content here for now.

Okay.

So again, let's create a new file here for the header.

dot pug

And actually I like to prefix these files that only serve

for being included with an underscore.

And if you're familiar with something like Sass,

then that will be familiar to you as well.

Okay, so let's now go add and paste this here,

and not this code,

so I guess I forgot to copy it or to cut even.

And then paste it here.

And now this indentation is all wrong here,

because now we have like three levels,

as you can see, so, one, two, three levels

where this code should actually be here.

Okay, and so now we need to go add and fix that

but what we can actually do instead of doing it manually

is to use a nice extension that does this work for us.

So here in my extension tab,

let me show you the extension that I mean.

And that is called Pug beautify.

Okay, so go ahead and install this package, all right.

And once you have that done,

you can simply select all the code here

by hitting command-A and then create a VS Code command

by saying command-shift-P.

And then in here, you write pug.

And so this will then beautify pug.

And you see that you also have the shortcut here

and I'm not sure if this is the default one

but at least in my case I can use the shortcut also

to beautify this code.

But anyway, by writing pug,

you should get this selection here now.

And if you then hit enter, it will, as you see,

fix the indentation that was wrong in this file.

All right?

So give it a save, close it up

and let's go back here actually.

And now all we need to do is to say include _header.

And the same for the footer,

so let's cut it here, create a new template...

_footer

paste it

select it, command-shift-P

or probably in Windows that's control-shift-P

and then actually the last one that was used

will appear here at selection.

So, hit return and there you go.

That's fixed now as well.

Include...

footer.

And notice how we don't even need to specify

the dot pug extension again.

So give it a save and when we now reload this

it should look the exact same.

Well, not really, because these buttons here,

they kind of shifted down,

so they left this navigation bar.

Or actually, this header, so that's not correct,

maybe that was some problem

with this auto indenting here in the header.

And yeah, actually that's not correct

because all of this should be inside the header.

So this nav, this div and this nav

they should all be on the same level.

And so now that's correct.

Just to make sure, let's also check the footer.

But here, it actually is correct,

so I'm not sure what actually went wrong in this situation.

But anyway, let's try that again now.

And so here we go.

Anyway that is simply including some files,

one into the other.

In the next video, we will then do something a bit similar,

but at the same times way more complex and also more useful.

So if you're curious about what that is

then just join me right in the next one. | www.downloadly.ir