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:47
We want to have the same CSS and same JavaScript files. Often we organize these very specifically like the CSS is at the top.
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:11
Also, we might put the JavaScript files at the end so that the page gets a visual load quicker and then brings in the JavaScript files.
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:25
that we have our Google Analytics or get Clicky analytics little JavaScript tag on every page, if you want to add analytics your site.
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
2:48
the CSS and JavaScript definitions. Like we maybe want to make sure that they can only go after the pre-included JavaScript
2:55
or after the pre-included CSS. Maybe one of our pages is a front page sort of front-end framework type of JavaScript thing
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.