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.