1
00:00:00,840 --> 00:00:02,720
I'm sure you noticed that in the last
video,

2
00:00:02,720 --> 00:00:06,030
we repeated a bunch of HTML border plate
in both of our templates.

3
00:00:06,030 --> 00:00:08,030
Well, we don't have to.

4
00:00:08,030 --> 00:00:10,900
Flasks templates have what's called
template inheritance.

5
00:00:10,900 --> 00:00:15,120
This means that templates can inherit from
each other and just override parts.

6
00:00:15,120 --> 00:00:17,430
We call these overridable parts, blocks.

7
00:00:17,430 --> 00:00:19,270
We can have as many blocks as we want in a
template.

8
00:00:20,400 --> 00:00:22,160
When we extend t hat template with a new
one,

9
00:00:23,390 --> 00:00:25,760
we can assign new values to the blocks.

10
00:00:25,760 --> 00:00:26,580
That means we don't have to

11
00:00:26,580 --> 00:00:30,100
do as much work if we build our templates
intelligently.

12
00:00:30,100 --> 00:00:31,380
Let's go make our templates smarter.

13
00:00:32,710 --> 00:00:36,010
Ideally when we're done her, you won't be
able to

14
00:00:36,010 --> 00:00:41,200
see any difference between what currently
gets rendered in all of its amazing glory.

15
00:00:41,200 --> 00:00:47,560
And the new and improved rendering in all
of its, soon to be revealed amazing glory.

16
00:00:47,560 --> 00:00:50,210
So the name that I'm gonna use here isn't
required.

17
00:00:50,210 --> 00:00:51,410
You can call it whatever you want,

18
00:00:51,410 --> 00:00:56,480
but I just find myself using the word
layout a lot for my base template.

19
00:00:56,480 --> 00:00:57,820
You could call it base if you wanted.

20
00:00:57,820 --> 00:00:59,960
But I'm gonna call mine layout.

21
00:01:01,950 --> 00:01:05,094
And, I put that in the wrong directory, so
let's drag that into templates.

22
00:01:05,094 --> 00:01:09,860
So, what were gonna do here is I'm gonna
put, if you, if you look at index and

23
00:01:09,860 --> 00:01:13,310
you look at add, they got a whole lot of
stuff here that's the same.

24
00:01:13,310 --> 00:01:14,190
Right?

25
00:01:14,190 --> 00:01:19,190
So, what I'm gonna do is I'm gonna put all
the stuff that's the same into this one.

26
00:01:19,190 --> 00:01:24,060
So let's actually just copy index, and put
it in here.

27
00:01:24,060 --> 00:01:26,120
Okay, so what stays the same?

28
00:01:26,120 --> 00:01:31,230
Well the doc type stays the same, HTML
head stays the same, body stays the same,

29
00:01:31,230 --> 00:01:34,890
but the contents of the title and the
contents of the body change.

30
00:01:34,890 --> 00:01:41,056
So what we're gonna do is we're going to
make these into blocks,

31
00:01:41,056 --> 00:01:46,551
so we're gonna call this one block title
[SOUND] which means

32
00:01:46,551 --> 00:01:50,377
that it is a block and it's named Title.

33
00:01:50,377 --> 00:01:54,549
So this is, this looks a whole lot like
when I print something, but

34
00:01:54,549 --> 00:01:59,740
instead of using the double moustache, we
use moustache percent.

35
00:01:59,740 --> 00:02:04,570
And what that tells Ginga2, our rendering
engine, it tells.

36
00:02:04,570 --> 00:02:08,410
It tells it that, this is like, calling it
a bit of python code,

37
00:02:08,410 --> 00:02:15,310
this is a command area, instead of a print
or evaluate area.

38
00:02:15,310 --> 00:02:18,390
So, we're saying hey, hold on a second,
this part right here,

39
00:02:18,390 --> 00:02:20,150
is, is a block, remember that.

40
00:02:20,150 --> 00:02:23,850
And then we're gonna do the same right
here, so

41
00:02:23,850 --> 00:02:27,750
we'll do block content and endblock.

42
00:02:27,750 --> 00:02:30,450
And so, when we start the block, we have
to end the block.

43
00:02:30,450 --> 00:02:32,330
Because we have to be able to say like,

44
00:02:32,330 --> 00:02:33,980
where the block starts and where the block
ends.

45
00:02:33,980 --> 00:02:35,970
You can have stuff already in the block,
but

46
00:02:35,970 --> 00:02:37,750
we're gonna get to that just a little bit
later.

47
00:02:39,470 --> 00:02:41,360
So, we have these two blocks.

48
00:02:41,360 --> 00:02:43,160
So, how do we use them?

49
00:02:43,160 --> 00:02:49,740
Because just have, it's, lets add a new
thing here we're gonna add in a, lets

50
00:02:51,780 --> 00:02:57,230
add a p and we'll say brought to you by
the fine folks at treehouse.

51
00:02:59,180 --> 00:03:04,030
Okay, now if I come over here and render
this, I'm sorry, refresh this.

52
00:03:04,030 --> 00:03:04,800
I don't get that paragraph.

53
00:03:04,800 --> 00:03:06,250
That paragraph isn't there anymore.

54
00:03:06,250 --> 00:03:07,310
So we're not using this yet.

55
00:03:07,310 --> 00:03:09,040
So how do we use it?

56
00:03:09,040 --> 00:03:11,600
Well, let's do our index one first.

57
00:03:11,600 --> 00:03:16,190
So, what we're gonna do, is we're gonna
add a new line up here at the top.

58
00:03:16,190 --> 00:03:20,990
We're gonna add in this line to another
block, another command.

59
00:03:20,990 --> 00:03:23,820
And the command is extends.

60
00:03:23,820 --> 00:03:30,277
And then we pass in the name of a template
that it's extending.

61
00:03:30,277 --> 00:03:35,516
So, in this case, it's extending
layout.html, okay?

62
00:03:35,516 --> 00:03:42,520
And now, we can get rid of all this stuff,
and we can put in block title.

63
00:03:44,880 --> 00:03:51,550
And then we can do, sorry I've lost my
cursor, there we go, in block.

64
00:03:51,550 --> 00:03:55,610
So now this looks, just like what we did
in layout, right?

65
00:03:55,610 --> 00:03:57,610
We, we define that block title.

66
00:03:57,610 --> 00:04:02,230
Here in index we're overriding that block
title, and

67
00:04:02,230 --> 00:04:03,850
then we can do the same thing here.

68
00:04:03,850 --> 00:04:10,320
We can do block content, and here's our
block content.

69
00:04:11,730 --> 00:04:16,890
And then we can end the block, all right?

70
00:04:16,890 --> 00:04:18,530
And so this spacer between them,

71
00:04:18,530 --> 00:04:22,710
that's fine, you can put as much white
space in there as you want.

72
00:04:22,710 --> 00:04:28,080
Now, this template now contains a whole
lot less HTML than it did before,

73
00:04:28,080 --> 00:04:32,110
and the only thing that's completely brand
new, that you've never seen before,

74
00:04:32,110 --> 00:04:33,610
is that extends up at the top.

75
00:04:35,220 --> 00:04:37,810
So we have that extends, we override the
blocks.

76
00:04:37,810 --> 00:04:40,480
All right so let's see if that still
works.

77
00:04:42,530 --> 00:04:44,530
And hey I've got Hello from Kenneth and

78
00:04:44,530 --> 00:04:47,060
I've got the brought to you by the fine
folks at Treehouse.

79
00:04:47,060 --> 00:04:48,495
Awesome.

80
00:04:48,495 --> 00:04:51,460
Okay, so let's do that to our add
template.

81
00:04:51,460 --> 00:04:55,140
So, hopefully you're all yelling out
telling me what to do.

82
00:04:55,140 --> 00:04:59,990
We should be doing extends layout.html.

83
00:04:59,990 --> 00:05:04,280
And then we should do our block title.

84
00:05:05,700 --> 00:05:07,730
And that should be adding.

85
00:05:09,760 --> 00:05:11,720
And then we should end that block.

86
00:05:13,900 --> 00:05:20,400
And then we should be doing our block
content, and

87
00:05:20,400 --> 00:05:24,500
then we should be ending that block.

88
00:05:24,500 --> 00:05:25,000
Right?

89
00:05:27,310 --> 00:05:30,800
I like to put a little bit of space
between them, but you don't have to.

90
00:05:30,800 --> 00:05:38,240
So let's check and see if that one works,
so we do add/1575.

91
00:05:38,240 --> 00:05:39,100
Boom there it is and

92
00:05:39,100 --> 00:05:41,800
we still have that brought to you by the
fine folks at treehouse.

93
00:05:42,920 --> 00:05:47,750
Okay so what if we didn't want to have to
have a title if we didn't wanna have to

94
00:05:47,750 --> 00:05:50,990
give a title every single time, or if we
wanted it to be a,

95
00:05:50,990 --> 00:05:56,820
a default title like every page you go to
says you know Michael blog, but

96
00:05:56,820 --> 00:06:03,260
it also has the post title of the blog
post that you're currently on.

97
00:06:03,260 --> 00:06:05,740
Or, you know, it says Amazon, but it also
has the product name.

98
00:06:06,790 --> 00:06:11,510
So, there's a pretty handy way to use
whatever is already in a block,

99
00:06:11,510 --> 00:06:13,830
with this function that's called super.

100
00:06:13,830 --> 00:06:15,130
So let's try that out.

101
00:06:15,130 --> 00:06:18,440
I'm gonna go over here to layout.

102
00:06:18,440 --> 00:06:20,970
And I'm gonna change this block title,

103
00:06:20,970 --> 00:06:24,990
cuz I'm actually going to type in Flask
Basics into here.

104
00:06:26,230 --> 00:06:29,270
So, now, I wanna change that on the index
page.

105
00:06:30,820 --> 00:06:34,430
I want to say howdy cuz I like howdy.

106
00:06:34,430 --> 00:06:38,640
But, I want there to be, like, a pipe, and
then I want it to say, Flask Basics.

107
00:06:38,640 --> 00:06:43,640
And the way I do that is by printing the
super function.

108
00:06:45,480 --> 00:06:50,150
So, let's go back over here, and go back
to our howdy.

109
00:06:54,080 --> 00:06:54,750
Show the tab bar.

110
00:06:54,750 --> 00:06:55,640
There we go.

111
00:06:55,640 --> 00:06:57,290
So howdy, flask basics.

112
00:06:57,290 --> 00:06:58,060
There's our title.

113
00:06:59,330 --> 00:07:01,340
So that's pretty cool.

114
00:07:01,340 --> 00:07:01,910
That's pretty great.

115
00:07:02,940 --> 00:07:05,680
So let's do that onto our adding page now,

116
00:07:05,680 --> 00:07:08,030
because we should have some consistency,
right?

117
00:07:09,030 --> 00:07:10,680
So we'll do adding.

118
00:07:12,180 --> 00:07:17,004
And then we print out super and we save
that.

119
00:07:17,004 --> 00:07:25,279
And we refresh on our add page 52 and 72,
124.

120
00:07:25,279 --> 00:07:26,213
Cool.

121
00:07:26,213 --> 00:07:30,075
So, great both of our pages now, have the
same setup for titles, and

122
00:07:30,075 --> 00:07:34,536
if we didn't override the title block,
then flash spaces would still show, so

123
00:07:34,536 --> 00:07:38,200
I want you to go ahead and try that on
your own index view.

124
00:07:38,200 --> 00:07:40,820
Using template inheritance and the super
function, will let you

125
00:07:40,820 --> 00:07:44,690
make very customizable and flexible
templates for your flask projects.

126
00:07:44,690 --> 00:07:45,400
In our next video,

127
00:07:45,400 --> 00:07:48,480
we'll look at how to use static media,
like style sheets, in our templates.