# Python Django Tutorial: Full-Featured Web App Part 3 - Templates

## Метаданные

- **Канал:** Corey Schafer
- **YouTube:** https://www.youtube.com/watch?v=qDwdMDQ8oX4
- **Дата:** 31.08.2018
- **Длительность:** 45:45
- **Просмотры:** 944,606

## Описание

In this Python Django Tutorial, we will be learning how to use templates to return more complex HTML to the browser. We'll also see how we can pass variables to our templates as context. Let's get started...

The code for this series can be found at:
https://github.com/CoreyMSchafer/code_snippets/tree/master/Django_Blog

Snippets:
https://github.com/CoreyMSchafer/code_snippets/tree/master/Django_Blog/snippets

Bootstrap Starter Template:
https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template


✅ Support My Channel Through Patreon:
https://www.patreon.com/coreyms

✅ Become a Channel Member:
https://www.youtube.com/channel/UCCezIgC97PvUuR4_gbFUs5g/join

✅ One-Time Contribution Through PayPal:
https://goo.gl/649HFY

✅ Cryptocurrency Donations:
Bitcoin Wallet - 3MPH8oY2EAgbLVy7RBMinwcBntggi7qeG3
Ethereum Wallet - 0x151649418616068fB46C3598083817101d3bCD33
Litecoin Wallet - MPvEBY5fxGkmPQgocfJbxP6EmTo5UUXMot

✅ Corey's Public Amazon Wishlist
http://a.co/inIyro1

✅ Equipment I Use and Books I Recommend:
https://www.amazon.com/shop/coreyschafer

▶️ You Can Find Me On:
My Website - http://coreyms.com/
My Second Channel - https://www.youtube.com/c/coreymschafer
Facebook - https://www.facebook.com/CoreyMSchafer
Twitter - https://twitter.com/CoreyMSchafer
Instagram - https://www.instagram.com/coreymschafer/

#Python #Django

## Содержание

### [0:00](https://www.youtube.com/watch?v=qDwdMDQ8oX4) <Untitled Chapter 1>

hey there how's it going everybody in this video we'll be learning how to use templates to return more complex HTML code than we did in the last video and we'll also see how to pass variables to our templates as well so let's go ahead and get started so I'm starting with in the views module of the blog app that we created in the last video where we were returning HTTP responses from our home route and our about route so we can see in our two routes that we are returning these two headings but most HTML files have a lot more HTML than this they usually contain an entire structure with a head tag a body tag and all of that now there's nothing stopping us from returning all of that HTML here in this response so you know we could do something like doctype and then type out the entire HTML document here but we would have to do that for every single one of our views and we can already see how that would get extremely ugly so we'd have to create a ton of repeated HTML like this for every single view that we have so the best way to do this is to use templates so to use templates we first need to create a templates directory within our blog app directory and I'll just do that here within sublime text so within the blog app directory I'm going to create a new folder and within that blog app I'm going to create a directory called templates so by default django looks for a templates subdirectory and each of our installed apps now we haven't gone over installed apps just yet but we'll look at those right after we make these templates so since django is possibly going to be looking in other locations for additional templates we're going to want to create another subdirectory within our templates directory with the same name as our app so that we know that these are the templates specific to this blog application now that may sound a bit redundant to make another directory and here with the same name as our current app but that's just the django convention so i'll do that by going into our templates directory here and within our templates directory we're going to create a new folder and called this blog so the way that this should currently look is we have our blog app and within our blog app we have a templates directory and within that templates directory we have another factory called blog and this is where our templates dot HTML files are going to live so let me get rid of that so now within the blog directory inside of the templates directory let's create both of our templates so I'll create a template for our home page and for our about page so I'll say new file and we'll say home dot HTML for the first one and I will also create another file called about dot HTML for the second one okay so first let's do our home route and our home template so I'll put all of the HTML that we'd like within our home page within this template so in sublime text if I type HTML and then hit tab then it creates a minimal HTML page structure for us now if your editor doesn't create a structure like this then you can find these pages on my github code and I'll having a link to that in the description section below if you'd like to copy and paste from there so now that we have a basic HTML structure let's add the heading tag that we had in our Python script into this home template so within the body I'll create an h1 tag and just say let's say we called this blog home and I'll put an exclamation point there as well ok so now that we have this template ready we have to add our blog application to our list of installed apps so that Jango knows to look there for a templates directory now to add our application to that list it's recommended that we add our app configuration to our projects settings dot PI module now our app configuration is located inside of our apps py module within our application so within our blog application we should have an Apps py module so I'll open that up and we can see here that we have a blog config and that inherits from this app config class here so I'm going to copy this blog config name and copy that and now let's open up our projects settings dot py file where we need to add the path to this class within the installed apps list so within our project mine is called Django project

### [4:18](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=258s) open the settings top py file

let's open the settings top py file and now let's scroll down until we see installed apps and here at the top is where I want to add a path to that app configuration and this is going to be a string so let's create a string and then this is going to be blog dot apps dot and then pasted in at that blog config so blog app stop blog config and let's not forget the comma afterwards here since this installed apps is a list and you should just get used to adding applications to this list any time you create a new application because it's something that's easy to forget but you'll need to do that in order for Django to correctly search your templates and also when we start working with databases soon it's also where Django looks for our models ok so now let's use that template that we created so that it renders that whenever we navigate to our home page so in order to do that we have to point our blog views to use those templates so I'm going to open up our blog views so within blog I will open up our views now there are a

### [5:22](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=322s) loading in a template

couple different ways of loading in a template now one way would be to load the template in and then render it and pass that to our HTTP response but that way is a few more steps than what it needs to be and Django actually provides a shortcut that does all of this in just one piece of code and that shortcut is in the Django shortcuts module and this is so commonly used that Django actually already added this import for us when we created our app so we can see the very first line here was already here when we first looked in this file and it's from Django shortcuts import render now if you don't have that import in your views or if you removed it for any reason then you can just type that back in as it looks here and now we can return a rendered template instead of our HTTP response so after our return statement here right within our home view I will say return render and the render function takes the request object as its first argument so we'll pass in request and the second argument it takes is the template name that we want to render now the way we reference our templates is by first specifying the subdirectory within our templates directory in this case it's below and this is going to be a string so we'll say a string of blog ford slash and then followed by the name of our template and we want to render our home dot HTML template for this home view so we'll say blog ford slash home dot HTML and save that and there's also a third optional argument that we can pass in that we'll look at here in just a second and that's the context so basically it's a way for us to pass information into our template and we'll take a look at passing information into our template in just a second but for now let's make sure that this works so far now this render function still returns an HTTP response in the background so that is still what our view is returning our views always need to return either an HTTP response or an exception okay so let's make sure this works so I'm going to pull up my terminal and make sure that our dev server is running and it's not so I'll say python managed dot py run server and now let's open that up in our browser and now we can see that this says blog home here so it still looks about the same as it did before but if I view the source code of this web page and let me make this a little larger here then we can see that now we have our entire HTML structure that we put inside of our template so that is using that new home template that we just created ok so now let's do this same thing for our about page so let's go into our blog application and open our templates so I'll open this back up here and we want to open up the template

### [8:09](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=489s) open up the template for that about page

for that about page so it's in our blog app templates directory blog subdirectory within templates and then about and within here let's copy most of the structure from our home that HTML template and then paste it into our about page so I'm going to copy everything from our home template and paste that in to our about template and instead of blog home we'll just say blog about actually let me just change that to say about page so that'll work okay so at this point we don't need to add our application to the installed apps again like we did last time because that's already been done for our whole blog app so now we just need to update our about view to render this new template so let's open back up our views and instead of returning this simple HTTP response let's instead render our about template so I'll just copy this from our home view and paste it in here to our about view and instead of rendering that home dot HTML we will render the about dot HTML and now if we look at our views they're both now returning these rendered templates instead of using our HTTP response so we can just remove that import since it's no longer being used so I'm just going to get rid of that okay so now let's test that our about template is working well so let's open that up in the browser here and go to our home page ford slash about we can see that now we have this about page if we look at the page source then we can see that we have that whole HTML structure so at this point if you're just using django to create static HTML pages then that's basically what we've created here all you need to do is add in more detail at HTML and CSS and you'd be good to go but pretty much every web application these days doesn't just contain static information you normally have posts and updates and all kinds of different information that's continuously being added to the site so for example if remembered the application that I showed in the first video that I said would be our final application at the end of this series it had a lot of different posts by different authors and those could be blog post or pictures or whatever it is that you're making with this application so let's say that we have some post like this that we wanted to display in our templates so how would we do that so let's open back up our application

### [10:22](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=622s) add some dummy data

and add some dummy data so that we can see how this is done so I'm going to add this dummy data into our blog views and then we'll see how to pass that into our templates and I'll just add this dummy data here to the top of our views file and we will just create some fake post so I'll call this post and this is going to be a list and this list of dictionaries and each dictionary will be information associated with one post so this will be our first post so we'll have an author and I'll say that the author is Corrie m/s the title will have a title to a post so we'll have the title be the blog post one and we will have some content so I'll put in a Content key here and for the content of this post we'll just say first post content and then lastly we have a date posted now this is normally going to be a date/time object but we'll just pass in a string so I'll just say August 27th of 2018 so now let's copy this so that's enough information for one dummy post there now I'll put in a comma here and paste in another dictionary and this will be like a another post here so for the second post for the author I'll just say Jane Doe and then we'll have the title be blog post to the content can be second post content and for the date posted we'll do August 28th for this one so let's just pretend for now that we made a database call and got back this list of posts and we want to display these post on our blog homepage so we can pass these posts into our template just by passing an argument with our data and we'll put our data into a dictionary so within our home page view here let's create a dictionary and we'll call this dictionary context and I will set that equal to a dictionary and now within this context dictionary I'm going to create a key and that key is going to be called post and the value that I'm going to assign to our post key is our list of posts that we created at the top of the file so I will pass in that post dictionary that we created at the top and now we can pass that context in as our third argument to our render function and so if I come down here then we can pass in context as our third argument and by doing that it will pass that data into our template and let us access it there within the template so now whatever key name that we use in this dictionary that we passed in will be accessible from within the template and it will be equal to that value so we will have access to this post variable here and it will be equal to this post data which is a list of dictionaries can information of each post so now let's

### [13:21](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=801s) switch over to our home dot html template

switch over to our home dot HTML template so we can see how to use this and now in our home template we need to loop through those posts in order to display them on our home page so the templating engine that django uses is very similar to Jinja - if any of you have used that and the templating engine allows us to write code here within our templates so to write a for loop we can open up a code block so I'm just going to get rid of this h1 tag here and we can open up a code block by doing these curly braces and then these percent signs and now we can say for post in posts and this post variable that we are looping over here is the key of the context dictionary that we passed in so now we always need to end our loops within our templates so we can say end for so it's kind of similar to writing Python in our templates but it's not exactly the same because we have to tell our template whenever certain loops in so for you know each in if statement you have to have an end if for loops in for and so on so now within this for loop now we can print out our post information one post at a time so we can say I will just have an h1 here for the post title and now if we want to access a variable then we can use a double curly brace like this and then if we say post dot title then that will put the title of the post inside of this h1 tag so again this is similar to Python but it's not exactly the same because we can actually use a dot syntax here on a dictionary and that's how we actually get the title so it's not like Python where we would do a dot get or something like that we can just say post dot title and again to access a variable we use these double curly braces and to do more logic like if statements in for loop for loops we use this kind of code block here which is curly braces and percent signs and if this confuses you for now then you're definitely going to be able to get this by the end of the series because we're going to be using logic like this a lot okay so now let's do a paragraph tag and here we'll print out the post author and also the date that it was posted so I'll say bye and then our double curly braces to access a variable post dot author and then we'll say on and then do the post date so we'll say post dot and I believe I called that date underscore posted let me be sure it's right there okay yeah date underscore posted and now let's go to another paragraph tag and now we will just print out the content

### [16:00](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=960s) print out the content of the post

of the post so within these double curly braces we can say post dot content and save that okay so now if we save that and reload the page in our browser first let me make sure that our development server is still running and that we don't have any errors and if it says that it's running then like you don't have any syntax errors so that's good now let's reload this page in our browser so I'll close down the source code there and then reload our home page and we can see now on our home page that it looped over our dummy data and displayed that information that we specified within the HTML so if we view this source code here oops I accidentally hit inspect if I go to view page source let me make this a little larger here then we can see that both of those sections that were created within the for loop are both printed out here now let's go over that one more time just so it's a hundred percent clear so just a quick recap in our blog views we created some dummy data here at the top which is a list of dictionaries that has two dummy posts with that information within our home view we have this context which it which is a dictionary and the keys of this context is what is going to be accessible from within our template so this post variable is going to be accessible inside our template with this value equal to post which is a list of dictionaries so once we pass that into our template then we'll have access to that so within our home template we can loop over those posts that we have access to and then print them all out one by one so even though we only have one section here since there are two posts it out this section twice and that is why in our actual application in the browser we get two blog posts here with different content and whenever we actually look at our page then it comes out like this okay so now let's add some more to our templates so I'm going to bring back up our home dot HTML template now we sell how to do a for loop but we can also do if and else conditionals so let's say that we wanted to be able to

### [18:11](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=1091s) pass a title to our web pages

pass a title to our web pages but if we didn't pass a title then we would just use a default of Django blog or something like that so we could come up here into the title section or the head section where we're printing the title and to do an if-else statement we can put in our curly braces with percent signs here and say if title so if we have a specific title then we will put that there and if we don't have a title then we'll put in these curly braces and percent signs and say else and then put a nother title here if we don't have a title and then at the end here let me remove that curly brace and then at the end here we need to end our if statement so we'll say end if okay so if we have a title passed in to our context data into this template then we will call this Django blog then - and then print out that title so to access that title variable then we use the double curly braces and just print out title now if we don't have a title then we'll just print out Django blog without anything else and let's also do this and are about template also so I'm going to copy this top section here with the if-else statement and within our about template up in our head I'm going to replace our title with this conditional and now let's go back to our views and give one of our views a title and not provide one for the other so let's not pass in a title for our home page and just let that use the default but for our about page let's pass in a title of about now we don't actually have to create the context by itself here if it's shirred enough then we can just simply pass in a dictionary directly in as this argument so we can just say title and then the value for that title will say about and save that so now with that saved if we reload our browser now this might be a little small for you to see but up here in the tab we have a title of Django blog and that is because we didn't pass in a title and it uses the default from that conditional now if we go to the about page so forward slash about now up here in the top it's still it's kind of small but it says Django blog - about so it's actually using that title from the conditional okay so we're almost finished up with this tutorial but there is one thing about our templates that isn't very good design right now so if you notice our home page template and our about page template have a lot of similar repeated code and that is never good in programming because it means if we want to update one of those sections then we would need to update it in every location so for example if we wanted to change our

### [20:57](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=1257s) change our default title for our website

default title for our website then we would have to make that change in both the home and about templates and the more pages that we have with repeated code the worse that problem would be so it would be better to have everything that is repeated in a single place so that there is only one place to make changes and our home template and about template only contains the information that is unique to those pages so to accomplish this we can use something called template inheritance so let's see what this looks like so let me create a

### [21:27](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=1287s) create a new template in our templates directory

new template in our templates directory so let me open up our project here and within our blog templates let's create a new template so I'll say new file and we'll call this base dot HTML and within based on HTML we want to pick out all of the repeated sections between our home and our about templates so if we compare these so I'll switch back and forth between the home and about templates here so we can see there's a lot of repeated code the only thing that isn't repeated is this little section down here in our body so as a starting place for our base template I'm going to grab the code from our about template here and copy that and let's paste that into our base template and now let's delete the part that is unique to the about page and that is just this h1 tag in here so if I delete that now all we're left with here is the HTML that is shared between both of our views our home view and our about for you so now in this location I'm going to create a block and a block is a section that child templates can override and we'll see this in action in just one second so I'll create a block within our body tag and I'll just call this content and we create blocks with those curly braces and the percent signs and I'll call this block content and then right on the other side of this block we will create another section that says IND block and save that so now within our home and about templates will inherit this base template and get all of this information and then we'll just override the content section with the stuff that is unique to each page so first let me switch over to the home view and in this home template we want to use that base template as the parent so we can get rid of all the information that is in that base template so first let me remove all of the information that is in our base template so that would be everything up here at the top and also the bottom being body tag here and the ending HTML tag so this for loop is the only thing that was unique to our home template and now at the top of this template we can use the base template by extending it so up here at the top we'll put in curly braces and percent signs and we'll say extends and then within a string here we want to extend the base template within this blog directory so that is blog ford slash based on HTML now remember in our base template we have this block here called content and we want our for loop in our home template to override that content section so to do that we can wrap it in a Content block by saying double curly braces here or I'm sorry curly braces with % and say block content and then indent that whole for loop inside of that block content and then after the content block we can close that out curly-braces percent signs and say end block and I will put content after there so we know that we're ending that content block now you could simply just use in block there instead of saying end block content but I like doing it that way because if you have multiple blocks then it can be easy to lose track of what blocks you're closing so I just like to be explicit and specify exactly what block is ending there okay so now let's do this exact same thing and our about template so I'm just going to copy everything here from the home template and then I will paste it in to our about page but I will leave the information that's currently there in our about page but just space down a couple lines okay so on our about page instead of our content being this for loop here it's just this h1 tag with the text of about page so let's copy that and let's paste that in to the content block up here at the top and now we can just remove what our old about template was so I can get rid of that and now we can see that this is all that we're left with so we can see that we have a lot less code in both our home template and our about template and both of them are using this based on HTML template so if you wanted to now change the default title up here then we could change that to whatever we wanted and the home and the about template should both pick those up so now with those changes let's make sure this is still working in the browser and after we save this then we should be able to reload it in the browser and still have the same pages that we had before so if this so this is saved and I'm going to go back to our home page here we can see that the home page is still working so that's good and we can go to the about page and that's still working as well so both of these pages are still working but now we're using template inheritance so let me show you why this is so powerful so let's say that we wanted to now update our entire website to use bootstrap now if you don't know what bootstrap is basically an exit it's an extremely popular library that makes it easy to add some nice styles to your website and i'll be using bootstrap in this series since it will allow us to add nice styles easily without taking anything any of the focus away from Django so to add bootstrap to our website I'm going to open up the start

### [26:45](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=1605s) open up the start template from the bootstrap documentation

template from the bootstrap documentation to see how they say to do this and I've already got this open up in my browser here and I'll have a link to this page in the description section below so this is the bootstrap starter template that we can use in order to get bootstrap into our website so this is an entire HTML document here and we can see that we need to add a few things so we have some required meta tags here in the head there is some CSS that links to the bootstrap CSS and also down here before the closing body tag there are three JavaScript scripts now the CSS and the JavaScript that this is using are all served from a content delivery network and basically that just means that there's nothing that we actually need to download so we should just be able to drop this starter template into our site and we'll be good to go now there are actually some third-party packages that some people use an order to use bootstrap and Django together and I won't be using anything like that in this series because I feel like it's something additional to learn and if you're already familiar with bootstrap classes then there's really no reason you can't just use it directly it just takes adding these few lines here to our base template and we should be good to go and I also feel like it gives us a little bit more control with the design just to do it manually like this now if we weren't using template inheritance then we'd have to make these changes to every template in our application and not only would that be easy to screw up but it would be almost impossible to maintain once the number of pages on our website grew but now that we have that base template we just need to make these changes to that single template that our other templates and Herot from so first let's copy these meta tags and the CSS that needs to be added to the head of our page so I'm just going to everything within the head here copy from there down so from the beginning head tag down to the end everything inside there I will copy that and let's go to our base template and let's paste this into the head of our current base template and I'm going to paste all of that above the title so now we have those meta tags and the link to the CSS and it looks like I copied their title tag too so let's actually just get rid of that and use our title tag so now we just have the meta tags in the CSS and now let's go back to that starter template and let's grab the JavaScript here before the closing body tag so I will copy all of that go back to our base template and right before the closing body tag and our template I will paste those scripts in and just for those couple of changes we should now be able to use bootstrap specific CSS classes so to use one of those I'm going to wrap our content in a div with the class of container which will give the content some good padding and spacing so before the content block I will make a div here actually let me move this content block into this div so I'll paste that in there and we want this div to have a bootstrap class and that bootstrap class is going to be called container and again that will just give our content some good padding and spacing so simply adding in that CSS and JavaScript should be enough for our web application to now be using bootstrap so now let's make sure all of this is still working so if I look at the terminal then it looks like our server is still running so that's good we don't have any errors now if I pull this up in the browser and reload our home page then we can see that now we have some padding and some margin changes so the content used to be really far over here to the left and now it's more towards the center of the page and if we go to the about page then we can see that bootstrap is working on that page too and it works on both of those pages because both templates are inheriting that single base template okay so I know that was probably a lot to take in so let's do a quick recap before moving on to the next topic so what we did here is we created a base template called base HTML and this is our parent template that other templates will inherit from and this is the main structure of our EML that is going to be included on every single page now you can have multiple blocks but right now we only have a single block called content and that content block is what our other templates can override and when they override that content block with data it will place that data at this location in the HTML so it will place it within this container div here so now if we open our home template then we can see that we are extending that base template and then we are specifying that we want to put some information in to that content block and the information that we are putting there is that dummy post data that we've seen before so when it's all said and done if we go back to the home page and look at our page source here and let me make this larger so everyone can see then we can see that we have all of that information from the base template including the bootstrap CSS and JavaScript and then we have our two dummy blog post here where that content block is located inside of that div with the class of container ok so now that we have this base layout template in place

### [32:17](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=1937s) add a navigation bar

let's add a navigation bar and some global styles to our website so that it looks a lot nicer and similar to our final product now this is a good bit of HTML so I'm going to grab this code from some code snippets so you don't have to watch me type all of this out but the link to these code snippets will be in the description section below so you can grab these snippets as well now really you can follow along with the series just fine without styling the website but having these in place will give a better idea for how this might actually look in a real application so the first snippet I'm going to grab is in my snippets folder and I have my snippets folder open here in finder so and this is within navigation HTML so I'm going to open this in sublime text so this is the first snippet that I'm going to grab so let's copy all of this and then go back to our base HTML template and we are going to paste this to the very top of our body because this is a navigation bar so I will paste that in then fix the indentations there and save that so what we added here is a navigation bar with some bootstrap CSS classes that will make this look nice and I'm also going to put in a new main section that contains our content block and this snippet is in our snippets folder and it is called main HTML so I'm going to open up the snippets folder and open up main HTML and copy this whole section that I have here and then go back to our base template and within our base template I'm going to scroll down to our old container div that contained our content block and this is going to be a replacement for that so let's get rid of that old div that contained our content block and then paste in our new main section here and let me clean up the indentation there as well now if you're following along with pacing in these snippets then don't forget to remove that old container div that hold that had our old block content because our snippet that we just pasted it in has block content listed right here okay and I also have a few custom styles that aren't bootstrap specific and those are going to be in a file called main CSS now since this will be a CSS file and our actual project we need to actually put it somewhere and in Django static files like CSS and JavaScript need to be located in a static directory within our app so let's create a directory in our project called static so within our blog app I'm going to right click on that blog directory and create a new folder and I'm going to call that folder static so that static directory lives in the root directory of our blog app now just like with our templates we'll want to create another subdirectory with the same name of our app inside of our static directory so I'll create another directory inside the static directory called blog so I'll right click on the static directory say new folder and we will call this blog and then within that blog directory inside of our static

### [35:30](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=2130s) create a css file

directory I'll create a CSS file and I will call this main dot C SS and within main. css I'm going to grab another snippet of code in my snippets folder so let me open that and this snippets file is called main CSS so I will open that and I will copy all of that and then paste this into our blog main CSS that we just created so I will paste all of that in there and save that okay so now we have a CSS file and in order to include that in our base template we're going to need to include a couple of lines so let's go back to our base template and we want to put our main CSS file in this template so probably right above this title here is where we'll include that main CSS file that's within that static folder but first we have to load our static files so to do this we need to open up a code block and I will do this at the very top of our template so right above the doctype here at the top I'll put in a code block with the curly braces and percent signs and we'll say load static and that will make it so that we can load in that CSS file from our static directory and now we can add our CSS file and again I'm going to do it right here above this title so I'll get a few lines there and we can load this by opening up a link tag here and within sublime text this autocompletes for me but basically we're saying that we want a link with that is a stylesheet with a type that is CSS and then the href is going to be where this CSS file is

### [37:13](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=2233s) load a static file

located so to load a static file in Django we can open up a code block so again curly braces percent signs and now we can say static and then quotes and within those quotes I'll say that is within blog and then main dot CSS so I'll save that so what this static statement does here is it generates an absolute URL of the static files and then accesses that blog main CSS now at this point we should be pretty close to being done if we reload our page in the browser first let me make sure that we don't have any errors in our dev server and we don't so that's good so now let me reload our homepage in the browser so I will reload this okay so that's not really what I was expecting there let me try to let's try to restart our web server since we haven't restarted that in a while so I'm going to kill that and clear the page and then let's rerun Python managed PI runs server again and now let's try to reload this page okay so we can see that looks a lot nicer sometimes in order to get it to load that stuff up you just have to kill the web server and then reload sometimes you also have to reset your browser cache to get CSS changes and stuff like that now if you ever want to do a hard refresh on your page and clear the cache then on Mac that is command shift R and on Windows I believe that is ctrl f5 okay so this looks nice with the CSS snippets that we've added in but there are a few more touches that I'd like to add so it would be nice to visually split up our blog posts here a bit and the CSS that we already added has some Styles for that we just need to put in the correct HTML so again within the snippets folder let me open up our sublime here and now within the snippets I have a file called article dot HTML so let me open that in sublime and now let me copy all of this and this is going to be the HTML and CSS for a specific blog so I'm going to put this within our for loop for our blog post which currently is in the home template so we want to open up our home template and within the for loop let's get rid of the current HTML that we have there now just with that h1 and two paragraph tags and instead let's paste in that snippet from the snippets folder and I'll correct that indentation so now we have some more modern html5 HTML within here and you can see that we have a lot more CSS classes to make this stuff look a little nicer and we have the post author the date posted the post title and the post contents so all of that information should still be there so now let's go back to our browser and reload this then we can see that now this is all coming together and looking a lot nicer and if we go back to our about page then we can see that our about page is working with all of these new styles also now our other links and our navigation bar don't work just yet because we haven't yet created these pages but we'll be creating these in future videos now there is one last little change that I want to show you that will make our templates better and more flexible so if

### [40:35](https://www.youtube.com/watch?v=qDwdMDQ8oX4&t=2435s) pull up our base html template

we pull up our base HTML template right now so let me go to that base HTML template if we go to our navigation bar so that's in the opening body tag in this header tag here so this is the navigation bar for our website here from this opening nav tag all the way down to this closing nav tag now we can see that we have some links here and our navigation bar so we have an href here for the Django blog that goes to our home page we have a home link about that goes to forward slash about and login and register are just these hash tags here or pound signs which just means that they're dead links so right now this home link and this about link are hard-coded to these locations now we saw in the last video how easy it is for us to change the routes to these pages maybe in the future I will want our blog home page to be at Ford slash blog instead of the root of our website so if we were to hard-code the routes here in our templates then anytime we wanted to change those routes then we would also have to change the H reps here and our templates now anytime you have to change things in multiple locations like that then it should be firing off some alarm bells in your head that there's probably a better way to do this and in this case we can use the Django URL tag in order to get the absolute path to a given URL pattern so let me show you what I mean here so for our blog home page within the href attribute we can come in here and open up a code block so that's going to be the curly braces with the percent signs and now we will say URL and then a some quotes there and then pass in blog - home and that blog - home will be the name that we gave to our URL pattern so if we go back to our blog URLs so let me open these up here then this blog - home is the name for our home URL pattern so that's why it's important that these names are unique because anytime we've referenced that it will reference this home path that goes to this home view so anytime we reference a URL in a template it's probably best to use the URL tag and then the name of the route instead of actually hard coding those in like this because if those URLs change then this URL tag will change with them but if they're hard coded then it means we have to change it in multiple locations so the links here that are hard coded in the navigation bar I'm going to change all of these to use this URL tag so this will be blog - about and then we have one more up here that goes to our home route as well so I'll paste that in so now if we click on Gengo blog it goes to our blog home if we click on home it goes to blog home and about goes to blog about and again those are the names that we gave to our URL patterns here now again if I go back to my base template these this login and this register out here we haven't created those routes yet so we can't use the URL tag with those yet because if we try to use the URL tag with a URL that doesn't exist then we'll receive an error so when we create those login and register routes in a future video then we'll be sure to update these and the navigation bar as well but with the URL tags in place for our home and our about routes we should be able to reload our website and those should still work so let's reload our website so I'll reload the homepage here so now if we click around here in the navigation bar then all of these should still work so yet that still links to the about page and these two still link to the home page so the good so even if those routes are changed in the future our navigation should work no matter what no matter where those routes are because that URL tag will always get that location correct so we should use that URL tag anytime we can to keep our code easy to maintain okay so I think that is going to do it for this video I hope that now you have a good understanding of templates and how we can pass data into those templates and also the benefits of creating parent templates so that we can update every page on our site in a single location and the next video we'll be learning how to log in to our admin page that we saw earlier in the series and the admin page is a great way to see some back-end data and also where we can make changes and a nice easy to use GUI but if anyone has any questions about what we covered in this video then feel free to ask in the comment section below and I'll do my best to answer those and if you enjoyed these tutorials and would like to support them then there are several ways you can do that these ways to simply like the video and give it a thumbs up and also it's a huge help to share these videos with anyone who you think would find them useful and if you have the means you can contribute through patreon and there's a link to that page and it's scripts in section below be sure to subscribe for future videos and thank you all for watching

---
*Источник: https://ekstraktznaniy.ru/video/12178*