Django: Getting Started Transcripts
Chapter: HTML Templates
Lecture: Creating the shared layout page

Login or purchase this course to watch this video and the rest of the course contents.
0:00 the about page is going to inherit from a common base file To avoid that whole
0:05 repeating yourself thing. I'm going to call it based on HTML and it goes in the templates directory. Let me create it. The file starts with a load tag.
0:22 This is loading the static library. I want every page to have online header that has the logo in it.
0:29 The static tag from the static library allows me to reference that logo without specifying exactly
0:35 where it is. You'll see all of that in a second here. I'm just doing the import inside of the title tag.
0:50 I've declared a block. This allows any child of this file to replace the title tags, contents in the page. If the child doesn't override this block,
0:59 it will get rendered as you see here says alexandria Django demo app, Bootstrap has its own CSS file needs all that text.
1:14 There was just to grab the bootstrap CSS file from an available C d N. Speaking of CSS, I need a little bit of my own styling for the site
1:26 I'm going to put that in a file called Sight Touch CSS under a new folder in the static area. The static tag here returns the ural that belongs to
1:37 this file. You'll recall that in settings, the static you RL value is slash static. This tag will create the full URL for the CSS file by joining that
1:48 value and the argument here, this might seem overly complicated but it allows you to
1:54 change where all the static files live without having to edit your HTML.
1:58 This can be particularly useful if you want to deploy your static files on a cd N and the URL needs to point to some other server entirely.
2:12 I've put a couple of empty blocks here to make it possible to inject some extra
2:16 code in the head for links or javascript inside of child files that inherit from this file. Okay, now to the pages actual content,
2:37 the Nav tag is your first bootstrap tag. This has a bunch of classes assigned that specify the styling for starters.
2:44 This is a simple nav. It will only have the logo in the top left and it makes that logo clickable.
2:51 Taking you to the homepage which I haven't written yet, notice that the logo image is also using the static tag once again.
2:59 So that if this ends up getting served off a Cdn the URL isn't hard coded pages that inherit this page are going to want some content typically in the
3:17 center that goes inside of a container block. Bootstrap to find some styling that keeps your content in the middle of the page interacts
3:26 with the nav properly and knows what to do with a footer. The key part is the content block which is inside of the container block.
3:35 That's where all the inheritors will write their content. So when I go to build the actual about page and want to say about this
3:43 site, I'm going to be doing that in a block named content that will be
3:48 inserted inside of the main bootstrap tags and all the styling will get taken care of
3:57 and that's a little chunk of footer for the bottom of the page and here near the bottom, I've included J query some bootstrap widgets required J.
4:16 Query to work none so far. But when the knob gets fancier I will need it.
4:21 So I'm putting this here now along with this is bootstraps own javascript file as well
4:27 And in case the child page wants to add some javascript in the appropriate place I've added a block here. That's a lot of stuff. Huh?
4:41 The beauty is normally you'd have to do that on every HTML page, but with inheritance, you only have to do it once.
4:48 Let's create the about page and inherit from this base.


Talk Python's Mastodon Michael Kennedy's Mastodon