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