Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Flask 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.
New Terms
{% block %}: This template tag (as they're called) defines a block in a template. In templates that are extended, these areas are overridable. In templates that extend other templates, this areas will override the parent template's block.
{% extends %}: This template tag specifies what template is the parent of the current template. Think of it like extended classes in Python. You can have a change of extensions if you need them.
{{ super() }}: This function brings in whatever content was in the same block in the parent template. Very handy if you want to include the existing content but you want to insert new content before or after the old.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up