3.3 Add a Base Template

So now we have this beautiful blank canvas that we can start to work with and present a form to be able to add in a new feed. But before we do that, I wanna do a little bit of clean up because I've lead you down a path. And before before we got too far before you have to rewind a little bit more than I think you would from this point, I wanna start to address an issue that we've created, or at least that I've created. So what I've done when I've created the feeds_list, is I just copy and pasted articles_list, and that was about all I did. Well, this is not a very good idea, obviously, because if you just start to copy and paste code All over the place, then it's gonna cause a lot of problems. Because if you ever need to update those pages, and maybe use a different bootstrap template, then you're gonna have to go into all of these individual templates and make the modifications all over the place. And that's very error prone and you're going to make mistakes. I've seen it a million times. I've done it a million times. Please don't do this. So, how do we get around that? Well, in a simple application like this, it's not too difficult. So what we can do here is, we can create a base template, and in each one of these sub templates we could simply extend that template. So, it's very simple to do, so let's start to go down this path. So what I wanna do is I wanna come into my news folder that's containing all my templates, and I want to add a new file, and I want to call this base.html. So what this is, this is gonna be kind of like my main template. I want this to be the main master page, if you will, that's gonna contain most of the information, but not quite all of it. So this is what we're gonna do. We're gonna come into articles.list, and let's just grab the whole thing for now. We're gonna grab the whole thing. We're gonna copy it come into base and we'll just paste this in here. So, right now this is exactly what we have in articles_list, which is not actually what we want. What we want to do is we want to cut out of this all the stuff that is going to change in the specific pages that are going to extend this base template. Because this is a rather simple concept, all I'm really going to do at this point is, I'm going to grab my jumbotron as well as my div container and everything within there and I'm gonna cut this out. And so what I want to do is I want to come back into articles list. I'm going to select all of this and I'm just going to paste in here, that block. So that's going to be our starting point. So lets just clean this up just a little bit like that. So we'll save that. We'll come back into base here, and where we stripped all that stuff out is right here. So we have our navigation and we have all of our header stuff. We have our scripts at the bottom, and that's all the stuff we don't want to have to retype and redo over and over again. Now we need to specify this spot in here as where we want to enter in all of the page-specific content, not the content that's really not gonna change very much over and over again. So the way that we do that is, using our open and close curly brackets and our percent signs again, cuz we're gonna run a little bit of code here. And we're gonna tell Django that this is going to be a block, and that we want this block to have a name. And we're just gonna call this content. And at the end of this we'll simply copy this. We'll copy this, we'll drop down another line here, we'll paste it in, and instead of saying block we're going to say our for loops we that we did before that we're going to endblock. So that's all we're gonna need to do to define a section within this base template that we want to insert data into here, that this is going to be a block called content. This is where we want to insert that information. Now, we're going to come into our articles_list and at the very top here, this is where we want to take all the information here and insert it into that block that has a name of content. So we're gonna come in here and we're gonna say once again with some curly brackets and percent signs that we want this to be our content block just like that. And we'll drop down here a bit and we're also gonna once again here say, endblock. So the basic idea here is we're gonna take this content block, and we're gonna insert it into this section here for this block content. But before we're able to do that, we have to specify that we want to extend a particular template. And we do that with another little block here, and this is going to be extends, so we're going to extend, in quotation marks, news, we have to specify where this is at, news/base.html. Like that, so let's go ahead and save that. So now, technically speaking, if I were to come back in here and go to just news, cuz that's all we've modified so far, and refresh that. We see that everything is continuing to work as it did before. I can refresh this, and everything is gonna continue to work because we have structured this in such a way that we've now created a base, that's going to contain all of the redundant information that we have to specify on every single page. And then all we've done is we've modified our articles_list to contain only the information that we absolutely need to have for this particular case. So I'm actually going to cheat, I'm just going to copy this. I'm going to come back over to feeds and I'm just going to do the same thing here, make a couple modifications. We said here that this is feeds lists or news feed, maybe we said, News Feeds like that. We did not have this paragraph. Like so, and then we had in here for feed in feeds. This is now feed as opposed to article, feed as opposed to article. And go ahead and save that. So we can come back to Chrome, refresh our page, click on Feeds we're back to News Feeds again. Now this active business here is kinda broken because of that so maybe I think we'll just come in here and get rid of this whole active business. We won't worry about that so much. We'll save it and come back in here. And we can go back and forth between Home and Feeds, and of course that didn't work here so we need this to go back to where we came from. URL, this is actually called articles_list, like that. We can save that, but the nice thing is now that I only have to save this in one location in base. And then I'm gong to get that functionality to work all over the place. So if I simply come in here and say I want to go to News, I can go Home. I'm at News I can go to Feeds and I can go back and forth very nicely. Okay, so now that I've cleaned that up, let's start to work on creating a form to create a new, or to add a new, feed in the next lesson.