Extends Base File

Quick reference

• 00:04 Okay, so we've created our web page.
• 00:06 In this video I want to talk about the base.html file and
• 00:10 extending the base.html file.
• 00:12 So think about every website you've ever been to.
• 00:15 They all have sort of headers and footers and they're often all the same.
• 00:20 So, for instance, if we go to goskills.com, you see at the top,
• 00:24 there's this sort of navbar.
• 00:26 And then down at the bottom, there's all this footer stuff.
• 00:31 Chances are every page of this website is going to have those things,
• 00:34 they're going to have this navbar at the top.
• 00:37 And they're going to have the same footer stuff at the bottom.
• 00:40 So it's really not uncommon for you to have a web page with hundreds of pages.
• 00:45 So think about it, if you've got a navbar at the top of hundreds of pages and
• 00:49 you want to change something on that navbar.
• 00:52 You would have to edit at every one of those hundreds of pages or
• 00:56 thousands of pages or tens of thousands of pages if it's a huge website.
• 01:00 And that would just take forever.
• 01:02 So what we really want to do is kind of break those things that are the same for
• 01:07 every web page apart into different files.
• 01:09 So we might just have one file that has the headers and the footers.
• 01:13 So then if we want to make a change, we can just make a change on that one file,
• 01:17 and it'll be reflected on all the pages of our website.
• 01:20 So that's what the base.html file does.
• 01:23 So let's go ahead and create one of those.
• 01:26 So, head over to our templates directory and right click and create New File.
• 01:30 And let's go to File, Save As, and let's save this as base.html.
• 01:36 Now inside of here,
• 01:37 we want to create these two tags, and we haven't seen these before.
• 01:40 We'll talk more about them later on but
• 01:42 these are Django tags that allow us to do sort of Python type things on a web page.
• 01:48 So what we want to do is type in block content.
• 01:52 And then below here, we want the same opening closing squiggly tags
• 01:58 with these two percentage signs, and we just type in endblock.
• 02:03 And let's go ahead and save this.
• 02:04 Now, what this is going to do is this is going to pull in content
• 02:09 from our individual pages, for instance, our homepage.
• 02:13 So our homepage only has this stuff.
• 02:16 So in effect, what's going on is based on HTML from now on is
• 02:20 going to get called anytime we go to a web page on our app.
• 02:24 And when it does, it's going to pull in whatever page we want.
• 02:28 And it's going to output the content between these two tags, for instance,
• 02:33 this, right?
• 02:34 But it does it behind the scenes.
• 02:36 So above here, we can type in our HEADER STUFF, And then
• 02:42 I'm going to put a couple of line breaks, this is just basic HTML line breaks.
• 02:47 And then below here, we can type in FOOTER STUFF whatever, right?
• 02:52 And I'm going to put a couple more line breaks.
• 02:55 Okay, so we're partway there.
• 02:58 Let's go ahead and save this file.
• 02:59 Now head back over to our home.html.
• 03:02 Now we need to extend our base into this file.
• 03:07 And to do that, we use those same squiggly brackets with the same percentage signs.
• 03:12 And we just type in extends, and in quotation marks base.html.
• 03:18 And that's because we call this file base.html.
• 03:22 So after we've extended the base, we need to let our sort of
• 03:26 base.html file know what content we want to pull out of this page.
• 03:30 And it's just for now just the stuff right here.
• 03:33 So we need to wrap these in tags, just like we did earlier with the base page.
• 03:39 In fact, we can just copy and paste.
• 03:41 Go back over to our base.html,
• 03:45 copy this one and paste it and
• 03:49 then copy this one and paste it below.
• 03:55 So what we're doing here is wrapping our content in this block, right?
• 03:58 We're saying grab this block of code, right?
• 04:02 And put it in our base.html file inside of this tag right here.
• 04:08 So if we save this file, head back over to our website and click reload.
• 04:13 Boom, we see this HEADER STUFF and this FOOTER STUFF automatically gets pulled in.
• 04:18 That's very cool.
• 04:19 So let's very quickly create a second web page.
• 04:22 So let's head over to our views.py file and I'm just going to copy all of this.
• 04:27 And just paste it in below.
• 04:31 And let's change home to about and then we want it to be about.html.
• 04:36 So let's save this.
• 04:37 And let's come over to our templates directory, right click create a New File,
• 04:42 go File, Save As, let's call this about.html.
• 04:46 And I'm just going to copy our entire home.html file,
• 04:51 copy, and I'm going to paste it in.
• 04:54 But instead of this is my homepage I'm going to say this is my about page!!!
• 05:01 My name is John Elder!
• 05:04 Go ahead and save this.
• 05:06 And then really quickly, let's go to our urls.py file and
• 05:09 let's just copy this whole path and create another one.
• 05:13 And we want the URL to be about.html.
• 05:17 I want it to point to views.about and we want to call this about.
• 05:22 Let's go ahead and save this head back over to our app.
• 05:25 And let's go to our about.html page.
• 05:29 And we say, This is my about page, My name is John Elder!!!
• 05:33 And you see we still have the same HEADER and
• 05:35 FOOTER STUFF on both of these pages as we toggle back and forth between them.
• 05:39 So that's very cool.
• 05:40 So from now on, if we want to change the HEADER STUFF,
• 05:44 we would just go to our base.html file.
• 05:46 And let's say we want to change it to NEW HEADER STUFF,
• 05:50 make the change one time right there, save the file.
• 05:53 Now if we come back and hit Reload, and hit Reload again,
• 05:58 every time every page of our website gets updated with the NEW HEADER STUFF.
• 06:04 So very, very cool and pretty simple.
• 06:09 So that's all for this video,
• 06:11 in the next video I want to spend a few minutes talking about links.
• 06:14 And that will be in the next video.

Lesson notes are only available for subscribers.