‫In this lecture, I want to just very quickly
‫show you a feature that we actually have
‫in all programming languages.
‫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.