#100DaysOfWeb in Python Transcripts
Chapter: Days 1-4: Flask Intro
Lecture: Creating the base.html Flask Template
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Our site is pretty plain. There's nothing special about it. It's just simple text and there's nothing really much else to it.
0:09
What we need to do is create some sort of template around it, some sort of common theme that flows across the entire site
0:18
no matter what page you go to. So looking at PyBites here, the common element that flows between every page regardless
0:26
of which page you're on is this left-hand bar, okay? It's almost like your nav bar. It's almost your menu bar along the top of the page.
0:35
Whatever you're used to seeing on your favorite websites. To do that we actually need to create a base template file, something that our webpage
0:44
can call on. So as an example here with PyBites this stuff on the left here stays the same. All that changes is the content on the right.
0:55
Imagine if you will two files, a file called base that contains all the code for this and then the unique file to the page
1:04
in which case this is an about.html page. That is what we're going to create with Flask and that's what's awesome about Flask is that
1:12
you can create a template. You can create that left-hand column. So let's head over to here. You've got your templates folder.
1:21
Let's create a base.html file. Now, in this file we're going to keep it really simple. What on our page stays the same?
1:33
We have a title, we have a header we have the HTML code, and we have the body, right? The only thing that really differs is potentially
1:46
the title in the title bar along the top but that doesn't have to change and the thing that definitely changes is what's in the body.
1:53
It's that unique text to that page. Now, we're just going to keep it really simple. Let's put our HTML header, let's throw in
2:02
the head tag, and let's throw in a title. Now, this title will stay static across all of our pages so this is our site.
2:15
Whoops. Getting ahead of myself there. And we close off the head. And what else did I say? We said body, so the body tag is now static
2:28
across every page but nothing within the body tag is static so let's leave that blank just for a second.
2:35
And we close off our HTML. So this is our template. This template is going to be static across every webpage on our site. But what differs?
2:46
The stuff in between. So without explanation let's just throw in some Jinja template code, block content. I'll explain in just a minute.
2:58
And we'll close that with end block. Now, what this means is in this template we have HTML, we have head, we have title, we have body.
3:13
That is static across every page. What differs is everything within the body tag and Jinja calls on that using block content the block content code.
3:24
This is something we will refer to we will link to in our other files. Everything that calls on this base HTML template
3:33
is going to have this block content tag. And you end it with endblock. So you will see in just a minute. Let's leave this up here.
3:44
Let's head on in another window here to our templates. And we'll open up index.html. Now I have prepared this already so just roll with it.
3:58
In here see the block content? Block content here will be inserted into here on the template. This is where it's going to fall.
4:09
So anything that we put within the block content and end block Jinja tags is going to appear here. Now, I know that's a lengthy explanation
4:19
but I need to drill it in. This is how it works. In this block content we now have our H one text saying, "Hello," and we have a paragraph tag
4:30
that says, "This is text we've included in our HTML file." The one thing I haven't explained here is extends base HTML. This is pretty much our import.
4:42
This is pretty much the Jinja code that says to this when you render this index file it says Hey, go and grab my base.html from here.
4:53
Go and grab my core template, my core formatting from this file." We are extending the base HTML file into our index.html file.
5:04
Then we're going to put everything that is within the block content Jinja tags into our base HTML file here and this is what we're throwing in there.
5:15
We're throwing in a H one header, we're throwing in a paragraph tag, and that's that. You can see the relationship between the files.
5:24
Here's the core file, here is what extends it here is what is unique about every page. And we're just going to work on an index.html
5:33
file for just a second. So let's write that. Let's write that. Just go back and look at routes.py. You can see we don't need to reference base.html.
5:52
We just need to try and render index.html. That's it because by rendering index.html that template we have that Jinja code in the top
6:03
that will then pull in the data from the base HTML file. So let's launch that. Here we have our browser. Let's launch the file here.
6:18
And you can see there's, "Hello" from our actual index.html file. This is the text we've included in our HTML file. That came from index.html.
6:30
What didn't come from index.html is this is our site. That title was not in that code. It was not in that file. If we open up base.html this is where
6:43
the title came from. There's the proof if I may that this base HTML file is being used by this index.html.
6:57
Same thing, we call the index route and we get the same thing there. This is our site. So on the next video we're going to create another
7:05
file called 100Days.html and that's also going to pull from the same base HTML file but it's going to change a few things
7:14
and you can see how the same template is being pulled over every time.