Hey, welcome back.
In this video, you will learn how to add a navigation bar to your Django website.
The navigation bar is also responsive.
So if I minimize if I reduce the size of the window, you'll see this button shows up.
So it's a hamburger button.
You can click it and it will show you the rest of the menu items here.
So the site is quite responsive, as you can see.
And yeah, let's see how we can build this.
So this was from another pie chart project.
So let me close that and focus in our project.
So let's implement that menu in our project.
So we want to focus on the templates directory, right, which is here and in the index.html file.
So I'll just close everything else, right click here, close other tabs, minimize this and let's get
to work.
So we have this index.html file.
I want to duplicate this, so copy it and then paste it here again and change the name to base dot html.
I will explain more why I duplicated the file.
Then we want to create another file.
About.html.
So just leave the default code as it is.
You can set a name for the title and then in the body let's just create something like H1 tag.
About us.
So we have an about page and an index.html page and also this base.html.
Now Base.html will behave as a template, so that means you don't need.
These things.
So delete from the body, tag up to the very top.
Delete those lines and also delete the closing tag and the closing body tag.
So you want to keep only this here.
And then you want to go to index.html.
And again, you want to delete everything from the body tag up to the top.
And also.
Here from the body tag up to the end.
Plus you want to delete these two script tags.
So there we go.
We have a div tag now.
And also this closing div tag.
And we also want to delete these two div tags as well.
So only keep.
The H1 tag.
So the H1 tag opens here, closes in here, and then the form opens here and closes in here.
That's all we need to have here.
Then press on control A or command A and then press shift tab to unindent this here.
So press it several times until it matches with the left side border.
Right.
So what I'm doing here is that.
I'm keeping only the contents of each individual page.
So our website will have multiple pages about index and instead of having repetitive code in these files.
Such as the things I've just deleted instead of having those lines repeated in every HTML page index
about etcetera.
We want to keep those lines only in baz dot html.
Right.
So we deleted the body tag up to here.
So I'm in base dot html.
Right.
So here is where we want to keep these lines.
And then so remember that this was a duplicate of index.html.
So then we want to delete everything starting from H1 here, job application form which belongs to index.html.
So just go to the number area here and drag your cursor.
You want to delete everything up to this div?
No, sorry.
This one here.
So up to the form, Right.
So again.
H1 don't include the div class container.
So from H1 to the closing form, tag and press.
The delete button.
Then in between these two div tags.
You want to write some jinja2 code such as curly brackets, curly brackets, percentage, percentage.
And inside you do block.
Content.
And then again, the same symbols and block make sure to have some space been between the words and
the percentage symbols.
So and block is without spaces block content is with a space here.
And then you want to connect the index.html page with the base dot html page.
And then we'll do the same with a boat.
So how do you connect index.html with base.html in index.html at the very top here you want to use again
jinja2 curly brackets, percentage symbols and in between you say extends single quotes base dot html.
So which means index extends base dot HTML.
You also need to add some other jinja to code.
So that would be block content.
In here and then you want to close that block at the very end here.
And block.
Let's do the same with About.html.
So go here and enter those lines.
And here we say.
And block.
Let's see what we have on the website.
So make sure that the app is running here.
It's running.
The about URL is not found at the moment.
We will fix that later, but let's see what we've got so far.
So that's our home page, as you can see.
The page still looks good.
Right.
So we were able to inherit from base dot HTML.
So basically now what's happening is that when the user visits this URL, again, the view function
is called.
So in here index, the index function is called index renders index dot HTML.
So this file and this file when it's being called, it also calls the base dot html file.
So it gets the content of base dot HTML.
And so now we want to do the same with with a boat, right?
So just before we create the navigation bar, let's connect the about page with its URL.
So first of all though, you need to go to views and you need to create a new function for the about
page request as input.
Return render request as the first argument and followed by about.html.
Good.
Then you need to go to URLs here.
Make a comma.
In this list.
And we want to add another item to the patterns list.
So we're working on the Urls.py inside job application, right?
Don't confuse that with the other URLs inside my site.
We don't want to change anything in the URLs in the mysite directory and this time this will be about
slash.
Right.
That's the URL of the about page and views about So about is the name of the function in Views.py.
And let's give this a name.
A boat.
A string.
So now if we go to the page and we add slash about, then we will see the contents of the about page.
Right?
That's it.
And yeah, that's about this video.
So in this video we implemented a base template, so which contains code that is distributed across
all other pages of the website.
And so now we have multiple pages and all these pages share the same style, correct?
Let's have the same class as in index.html.
So in index.html the H1 tag job application form has this class.
Right?
So we can get that class and we can apply it in here.
And then refresh the page and about us will get that margin here.
So it will apply that that bootstrap style.
So that is possible because.
A boat inherits from base dot html meaning that in base.html we have the bootstrap link.
Right?
So now we can apply those classes to the elements of the boat.
So basically we can share the style across all the pages of our website by using a base dot HTML template.
Plus also the other benefits which we'll do in the next video is that all these pages will be able to
share the same navigation bar.
So if you don't understand the benefit of Base.html yet, you'll understand it in the next video.
So I'll see you there.