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