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.


Talk Python's Mastodon Michael Kennedy's Mastodon