Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Jinja2 templates
Lecture: Creating a common layout page

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 Now that our site has a little bit of design.
0:02 Let's have a look.
0:04 See on this page we have a little bit of navigation
0:06 on the about page. Eh, not so much.
0:09 We're not including Bootstrap
0:11 we don't have our nav.
0:12 All those sorts of things.
0:13 So we want to move that out of our index.html
0:17 into a place that can be shared.
0:19 So let's see how we go about doing that.
0:21 Now, probably the easiest way at this point
0:23 is to just take one that is representative.
0:26 This one is the one that has all the navigation stuff.
0:28 Copy it and then figure out where the little holes
0:32 should go. So we're going to Command+C that
0:34 and then Command+V it
0:35 and we'll call that _layout
0:37 and I'll use an underscore to riff off of pythons
0:39 like hey this is private, leave this alone angle.
0:42 And that means don't try to serve this up directly.
0:45 Alright so up here
0:46 everything's going to look pretty much the same
0:48 except for in here. What we're going to do
0:51 is we're going to take all of the stuff
0:53 that may, we had from the home page.
0:55 We're going to put a little thing called a block here.
0:57 So we say % + Block.
0:59 This is a piece of terminology from Jinja.
1:01 And then we give it a name like Main content.
1:04 It has no relationship to the class above it
1:07 but it'll help
1:08 and then you have to actually close this off as well
1:11 and block. K, now when we have this other pages
1:15 like let's adapt the about page first.
1:18 You can go over here and say
1:19 if you get all the common stuff
1:21 normally it'll be a lot more
1:23 and it can just say this extends
1:28 and use quotes, this will be _layout.
1:31 Nice little auto-complete there.
1:32 And then we have to define the block again
1:34 but this time to fill it
1:36 so we say % + Block
1:37 main content, love the auto-complete
1:40 and then down here we can say
1:42 we're actually done with and Block.
1:44 There we go. A little formatting
1:46 a little bit of clean up
1:47 and I think that may do it.
1:49 Let's go and have a quick look.
1:52 So if we click on this
1:54 it should now look like this page
1:56 not because they have the same layout yet
1:58 but because I copied one from the other.
2:00 Here we go. Cool. How's that look?
2:03 Oh I don't like this big Python Package index about.
2:05 Maybe we can make it About Python-Package index
2:08 something like that. Here we go
2:11 this is our demo app for the course.
2:12 We go back and forth.
2:13 We hid it really nice, right?
2:15 But of course the home page is not using the sether
2:18 so let's copy that little bit.
2:20 Go to the index and say all this stuff
2:22 is out. Doctype, everything. Down here
2:28 there's your content and then
2:33 and block, like so. Try it again.
2:37 Hey! It still looks the same.
2:39 Kind of underwhelming right
2:40 but it is working.
2:41 It did take all those changes.
2:42 If we go over here, we going to save new source.
2:45 You can see it's
2:46 got all the stuff that it needs here.
2:48 So we've got our Python Package index
2:50 we've got our style sheets
2:51 we've got our nav
2:53 and then here's a little tiny bit
2:54 that the about.html injected.
2:58 And it doesn't have to be just one of these blocks.
3:01 You can actually go over here let's copy this.
3:05 Maybe we want to make room for them to insert additional CSS
3:09 so we come over here and say
3:10 this is going to be additional CSS.
3:14 Like that and then, they can fill in that
3:16 and then down here
3:17 this is going to be additional js for Javascript.
3:21 So let's pose this one.
3:24 It's going to come down here
3:25 and just say
3:27 still comment right?
3:30 Let's have a look one more time.
3:32 It says, you can see up here at the top
3:33 About, Let's do a refresh you can see
3:36 it's injecting that additional CSS
3:39 right in the correct location.
3:41 Down here where we did not do anything for the Javascript.
3:43 It didn't crash it just didn't put it there.
3:46 So, of course if we redefine it like that.
3:48 Everything's good.
3:50 We might want one more for the title
3:52 so it can set the title.
3:54 We can do that up here.
4:07 Imma just call that Title and over here
4:13 it will probably makes sense to do that at the top, right?
4:16 This will be PyPI.
4:22 There's probably a better way to do this
4:25 where you have like a
4:26 some part of the title is the same
4:28 and some part is extended or something like that
4:30 but for now this will just show it off
4:32 like you can see About PyPI demo
4:34 and package index.
4:35 So we can create multiple one's of these little blocks.
4:38 Here we have one for the title.
4:40 We have one for additional CSS.
4:42 We have the most important one
4:43 the main content
4:44 and then one for additional JS.
4:46 And that gives us a huge amount of flexibility
4:48 from within our pages
4:50 to get content into the right places.
4:53 We can change the title
4:54 we can change included CSS.
4:55 We can change included Javascript.
4:57 All of it done in the right location
4:59 and most importantly
5:00 we can change the core content of the page.
5:03 Alright, so that's it for this short lay out.
5:05 Pretty easy, right? but super powerful.