Welcome back, everyone, to this lecture on templates inheritance.
Typically, you don't want to have every single template hold repetitive information, such as the navigation
bar at the top of your website.
Instead, we can inherit these components through the use of the Jenga block tag.
For example, you can have a base that HTML file at a project based level underneath a template folder
there you're going to have each HTML template code that shows up across most of the web pages on your
site.
For example, the navigation bar and some sort of footer at the bottom, things like contact us or a
site map.
Then inside the space that each HTML file, you're going to add in two key tags.
One is block content and then the other is end block.
Keep in mind, technically, you can change the word content to anything you want, and you can have
multiple blocks within this based HTML.
For simplicity, we're just going to go by the default convention here.
We're just showing a single block and then we have content as the default name of this block.
And so what this block does is it starts off a section that can be replaced or inserted into from another
template.
So let's imagine we have another HTML template folder or file then inside this other HTML file.
We're going to say we are extending from the base that each HTML.
And then we set up the same block calls inside this other HTML.
And so what this does, it allows us to insert actual code that would go inside of that block.
And so now what happens when this is actually rendered?
We get the base each HTML content that was outside the block and the other HTML content that was inside
the block.
The way Django differentiates between these two is whichever has extends that way.
It can understand which each HTML file is inheriting from the parents file.
So take a little bit of time here to see the general block structure for your base each HTML file.
It's everything outside the block.
And then on the other files that are extending or inheriting from based on each HTML, that's where
you can put stuff inside the blocks.
And again, you could have multiple blocks and you can even have multiple based on each HTML files.
What's pretty common is to have a base that each HTML file on a project level and then base each HTML
files on an application level, each of which actually extend or inherit from the project base that
each HTML.
It really depends on the size and scope of your project web site, which is most appropriate.
So let's explore how to actually make this happen first by editing the settings in order to register
a template and a project directory and then exploring template inheritance.
OK, here I am inside a visual studio code.
Some of the keep in mind is you can have multiple based HTML files and you can inherit from multiple
different files or have files extending and inheriting from one based on each HTML and then have that
file then extend into her into another.
So you can essentially daisy chain or link these inheritances as many times as you want, but to keep
things simple and to show you kind of a base application.
Well, we're going to do is at this top level in the same folder, my app, my site and managed that
pages in, I'm going to create a new folder.
And I will call it templates.
Notice how templates here is outside of my site and outside of my app.
That means these templates are really going to affect at a project level.
So I'm thinking regardless of how many applications I have, these are templates that will give a uniform
look to the site.
That's why there are a project level inside here.
I'll create a new file.
And by convention, we typically call these based on HTML, but clearly you can call this whatever you
want.
And then we're going to do is type in a little bit of code here and a copy a head here.
Into this HTML.
So just typical head and then let's get a body.
So we're going to say body and then let's close off the body as well, and then don't forget to also
close off that each time I'll take.
OK, so save those changes now, what I'm going to do is have two headers here and then also have closing
off each one.
And then I'm going to write this is above the block and base that each HTML.
And then I'm going to copy this.
And paste it, and I'm going to say then this is below the block.
And if you just saw what I did in the slides, I should kind of be clear what I'm doing here.
So I have the heading.
I have a statement above the block.
A statement below the block.
Now let's actually define the block with the tax.
The way this works is we say block and note because of my extension here.
It actually does this automatically for me.
But again, it's just a tag.
So curly braces percent sine you say block.
And then you have to give a name to the block so we can say content.
And sometimes if you want, you can also match up that name here on and block, this sometimes makes
it easier to read, especially when you're inheriting different blocks.
But technically that's optional for the end block.
What is not optional is the starting block.
You do have to define the name of this particular block.
So maybe content isn't actually that great and you want to call it based just to understand where it's
coming from.
That's totally OK here as well.
We call it content.
The reason we do that is because that's always a typical example.
But also you can think of this block as saying, Well, this is where I actually want my site's content
to be.
Everything about this could be something like a navigation bar, and everything below could be like
the footer of my website, like the site map, contact us, that sort of thing.
So we have this block and notice everything inside that block is blank.
Then we're going to do is we're going to go to my app and then open up the templates inside my app.
And let's go to the example that each HTML.
Now I'm going to have example that each HTML inherits from based on each HTML.
So how is this going to work?
Well, this is pretty much all repetitive information like the header and the body and the HTML.
Remember, all of this stuff is already defined outside of the block inside based on each HTML.
So this is going to allow me to really clean up example HTML so I can just delete all this.
And then simply say extends and then I need to say it extends from base start each HTML.
So nurses saying I'm extending from base to each HTML, which is defined up here.
And then what I'm going to do is call out my block.
So I have block and then I do need to refer to which block I'm talking about.
And this is the content block.
And so what's going to happen is everything above the block is going to eventually be inherited and
put above that block and then everything below it is going to end up being below this end block.
So let's right in some content, I'm going to put an ad in one tack here, and I'm going to say this
is inside the block.
An example that.
Each, Timo.
OK, so let's save that change.
Notice how much cleaner our template files are going to end up being once we figure out inheritance.
And keep in mind, this can't continue to extend from other applications.
Sometimes you may want a basic HTML inside my app.
You can also extend from specific applications the way that works, as you would say, something like
my app based HTML.
And then that would end up referring to, by the way, I'm referring to the base HTML inside my app
templates folder.
So it's kind of up to you how you want to structure this restructuring this in a simple way.
And the last thing to do is make sure that our templates folder is registered in our settings, not
pie, not the ones inside the directory, those are done automatically, but the one here at a project
level.
We've actually done this before you simply go to settings that pie.
And remember, if you scroll down here, there is a templates that's asking for directories in case
you want to add any as far as folders or where to look for templates.
It also says App Directory is equally true.
That means it's automatically going to look for template folders inside of applications.
But let's make sure to add the one at the project level go up to the top mix of Imports OS.
And they're going to come back down here.
And also, make sure your app is installed, but that should have been already done if you've been following
along.
And we're going to come back down here and then I'm simply going to say, OK, that path to join and
I'm going to join up the base directory.
With the string templates, and that just registers, by the way, inside the space directory, which
is my site, look for the folder called templates, and that's somewhere where Django can search.
OK.
So we have our basic HTML with the find the block, something above the block, something below the
block, and then we are extending from it or inheriting it.
And then we have stuff inside the block.
So let's see if this all works going to come to my app and we get something that looks like this so
I can see the information.
This is above the block and basic HTML.
This is inside the block, in example each HTML.
And then this is below the block and based each HTML.
And I'm right now at my domain forward slash my app.
OK, so that is template inheritance.
Again, you can daisy chain and link up multiple inheritance or extensions.
It's really up to you how you want to organize your project.
The one thing to keep in mind is make sure everything's well-defined in settings so that Django is actually
looking for the correct location of the templates.
And remember, there is a template post-mortem in case you ever get lost or get confused of where you're
actually referring to things.
But that is template inheritance, in a nutshell, super useful for cleaning up your template files
and just setting everything up for your website in a single file.
OK.
Thanks.
And I'll see you at the next lecture.