Locked lesson.
About this lesson
In this lesson, we'll discuss how Block Titles work and how to include them within your Django project pages.
Exercise files
Download this lesson’s related exercise files.
Block Title.docx57.3 KB Block Title - Solution.docx
57.8 KB
Quick reference
Block Title
Block Title is used to add different titles to every page of your website while still using the extends base file.
When to use
Use block titles whenever you want to add a different title than the default title that's in your base.html file.
Instructions
To use a block title, modify your base.html to look like this:
<head>
<title>{% block title %}Default Title{% endblock %}</title>
</head>
And then modify any individual webpage to look like this:
{% extends 'base.html' %}
{% block title %}Homepage Title{% endblock %}
Hints & tips
- {% block title %}Homepage Title{% endblock %}
- 00:04 All right, in this video I want to talk about block title.
- 00:07 And we saw earlier when we looked at Django template language,
- 00:11 one of the very first things here is block title.
- 00:14 And what this allows us to do is it allows us to include things that
- 00:19 are specific to a web page.
- 00:21 So for instance, every webpage has a title, an HTML title.
- 00:25 And, by title, I don't mean something on the page itself.
- 00:30 I mean up here in the tab bar here, you can see our title here is local host 8000
- 00:36 if you tab on this Django page, the title here is the Django template language.
- 00:42 Then a pipe, Django documentation, another pipe, and then Django.
- 00:46 And it's that title that I'm talking about now and that's just a basic HTML thing.
- 00:51 Now, normally a title goes in the head section of your HTML.
- 00:57 So let's look at our base dot HTML file and we can, normally this would go body.
- 01:04 Head, head body, right?
- 01:09 And the body tag usually goes at the end.
- 01:12 We haven't actually built out our HTML template yet.
- 01:16 So we don't have all this stuff.
- 01:17 We'll do that later.
- 01:18 Right now I just want to talk about the head.
- 01:21 And inside the head is usually where your HTML title goes.
- 01:25 So we can go title and then this is my title.
- 01:32 So if we save this, remember this is the base dot html,
- 01:36 which means this will get called for every single page of our website, right?
- 01:40 So if we come back here and hit reload,
- 01:42 you see up here now it says this is my title.
- 01:44 If we go to the about page, it says, this is my title.
- 01:47 Every page we have on our website, the title will be this is my title.
- 01:51 Well, that's no good.
- 01:53 You want specific titles for specific pages.
- 01:56 So we want our homepage to have a homepage title,
- 01:59 we want the about page to have an about page title.
- 02:02 How can we do that when we're using this template for every single page?
- 02:07 Well, that's where this block title comes in.
- 02:11 We can actually use that to specify on each page what we want the title for
- 02:16 just that page to be.
- 02:18 So it's pretty simple we just come back over to our code here and
- 02:22 inside wherever you want this to show up in the actual base.html template,
- 02:28 this is where this tag goes and it's just same title.
- 02:32 Block title and then you also want to end it as we always do.
- 02:39 So end block.
- 02:43 And then inside of here, just put whatever you want the default to be.
- 02:47 Let's call this default title, just for now.
- 02:50 Right?
- 02:50 So let's save this now we need to specify on every single one of our HTML pages,
- 02:56 what that title will be for that single page.
- 02:59 So underneath your extends.base on any single HTML page, just do the same thing
- 03:04 again, and we can actually just copy this I'm going to go to the base.html.
- 03:09 I'm going to copy this whole thing.
- 03:11 Right click Copy.
- 03:12 And so let's go here and right click Paste.
- 03:15 And it really doesn't matter where you put this because there's always going to
- 03:20 get output right here in our base file.
- 03:23 Just so long as it's below the extends dot base.HTML extends base tag, right?
- 03:28 So here, this is the homepage.
- 03:31 So we can say homepage, title.
- 03:35 Right?
- 03:36 Let's save this.
- 03:37 So now we're not going to do it for the about page just yet so
- 03:40 we've got it on our homepage, and we've got it on our base page.
- 03:43 So let's go back to our site here and hit reload and see what happens.
- 03:48 Well here we're on the about page and it says default title.
- 03:51 How come?
- 03:52 Well, on our base.HTML, we put default title.
- 03:56 So if you don't put something on about, it just uses whatever's in base,
- 04:01 which in our case is default title.
- 04:03 Now, what's interesting is if we go to our homepage,
- 04:07 we get homepage title, because that's what we designated on our homepage,
- 04:12 right here, so we could copy this whole thing.
- 04:16 And move back to our about page and put one in here.
- 04:20 And let's go About Title and save this.
- 04:26 Now if we go back to our our website and hit reload,
- 04:28 the homepage title says homepage title.
- 04:31 The about page says about page title.
- 04:33 It doesn't say the default title anywhere.
- 04:36 Because we only have two pages and
- 04:38 those two pages we're specifying specifically what we want for the title.
- 04:43 Now, we've been doing this with titles.
- 04:46 This is not a specific tag.
- 04:48 We're just calling this title because we're putting it in a title.
- 04:51 We could just as easily call this elder block elder.
- 04:55 Right.
- 04:55 If we save this, and then come back here and
- 04:59 we need to change it also here on our base.HTML, save that.
- 05:03 Go back to our website and hit reload.
- 05:05 We're going to see the exact same thing.
- 05:07 You don't you're not going to want to call this block elder you're going to always
- 05:10 want to call this block title.
- 05:14 Save this, change it back here.
- 05:17 Save it, change it back here.
- 05:21 My point is you can make these titles, these block tags.
- 05:26 Anytime you want to put something specifically on a page.
- 05:30 So if you think about HTML, they usually have meta-tags and
- 05:33 each meta-tag is different.
- 05:34 You would maybe use a block meta.
- 05:37 Or a block description meta or you know, name it whatever you want.
- 05:41 And that's pretty cool.
- 05:41 So that's how you use the block tag.
- 05:43 In the next video I want to talk about the include tag.
Lesson notes are only available for subscribers.