Preview
Video Player
00:00
00:00
Template Inheritance
7:48Flask templates don't have to be just simple HTML documents. Thanks to Jinja2 and the power of template inheritance, you can make smarter, lighter template files that still pack a big punch.
I'm sure you noticed that in the last
video,
0:00
we repeated a bunch of HTML border plate
in both of our templates.
0:02
Well, we don't have to.
0:06
Flasks templates have what's called
template inheritance.
0:08
This means that templates can inherit from
each other and just override parts.
0:10
We call these overridable parts, blocks.
0:15
We can have as many blocks as we want in a
template.
0:17
When we extend t hat template with a new
one,
0:20
we can assign new values to the blocks.
0:23
That means we don't have to
0:25
do as much work if we build our templates
intelligently.
0:26
Let's go make our templates smarter.
0:30
Ideally when we're done her, you won't be
able to
0:32
see any difference between what currently
gets rendered in all of its amazing glory.
0:36
And the new and improved rendering in all
of its, soon to be revealed amazing glory.
0:41
So the name that I'm gonna use here isn't
required.
0:47
You can call it whatever you want,
0:50
but I just find myself using the word
layout a lot for my base template.
0:51
You could call it base if you wanted.
0:56
But I'm gonna call mine layout.
0:57
And, I put that in the wrong directory, so
let's drag that into templates.
1:01
So, what were gonna do here is I'm gonna
put, if you, if you look at index and
1:05
you look at add, they got a whole lot of
stuff here that's the same.
1:09
Right?
1:13
So, what I'm gonna do is I'm gonna put all
the stuff that's the same into this one.
1:14
So let's actually just copy index, and put
it in here.
1:19
Okay, so what stays the same?
1:24
Well the doc type stays the same, HTML
head stays the same, body stays the same,
1:26
but the contents of the title and the
contents of the body change.
1:31
So what we're gonna do is we're going to
make these into blocks,
1:34
so we're gonna call this one block title
[SOUND] which means
1:41
that it is a block and it's named Title.
1:46
So this is, this looks a whole lot like
when I print something, but
1:50
instead of using the double moustache, we
use moustache percent.
1:54
And what that tells Ginga2, our rendering
engine, it tells.
1:59
It tells it that, this is like, calling it
a bit of python code,
2:04
this is a command area, instead of a print
or evaluate area.
2:08
So, we're saying hey, hold on a second,
this part right here,
2:15
is, is a block, remember that.
2:18
And then we're gonna do the same right
here, so
2:20
we'll do block content and endblock.
2:23
And so, when we start the block, we have
to end the block.
2:27
Because we have to be able to say like,
2:30
where the block starts and where the block
ends.
2:32
You can have stuff already in the block,
but
2:33
we're gonna get to that just a little bit
later.
2:35
So, we have these two blocks.
2:39
So, how do we use them?
2:41
Because just have, it's, lets add a new
thing here we're gonna add in a, lets
2:43
add a p and we'll say brought to you by
the fine folks at treehouse.
2:51
Okay, now if I come over here and render
this, I'm sorry, refresh this.
2:59
I don't get that paragraph.
3:04
That paragraph isn't there anymore.
3:04
So we're not using this yet.
3:06
So how do we use it?
3:07
Well, let's do our index one first.
3:09
So, what we're gonna do, is we're gonna
add a new line up here at the top.
3:11
We're gonna add in this line to another
block, another command.
3:16
And the command is extends.
3:20
And then we pass in the name of a template
that it's extending.
3:23
So, in this case, it's extending
layout.html, okay?
3:30
And now, we can get rid of all this stuff,
and we can put in block title.
3:35
And then we can do, sorry I've lost my
cursor, there we go, in block.
3:44
So now this looks, just like what we did
in layout, right?
3:51
We, we define that block title.
3:55
Here in index we're overriding that block
title, and
3:57
then we can do the same thing here.
4:02
We can do block content, and here's our
block content.
4:03
And then we can end the block, all right?
4:11
And so this spacer between them,
4:16
that's fine, you can put as much white
space in there as you want.
4:18
Now, this template now contains a whole
lot less HTML than it did before,
4:22
and the only thing that's completely brand
new, that you've never seen before,
4:28
is that extends up at the top.
4:32
So we have that extends, we override the
blocks.
4:35
All right so let's see if that still
works.
4:37
And hey I've got Hello from Kenneth and
4:42
I've got the brought to you by the fine
folks at Treehouse.
4:44
Awesome.
4:47
Okay, so let's do that to our add
template.
4:48
So, hopefully you're all yelling out
telling me what to do.
4:51
We should be doing extends layout.html.
4:55
And then we should do our block title.
4:59
And that should be adding.
5:05
And then we should end that block.
5:09
And then we should be doing our block
content, and
5:13
then we should be ending that block.
5:20
Right?
5:24
I like to put a little bit of space
between them, but you don't have to.
5:27
So let's check and see if that one works,
so we do add/1575.
5:30
Boom there it is and
5:38
we still have that brought to you by the
fine folks at treehouse.
5:39
Okay so what if we didn't want to have to
have a title if we didn't wanna have to
5:42
give a title every single time, or if we
wanted it to be a,
5:47
a default title like every page you go to
says you know Michael blog, but
5:50
it also has the post title of the blog
post that you're currently on.
5:56
Or, you know, it says Amazon, but it also
has the product name.
6:03
So, there's a pretty handy way to use
whatever is already in a block,
6:06
with this function that's called super.
6:11
So let's try that out.
6:13
I'm gonna go over here to layout.
6:15
And I'm gonna change this block title,
6:18
cuz I'm actually going to type in Flask
Basics into here.
6:20
So, now, I wanna change that on the index
page.
6:26
I want to say howdy cuz I like howdy.
6:30
But, I want there to be, like, a pipe, and
then I want it to say, Flask Basics.
6:34
And the way I do that is by printing the
super function.
6:38
So, let's go back over here, and go back
to our howdy.
6:45
Show the tab bar.
6:54
There we go.
6:54
So howdy, flask basics.
6:55
There's our title.
6:57
So that's pretty cool.
6:59
That's pretty great.
7:01
So let's do that onto our adding page now,
7:02
because we should have some consistency,
right?
7:05
So we'll do adding.
7:09
And then we print out super and we save
that.
7:12
And we refresh on our add page 52 and 72,
124.
7:17
Cool.
7:25
So, great both of our pages now, have the
same setup for titles, and
7:26
if we didn't override the title block,
then flash spaces would still show, so
7:30
I want you to go ahead and try that on
your own index view.
7:34
Using template inheritance and the super
function, will let you
7:38
make very customizable and flexible
templates for your flask projects.
7:40
In our next video,
7:44
we'll look at how to use static media,
like style sheets, in our templates.
7:45