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 around these shared layouts. We'll focus first on the base view or the outer shell, if you will
0:08
the common view that is shared across all of the different ones. This is going to be in the templates folder
0:13
in the shared subdirectory called _layout.html cause we got to refer to that in our other pages so it's good you know.
0:20
Now, this can be really whatever you want it doesn't exactly have to be HTML you could probably generate xml fragments and stuff like that, as well
0:29
but generally what it's for is HTML so you want to have a doctype HTML for HTML5 and HTML block, tag, head tag, body tag and so on.
0:38
These are just standard HTML Jinja2 files there's nothing you have to do special to indicate it's going to be used as one of these layouts
0:46
other than define some blocks where code can go. So, here we're defining the main content block and providing a default value, no content
0:54
if they don't fill it out. Okay, so here's a nice block, this is one pretty much every single page is going to be used
1:00
and if not, you can put a little warning here. And also, because these blocks are optional they don't burden the consumers with them.
1:08
So, it's not like if I have five blocks you've got to fill out all five little sections and if you get it wrong it crashes
1:13
no, you can just ignore the stuff you don't use. Because of that, it's generally better to have more rather than fewer sections that these pages
1:20
can punch holes in. You saw in our example we had the title we had extra CSS at the top, JavaScript at the bottom and we had our content block.
1:28
Maybe you have even more that you want to make available or something like that. Be sure to think about how the pages might extend this shared layout
1:36
and where those holes where they can punch common content might go. So, this is the shared layout, the outer shell often you can think of it as.
1:45
And then, if we're going to consume it here we're in the index.html file from the home view. First we start by saying this extends
1:53
the "shared/_layout.html" in quotes don't forget the quotes or you'll get weird errors there. Saying that it extends
2:01
and then we just fill out these blocks here and there, and we say we're going to put some content you know, whatever the content of the index page is
2:07
and this page happens to use Angular, so Angular 2. So, we want to make sure that we're including the Angular 2 JS stuff at the bottom.
2:16
Not super practical or real, but you know it gives you an idea. Like, here's some additional JavaScript
2:21
that this page needs to run that other pages don't so it's going to use this extra little hole this extra block in the layout page to fill it up.