Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Jinja2 templates
Lecture: Concepts: Common layout
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's highlight some of the concepts
0:01
around these shared layouts.
0:03
We'll focus first on the base view
0:05
or the outer shell, if you will
0:07
the common view that is shared across
0:09
all of the different ones.
0:10
This is going to be in the templates folder
0:12
in the shared subdirectory called _layout.html
0:15
cause we got to refer to that in our other pages
0:17
so it's good you know.
0:19
Now, this can be really whatever you want
0:21
it doesn't exactly have to be html
0:23
you could probably generate xml fragments
0:26
and stuff like that, as well
0:28
but generally what it's for is html
0:29
so you want to have a doctype html for html5
0:32
and html block, tag, head tag, body tag and so on.
0:37
These are just standard html Jinja2 files
0:40
there's nothing you have to do special
0:42
to indicate it's going to be used as one of these layouts
0:45
other than define some blocks where code can go.
0:48
So, here we're defining the main content block
0:50
and providing a default value, no content
0:53
if they don't fill it out.
0:54
Okay, so here's a nice block, this is one
0:57
pretty much every single page is going to be used
0:59
and if not, you can put a little warning here.
1:01
And also, because these blocks are optional
1:04
they don't burden the consumers with them.
1:07
So, it's not like if I have five blocks
1:08
you've got to fill out all five little sections
1:11
and if you get it wrong it crashes
1:12
no, you can just ignore the stuff you don't use.
1:14
Because of that, it's generally better to have more
1:17
rather than fewer sections that these pages
1:19
can punch holes in.
1:20
You saw in our example we had the title
1:22
we had extra CSS at the top, JavaScript at the bottom
1:25
and we had our content block.
1:27
Maybe you have even more that you want
1:29
to make available or something like that.
1:32
Be sure to think about how the pages
1:33
might extend this shared layout
1:35
and where those holes where they can punch
1:38
common content might go.
1:40
So, this is the shared layout, the outer shell
1:42
often you can think of it as.
1:44
And then, if we're going to consume it
1:45
here we're in the index.html file from the home view.
1:50
First we start by saying this extends
1:52
the "shared/_layout.html" in quotes
1:56
don't forget the quotes or you'll get weird errors there.
1:58
Saying that it extends
2:00
and then we just fill out these blocks
2:02
here and there, and we say we're going to put some content
2:04
you know, whatever the content of the index page is
2:06
and this page happens to use Angular, so Angular 2.
2:11
So, we want to make sure that we're including
2:12
the Angular 2 JS stuff at the bottom.
2:15
Not super practical or real, but you know
2:17
it gives you an idea.
2:18
Like, here's some additional JavaScript
2:20
that this page needs to run that other pages don't
2:23
so it's going to use this extra little hole
2:25
this extra block in the layout page to fill it up.
