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.