1 00:00:05,570 --> 00:00:08,990 Welcome back, everyone, to this lecture on templates inheritance. 2 00:00:10,050 --> 00:00:15,450 Typically, you don't want to have every single template hold repetitive information, such as the navigation 3 00:00:15,450 --> 00:00:16,980 bar at the top of your website. 4 00:00:17,460 --> 00:00:22,080 Instead, we can inherit these components through the use of the Jenga block tag. 5 00:00:23,380 --> 00:00:29,890 For example, you can have a base that HTML file at a project based level underneath a template folder 6 00:00:30,190 --> 00:00:36,580 there you're going to have each HTML template code that shows up across most of the web pages on your 7 00:00:36,580 --> 00:00:36,970 site. 8 00:00:37,210 --> 00:00:42,970 For example, the navigation bar and some sort of footer at the bottom, things like contact us or a 9 00:00:43,000 --> 00:00:43,720 site map. 10 00:00:44,170 --> 00:00:49,450 Then inside the space that each HTML file, you're going to add in two key tags. 11 00:00:49,660 --> 00:00:53,590 One is block content and then the other is end block. 12 00:00:53,860 --> 00:00:58,780 Keep in mind, technically, you can change the word content to anything you want, and you can have 13 00:00:58,780 --> 00:01:01,700 multiple blocks within this based HTML. 14 00:01:02,020 --> 00:01:05,280 For simplicity, we're just going to go by the default convention here. 15 00:01:05,290 --> 00:01:10,150 We're just showing a single block and then we have content as the default name of this block. 16 00:01:10,600 --> 00:01:19,120 And so what this block does is it starts off a section that can be replaced or inserted into from another 17 00:01:19,270 --> 00:01:19,780 template. 18 00:01:20,170 --> 00:01:28,480 So let's imagine we have another HTML template folder or file then inside this other HTML file. 19 00:01:28,690 --> 00:01:32,650 We're going to say we are extending from the base that each HTML. 20 00:01:33,130 --> 00:01:37,780 And then we set up the same block calls inside this other HTML. 21 00:01:38,260 --> 00:01:44,740 And so what this does, it allows us to insert actual code that would go inside of that block. 22 00:01:45,670 --> 00:01:48,880 And so now what happens when this is actually rendered? 23 00:01:49,570 --> 00:01:57,820 We get the base each HTML content that was outside the block and the other HTML content that was inside 24 00:01:57,910 --> 00:01:58,510 the block. 25 00:01:58,870 --> 00:02:03,370 The way Django differentiates between these two is whichever has extends that way. 26 00:02:03,370 --> 00:02:08,080 It can understand which each HTML file is inheriting from the parents file. 27 00:02:08,560 --> 00:02:14,140 So take a little bit of time here to see the general block structure for your base each HTML file. 28 00:02:14,170 --> 00:02:16,120 It's everything outside the block. 29 00:02:16,420 --> 00:02:21,940 And then on the other files that are extending or inheriting from based on each HTML, that's where 30 00:02:21,940 --> 00:02:23,920 you can put stuff inside the blocks. 31 00:02:24,160 --> 00:02:28,660 And again, you could have multiple blocks and you can even have multiple based on each HTML files. 32 00:02:28,990 --> 00:02:34,360 What's pretty common is to have a base that each HTML file on a project level and then base each HTML 33 00:02:34,360 --> 00:02:40,630 files on an application level, each of which actually extend or inherit from the project base that 34 00:02:40,630 --> 00:02:41,230 each HTML. 35 00:02:41,590 --> 00:02:45,850 It really depends on the size and scope of your project web site, which is most appropriate. 36 00:02:46,630 --> 00:02:52,120 So let's explore how to actually make this happen first by editing the settings in order to register 37 00:02:52,120 --> 00:02:56,530 a template and a project directory and then exploring template inheritance. 38 00:02:57,460 --> 00:03:00,070 OK, here I am inside a visual studio code. 39 00:03:00,910 --> 00:03:06,280 Some of the keep in mind is you can have multiple based HTML files and you can inherit from multiple 40 00:03:06,280 --> 00:03:12,370 different files or have files extending and inheriting from one based on each HTML and then have that 41 00:03:12,370 --> 00:03:14,380 file then extend into her into another. 42 00:03:14,680 --> 00:03:20,980 So you can essentially daisy chain or link these inheritances as many times as you want, but to keep 43 00:03:20,980 --> 00:03:23,770 things simple and to show you kind of a base application. 44 00:03:24,130 --> 00:03:29,640 Well, we're going to do is at this top level in the same folder, my app, my site and managed that 45 00:03:29,650 --> 00:03:32,590 pages in, I'm going to create a new folder. 46 00:03:33,780 --> 00:03:35,190 And I will call it templates. 47 00:03:35,370 --> 00:03:40,170 Notice how templates here is outside of my site and outside of my app. 48 00:03:40,500 --> 00:03:44,490 That means these templates are really going to affect at a project level. 49 00:03:44,760 --> 00:03:50,070 So I'm thinking regardless of how many applications I have, these are templates that will give a uniform 50 00:03:50,070 --> 00:03:50,850 look to the site. 51 00:03:51,060 --> 00:03:54,190 That's why there are a project level inside here. 52 00:03:54,210 --> 00:03:55,530 I'll create a new file. 53 00:03:56,800 --> 00:04:01,480 And by convention, we typically call these based on HTML, but clearly you can call this whatever you 54 00:04:01,480 --> 00:04:01,870 want. 55 00:04:02,350 --> 00:04:08,980 And then we're going to do is type in a little bit of code here and a copy a head here. 56 00:04:09,950 --> 00:04:11,150 Into this HTML. 57 00:04:11,540 --> 00:04:14,360 So just typical head and then let's get a body. 58 00:04:15,490 --> 00:04:20,290 So we're going to say body and then let's close off the body as well, and then don't forget to also 59 00:04:20,290 --> 00:04:21,880 close off that each time I'll take. 60 00:04:23,050 --> 00:04:32,260 OK, so save those changes now, what I'm going to do is have two headers here and then also have closing 61 00:04:32,260 --> 00:04:33,100 off each one. 62 00:04:34,060 --> 00:04:41,440 And then I'm going to write this is above the block and base that each HTML. 63 00:04:42,280 --> 00:04:44,020 And then I'm going to copy this. 64 00:04:45,280 --> 00:04:49,690 And paste it, and I'm going to say then this is below the block. 65 00:04:49,810 --> 00:04:54,430 And if you just saw what I did in the slides, I should kind of be clear what I'm doing here. 66 00:04:54,940 --> 00:04:56,200 So I have the heading. 67 00:04:56,530 --> 00:04:58,240 I have a statement above the block. 68 00:04:58,270 --> 00:04:59,440 A statement below the block. 69 00:04:59,530 --> 00:05:02,420 Now let's actually define the block with the tax. 70 00:05:02,440 --> 00:05:08,410 The way this works is we say block and note because of my extension here. 71 00:05:08,680 --> 00:05:10,510 It actually does this automatically for me. 72 00:05:10,870 --> 00:05:12,430 But again, it's just a tag. 73 00:05:12,440 --> 00:05:15,740 So curly braces percent sine you say block. 74 00:05:15,760 --> 00:05:19,930 And then you have to give a name to the block so we can say content. 75 00:05:20,940 --> 00:05:26,580 And sometimes if you want, you can also match up that name here on and block, this sometimes makes 76 00:05:26,580 --> 00:05:29,550 it easier to read, especially when you're inheriting different blocks. 77 00:05:29,850 --> 00:05:32,340 But technically that's optional for the end block. 78 00:05:32,640 --> 00:05:34,630 What is not optional is the starting block. 79 00:05:34,650 --> 00:05:37,380 You do have to define the name of this particular block. 80 00:05:37,680 --> 00:05:42,450 So maybe content isn't actually that great and you want to call it based just to understand where it's 81 00:05:42,450 --> 00:05:42,960 coming from. 82 00:05:42,970 --> 00:05:44,760 That's totally OK here as well. 83 00:05:45,300 --> 00:05:46,440 We call it content. 84 00:05:46,530 --> 00:05:49,530 The reason we do that is because that's always a typical example. 85 00:05:49,540 --> 00:05:54,180 But also you can think of this block as saying, Well, this is where I actually want my site's content 86 00:05:54,180 --> 00:05:54,540 to be. 87 00:05:54,840 --> 00:05:59,130 Everything about this could be something like a navigation bar, and everything below could be like 88 00:05:59,130 --> 00:06:03,600 the footer of my website, like the site map, contact us, that sort of thing. 89 00:06:03,990 --> 00:06:07,800 So we have this block and notice everything inside that block is blank. 90 00:06:08,250 --> 00:06:14,400 Then we're going to do is we're going to go to my app and then open up the templates inside my app. 91 00:06:14,520 --> 00:06:17,670 And let's go to the example that each HTML. 92 00:06:18,540 --> 00:06:23,160 Now I'm going to have example that each HTML inherits from based on each HTML. 93 00:06:23,610 --> 00:06:24,600 So how is this going to work? 94 00:06:24,780 --> 00:06:29,580 Well, this is pretty much all repetitive information like the header and the body and the HTML. 95 00:06:29,580 --> 00:06:35,160 Remember, all of this stuff is already defined outside of the block inside based on each HTML. 96 00:06:35,640 --> 00:06:40,290 So this is going to allow me to really clean up example HTML so I can just delete all this. 97 00:06:41,720 --> 00:06:47,810 And then simply say extends and then I need to say it extends from base start each HTML. 98 00:06:48,230 --> 00:06:53,060 So nurses saying I'm extending from base to each HTML, which is defined up here. 99 00:06:53,630 --> 00:06:57,380 And then what I'm going to do is call out my block. 100 00:06:58,440 --> 00:07:02,100 So I have block and then I do need to refer to which block I'm talking about. 101 00:07:02,430 --> 00:07:04,890 And this is the content block. 102 00:07:05,550 --> 00:07:12,420 And so what's going to happen is everything above the block is going to eventually be inherited and 103 00:07:12,420 --> 00:07:18,060 put above that block and then everything below it is going to end up being below this end block. 104 00:07:18,480 --> 00:07:23,430 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 105 00:07:23,430 --> 00:07:24,990 is inside the block. 106 00:07:26,190 --> 00:07:28,470 An example that. 107 00:07:29,440 --> 00:07:30,100 Each, Timo. 108 00:07:34,060 --> 00:07:36,490 OK, so let's save that change. 109 00:07:36,790 --> 00:07:42,040 Notice how much cleaner our template files are going to end up being once we figure out inheritance. 110 00:07:42,430 --> 00:07:46,660 And keep in mind, this can't continue to extend from other applications. 111 00:07:46,930 --> 00:07:51,610 Sometimes you may want a basic HTML inside my app. 112 00:07:51,880 --> 00:07:56,320 You can also extend from specific applications the way that works, as you would say, something like 113 00:07:56,590 --> 00:07:58,900 my app based HTML. 114 00:07:59,200 --> 00:08:04,570 And then that would end up referring to, by the way, I'm referring to the base HTML inside my app 115 00:08:04,570 --> 00:08:05,410 templates folder. 116 00:08:05,440 --> 00:08:09,100 So it's kind of up to you how you want to structure this restructuring this in a simple way. 117 00:08:10,420 --> 00:08:15,190 And the last thing to do is make sure that our templates folder is registered in our settings, not 118 00:08:15,190 --> 00:08:19,600 pie, not the ones inside the directory, those are done automatically, but the one here at a project 119 00:08:19,600 --> 00:08:19,930 level. 120 00:08:20,260 --> 00:08:23,260 We've actually done this before you simply go to settings that pie. 121 00:08:23,980 --> 00:08:29,710 And remember, if you scroll down here, there is a templates that's asking for directories in case 122 00:08:29,710 --> 00:08:33,909 you want to add any as far as folders or where to look for templates. 123 00:08:34,270 --> 00:08:36,090 It also says App Directory is equally true. 124 00:08:36,100 --> 00:08:39,760 That means it's automatically going to look for template folders inside of applications. 125 00:08:40,059 --> 00:08:45,340 But let's make sure to add the one at the project level go up to the top mix of Imports OS. 126 00:08:47,780 --> 00:08:49,190 And they're going to come back down here. 127 00:08:50,120 --> 00:08:54,410 And also, make sure your app is installed, but that should have been already done if you've been following 128 00:08:54,410 --> 00:08:54,770 along. 129 00:08:55,610 --> 00:09:00,320 And we're going to come back down here and then I'm simply going to say, OK, that path to join and 130 00:09:00,320 --> 00:09:02,390 I'm going to join up the base directory. 131 00:09:03,350 --> 00:09:08,840 With the string templates, and that just registers, by the way, inside the space directory, which 132 00:09:08,840 --> 00:09:13,460 is my site, look for the folder called templates, and that's somewhere where Django can search. 133 00:09:13,970 --> 00:09:14,300 OK. 134 00:09:14,750 --> 00:09:19,100 So we have our basic HTML with the find the block, something above the block, something below the 135 00:09:19,100 --> 00:09:21,920 block, and then we are extending from it or inheriting it. 136 00:09:22,130 --> 00:09:23,780 And then we have stuff inside the block. 137 00:09:24,020 --> 00:09:31,100 So let's see if this all works going to come to my app and we get something that looks like this so 138 00:09:31,100 --> 00:09:32,300 I can see the information. 139 00:09:33,200 --> 00:09:35,420 This is above the block and basic HTML. 140 00:09:35,840 --> 00:09:38,360 This is inside the block, in example each HTML. 141 00:09:38,630 --> 00:09:40,970 And then this is below the block and based each HTML. 142 00:09:40,970 --> 00:09:45,140 And I'm right now at my domain forward slash my app. 143 00:09:45,590 --> 00:09:47,780 OK, so that is template inheritance. 144 00:09:48,050 --> 00:09:51,260 Again, you can daisy chain and link up multiple inheritance or extensions. 145 00:09:51,470 --> 00:09:54,020 It's really up to you how you want to organize your project. 146 00:09:54,350 --> 00:09:58,670 The one thing to keep in mind is make sure everything's well-defined in settings so that Django is actually 147 00:09:58,670 --> 00:10:01,570 looking for the correct location of the templates. 148 00:10:01,580 --> 00:10:06,440 And remember, there is a template post-mortem in case you ever get lost or get confused of where you're 149 00:10:06,440 --> 00:10:07,700 actually referring to things. 150 00:10:08,000 --> 00:10:13,310 But that is template inheritance, in a nutshell, super useful for cleaning up your template files 151 00:10:13,520 --> 00:10:16,160 and just setting everything up for your website in a single file. 152 00:10:16,550 --> 00:10:16,850 OK. 153 00:10:17,210 --> 00:10:17,620 Thanks. 154 00:10:17,630 --> 00:10:18,680 And I'll see you at the next lecture.