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.