Full Web Apps with FastAPI Transcripts
Chapter: Dynamic HTML templates
Lecture: Concept: Shared layout
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
One really important thing you want to keep in mind when building web applications is how
0:06
are you gonna have some shared look and feel, some common look for your application. Let's take the Talk Python To Me podcast website
0:14
for example. Here's the home page you can see we have the navigation across the top. We have this Linode sponsorship bar and some general styles.
0:21
There's, in fact, a bunch of other stuff going on, like CSS, like JavaScript like analytics and whatnot that you don't even see here as
0:29
well. But obviously the calm look and feel, it's the same, right? Over here, go to the episode page, similar navigation along the top,
0:38
similar style sheets and whatnot. Going to a particular episode, Surprise! Same banner, same navigation, same style sheets and so on,
0:47
maybe some extra ones for this particular page. But in general, it's the same. So having this one look and feel for your site is really important,
0:56
and what we want to do is we wanna make sure that we write a single HTML page, put that code into one place and use it throughout the entire site
1:05
So when we make a change, let's say we want to change that banner or we want to add a new navigation element,
1:10
we change it in one place and everything changes. So there's all sorts of benefits to having these layouts that are shared.
1:17
It's not just the look and feel. That's the obvious thing. But you have much more consistent things,
1:23
like a consistent title. Or if you've got meta description or meta other info in the head of your document, that will all be the same and shared,
1:32
and if we want to make a change. You do it in one place. You have consistent CSS and JavaScript files not just having the same ones,
1:39
but in exactly the same order all the time. Consistent analytics. So if you want to do something like have Google Analytics that tracks
1:47
people on every page, I don't do that in my sites with Google Analytics. But if you want to have something like that, you could add that, say
1:54
at the bottom of your shared layout and every single page is always gonna have the same analytics. This one's slightly less obvious,
2:02
but it's really important. You have a structured way for every other page to bring in it's extra CSS.
2:08
So imagine that that episode page had an extra CSS file, an extra JavaScript file
2:13
I wanted to bring in. You could have certain little parts in that shared layout That's here's where that page can bring in its extra files.
2:20
You can do that in a really consistent and structured way, so these are super useful and we'll see how to add them now.