Hello, so far with our website we have built this home page.
You can see, it's in the home page and
we also have the about page as well.
So /about/.
This is the about page, which doesn't have
any Bootstrap styling, of course, because we applied
the styling only to the index.html template.
And we also have the blog.html template as well,
which is one of these pages, of Cats or Dogs.
So three templates, one, two, three.
Now we need to find a way to navigate through the
website, which is that for example, how do you go. how
can the visitor go from this page to the about page?
Well, usually this is implemented
through a navigation, menu bar.
So which could be somewhere on top here.
And you could click the about, link and go to that page.
This is what we will do in these
videos now, and how can we implement that?
Because the navigation menu bar
should be in every page.
So one way to do that, is to create
that, navigation menu which is created with HTML.
So one way is to code the HTML for
that navigation menu, in each of these html pages.
But that is of course against the DRY principles.
So DRY, which stands for Don't Repeat Yourself.
Therefore, what we're going to do is
we are going to use, Template Inheritance.
What is Template Inheritance?
Well, it works like this, the
component that will be repetitive.
So the navigation menu bar in our case, is going
to stay in one single file and then the other
files, which is about, blog and index, these files will
get that other file, where the navigation menu is.
And this is referred to as Template Inheritance.
So let's see it in action, how it works.
So right click over templates, and go to
New File and write something like base.html.
base.html is going to contain the navigation menu bar.
Now, to create a navigation menu in
HTML, you use the nav tag.
So open it and close it, and
then inside you have another div.
Open and close it.
And inside this div, we have the ul,
which creates a list of menu items.
So the first menu item would be with li, right.
Then we have another one.
So home, we have About Us, that's all.
So the first menu item, the second menu item.
So this would be for whom.
Therefore inside the first Li tag, which stands for list, we place,
we put a tags which will create a link.
Same for the next one here, a tags,
right, inside the first a tag.
So just here we say href.
This property which is going to have as value
inside quotes, the URL to the first page, which
should be, this tag,
[No Audio]
url, single quotes.
Well, now we need to look at blog, urls, and get the
name of, the url for the home page which is home.
So that goes in here, home. We do the same for about,
so about_view,
[No Audio]
again here. So let's copy that, and paste it inside the first h tag.
Careful, there's a space here.
href about_view.
Now we need to do something else.
We have to go to index.html, and, cut from the
opening body tag in here, until the very first line
cut them out,
and paste them,
on top here. So make some space, paste them in there.
[No Audio]
Also go again, to index.html and cut again,
starting from the closing html tag, including the closing
body tag, including the script tag of Bootstrap, cut
them, go to base.html, go to the very
end, make some space, paste it.
Now base.html will be the parent.
So we talked about Template Inheritance.
This is the parent now, and index.html is the
child, which is going to get, these from base.html.
Actually every page, not only index,
but about.html, blog.html.
So all the Blog Posts will get,
[No Audio]
all these from base.html.
That allows us also to apply
Bootstrap, on every single web page.
[No Audio]
And now you need to tell each of your pages, such as
index.html, you need to tell it that, it has to extend.
So through a template tag like this,
you say extend, single quotes, base.html.
So copy that and paste it, in about.html as well.
And here also we need to delete those body tags and that
as well, and just say that, and go to blog.html.
Also delete body tags, html tags, DOCTYPE tags, paste
that, delete the closing html tag and closing body tag
delete, save, save, save. Then go to base.html and,
[No Audio]
at the end, so after the navigation menu now, we want to
do, a template tag again and say block content
and also, the same thing, say template tag endblock content.
So what is this?
Well, basically each web page.
So think of what the visitor sees on the website.
They see on top a navigation menu bar,
which is this one in here, right?
And then they see the content which could be,
[No Audio]
Post about Cats.
So the cat's content or in the case of
About, is the content of the about page.
So under the menu comes the content.
So this is the content.
And now we need to remember this, variable content
and go to, for example, to index.html.
And then under this we say,
[No Audio]
block content.
[No Audio]
and it ends again with
[No Audio]
endblock content.
[No Audio]
So like that, which means that, as you see, this extends
base.html, so it gets the data from base.html.
And then, this thing between the block,
the content tags, from there to there, is somehow
combined with that base.html page, to be
rendered in the browser as a complete page.
And that's about Template Inheritance.
It's a bit difficult to grasp.
So let's see if we did some errors
now, we're going to see the results.
[No Audio]
Yes, of course.
So it says that, 'extend'.
Did you forget to register or load this tag?
Well, extend that is because Django is
not recognizing this because it's, extends.
So blog.html extends base.html.
Let's do the same for the other
pages, and save this one as well.
And save, yes, this is a base.html template.
Let's look for the next error.
Okay, not bad.
So we see something here, but we don't see any text.
So let's go back and fix that, in base.html.
So here we have the link, but we don't have any text.
So let's say Home for that.
And About Us for this save, refresh and yeah,
we see something now, press on About Us,
it takes us to the about page.
Go to Home,
it goes to Home, About Us, right.
We don't see the content here, so let's fix that
for the about.html page, because we don't see it,
because we don't have those block content tags.
So block content here and here.
But this one should be with endblock, save, refresh,
and, This is the content of about.
Now, of course, if you want this to be prettier,
[No Audio]
you have to put it inside
div tags and say class container, save, refresh.
And now it goes somewhere in the middle
and you can also, make it even better.
So this is a main div that contains everything.
This would be something like h2.
[No Audio]
And then we could add more divs, with content,
this is the content like this. So,
[No Audio]
the navigation menu now, it doesn't
look very pretty because, we haven't applied
any Bootstrap classes styling, to this element.
So you have nav with no class, div
with no class, ul, li and a
also, no classes, no Bootstrap styling.
So let's do that in the next video, see you there.