Creating the base template - Flask Tutorial

- Working with templates, section 3. In this section we are going to look at the Jinja template inheritance logic and how to use his logic to create what's called a base template. By using his base template we are able to create a child templates that can use this template to create more templates for the application. And we will also be exploring how you can pass data to the view using props and then how we can also access data using the request and response objects. So lets go into the code and creat some of these templates. Create what is called a base template. So here in visual studio code, I have a templates folder here in the enclosed folder, we have two templates here, the photo and the navigation. In the main index file, as you can see we can actually create this into a base template. And out of this base template, then we can change this index into a child template out the base template. So, to do that is basically you can pick and choose some of the common features, or common elements in this template and then we can extract those elements out into a base template. So lets do that by creating a file over here, in the templates folder. And we will call this file, you can call it base, can call layout. I will call mine layout, which is very similar to how visual studio uses its own layout system, but anything is fine. So this is the layout, or the base template here. Now, I'm going to go into the index file and look at this file. And I can see that from the top, from line 1, all the way down to the navigation everything here will be similar on every single page after that, so if you create the log in page, the courses page, the registration page, and so on. They're going to have something very similar on the top. So we're going to copy this out. We're not going to cut it out, and paste it into the layout template here. And the bottom is also just a footer, so lets go back to the index file. And again, these 3 lines will be identical across all sites, so lets cut that out and paste it to the bottom. Okay, so now, what is different is just going to be inside here between the navigation and the footer. So here then, to make this work so that when we run the index file okay, its going to inherit everything inside the layout template plus what's available here, okay. So I want to make sure this is correctly, it's not correctly in line, it looks a little bit weird but I'm missing something, I think. I'm missing a tag, lets see. Cause I have this div here and a missing div down here. So I need to remove this. Too many here, and put that over here because I have too many. Okay so, and I think our navigation does not include a div. Lets see if its right, if not we can fix it later. So that means here is our navigation and then here is the main body of our document and this part, as you can see was placed right in there. So that means this content is unique, for every page. So to do that, then we're going to create a block called content. K, you can call it whatever you want. It is typically called content in here and then inside this content, we also want to put a ending, a closing block called end block. Okay, so now inside here then is where we render the content uniquely for each page. And lets save this and then back in the index file now we want to inherit this layout page. So on the top here, you want to issue the command that says extend the layout, and you put it in the string quotation marks, layout.html astic base template. Okay, once you do that then the Jinja engine will know that this is going to load this base template called layout. And inside the layout, it's going to call, look inside the content so we need to put a content here again. So block content, now that content keyword must match the content keyword in the base template, and then we close it down here. End block. Okay. So now, as you can see, it's going to look inside the base template layout for a block content, or variable, called content, and then it's going to inject all of these inside here to this template area here. Okay so that means its going to inherit everything here, from line 1 all the way down to line 25 plus where its going to be rendered inside line 18 here, which is the index content here. Okay so lets save this file for now, and lets save both of them and go ahead and run this file. Lets go into the command line here and we'll activate my virtual environment, and then go ahead and run. Hopefully there's no error. Okay looks good. Okay, going to go to the browser and refresh this page. Okay so we got some error. Endblock, I mistyped this one so, well that's easy to catch, lets go back and fix that. So I endblock, that's mistyped there. Save that, go back to the browser. And refresh, I still have more error, did I not save it. Probably have another typo then somewhere. Okay, lets go and check it again. Save that. In the index I might have a endblock again down here. I wish that could correct itself, but guess not. Okay save, and reload again. Okay so you can see everything comes back just like normally before, okay it looks good. It's seamless. So that's how you create a base template and then use that base template as inherit it goes it, its a parent template for the child template. So now we can go back in here, we can create multiple templates as well, eventually we will do that. But for now I want to go over again, so this is child template index is, and we need to extend the layout template. Which is the base template, up here at the top, and then in the body of this template here, we need to issue a block command to match the content that is set inside the layout template. So whatever we call here, it must match inside the child template. Now you're not limited just to one thing here, I could have multiple blocks inside this template. I could have, maybe this is the main content, I could have another block maybe on the right rail or maybe even in the footer, or in the navigation, or anywhere else on the page is completely fine. The only thing is that you can not have duplicate content on the same page here. If you do that it's a problem cause it does not know where to render and so there are other ways as well to render that if you want to do it, then you could do something like this. For example, I could put expression down here and if I do this self.content if I call that then it should render this content twice inside here, so we're using this function method you can do that multiple times, but you can not use the block to render that in more than two places in the same template. So, lets just see if this works here. I'm going to save this file, go back to the browser and refresh this and you see that this is rendered twice cause this is the body of the index page. Okay, so kind of very useful, its like a routing system for FOSJS if you are familiar with that. But that is quite powerful and the only way you can do that is to use the self dot, the variable name, use that as a function and you can render that twice. Okay so that's how you create a base template and child template. Okay so the next video we're going to create more child templates to use this base template.