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