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.
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.