Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Jinja2 templates
Lecture: Layout: Motivation
Login or purchase this course to watch this video and the rest of the course contents.
0:00 We've seen how to create individual templates. But as you'll see as we build up this application, that's not enough.
0:08 What we want to make sure that we do is share the exact same look and feel for the entire website across every page we make.
0:16 And ideally, we would like to just add the Delta we want to just create what is special about that new page, that new view that we're creating
0:25 and have it adapt to the existing ones. So we're going to talk about shared layouts with common templates.
0:30 And let's just see why you might care about that. So let's just use a common website that you may know of, as an example here, this one talkpython.fm.
0:41 There's a lot of web design going on. But there's also analytics. There's also things like indicating the RSS link for the podcast on every page
0:50 all sorts of stuff like that we got this top nav bar, the scroll bar section and so on, we want to have that shared across every page
0:57 so not just on the homepage. But when you over to the episode list you want to see that same look and feel When you dig into an episode
1:04 you want to see the same look and feel. So you can imagine that this website the one I built here, uses exactly this concept.
1:12 It has a layout, common page that defines things like the CSS the order in which it's included all those kinds of things the nav bar and whatnot.
1:22 And then each page punches a hole into that and fills in its specific content. So this is super important. It's not just about look and feel though
1:30 it's other things like making sure we have a consistent set of information. The top we might have a description we might have a title, we have CSS
1:39 maybe some fallback CSS for older browsers that's becoming less important. But still all that stuff at the top you want to make sure that's consistent.
1:54 And because they're Cascading Style Sheets the order very much matters. If I include something that maybe changes a Bootstrap style
2:02 and I put my CSS and then Bootstrap well, Bootstraps going to ignore that or basically erase that things like that. So the order is super important.
2:18 You know, the first time a little bit slower but then of course, it's cached so it'll fly. But also analytics, we want to make sure
2:33 But if you do, you don't want to have to think Oh, I added a new site did I remember to put the analytics on there? Or if you change something about it
2:39 remember to change it for, no you put it in this one common layout, and then you share it. We also want to be very careful about how other pages change
3:02 it uses Vue JS, well, you want to make sure that that gets included but just for that page. So you want to create ways in which the pages
3:08 can push back to the common layout to inject those but in a controlled way. So there's this and way, way more
3:15 you want to create these shared layout pages for and luckily it's super easy and Flask and Jinja.