Full Web Apps with FastAPI Transcripts
Chapter: Dynamic HTML templates
Lecture: Creating the shared layout HTML file
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So we just talked about how important it is to have a shared common layout for the entire site. You wanna add a CSS file to the parent site,
0:10
put it in the layout. You want to change the title? change it in one place. You want to add some JavaScript? What's, includes over there.
0:18
So that's really, really important for having navigation for common look and feel as well as those other things. So let's go and do that here.
0:25
So what I'm gonna do, I'm gonna start out first by creating a real simple version that
0:29
we can see. And I'm gonna drop in the actual version that we're gonna work with. So I'm gonna create a place called "shared" over here. And in here I'm
0:37
gonna create a file, an HTML file called "_layout.pt" My convention is: an underscore means you're never really supposed to use this directly,
0:48
but it's supposed to be used as part of building up something larger. Then I'll call this "PyPI site", and then we wanna have some content here.
0:58
This could also have a footer. "Thanks for visiting". Now in here, let's have some content in our site.
1:05
This is just a CSS class that lets us maybe style it or add padding or something like that, because we could also have,
1:12
like, a <nav> section or whatever. And in here, I would like to say: other pages, you can stick your content right here.
1:21
Everything else will stay the same. But you control what goes in here. So the way that we do that in Chameleon is we do what's called defining
1:29
a slot. So let me just change this names. They have nothing really to do with each other, other than, like, conceptually, you're styling
1:36
this thing. We've got our main content CSS and we're gonna call it content from the other pages. And if they don't put anything here,
1:44
it's just going to say no content. All right, But if they do this whole <div>, it's gonna be replaced with whatever that page wants to do.
1:54
So let's go and change our home over here. Not do all of this stuff up there, not worry about this, not worry about that.
2:04
It's just going to do this one thing here. So what, we're gonna do is gonna have a <div> and put that stuff into
2:09
there. That's the way Chameleon likes to work. Always likes to be valid HTML. Now, in order for us to use this,
2:16
what we need to do is we need to go over here and use this template language. Notice here there's "metal",
2:22
we've got tal and then metal, the metal one is about these templates and so on tal is a temporary attribute
2:30
language. So what we gonna do is we're gonna say "use-macro" and the easiest way to do this
2:36
is say load:, and we give it the relative path from this file over to shared over to "_layout.pt". What do you get named pt.html? Let's rename that.
2:50
There we go. layout.pt, could be HTML, could be pt, "pt.html" is kind of weird. OK, so there and then we need to go over here and say,
2:59
there's a section that has this content and it's gonna be metal:fill-slot="content" and we don't want this tag to be part of this.
3:12
Will say tal:omit-tag="True". So just this content is going to go into that hole. You want to tighten this up a little bit.
3:24
All right, that should have no real change. Our code should still run. What's gonna find this index.pt when it starts
3:33
to render through Chameleon, Chameleon will read this, go well, we've got to go get the overall look and feel from here and just to make
3:40
it, I don't know, feel like it's got something going on, let's put a little style in here. body background. Let's make it a really light green.
3:50
We do that by something like that, just so you can see some sort of common look and feel being specified here. We run it. We should get this new view.
3:59
Must have made some kind of mistake, and I have not. Awesome! We've got our PyPI site and we've got our footer and then this comes from
4:07
that particular page. Let's go. And not you, View Page Source, let's view the whole source. There we go. That was cached or something.
4:15
So this comes from the overall layout page. This comes from the overall out page layout page, and this is what our index had to contribute.
4:24
Well, with that in place, let's do a real quick navigation thing. Actually, here, let's just do a <div> that has two hyperlinks.
4:32
One is going to be slash home and one is going to be about. We'll do better navigation in a minute, and let's go and add one of these
4:42
for about so these are views. It's down here. We're gonna add another template.
4:49
And if we call this in the home folder about.pt, it'll automatically find it which we will. Now the way I find the easiest to create new pages
4:59
is just find a simple one of these and copy and paste it because the top part is always the same she'll say about and this will just be about PyPI
5:12
something like that. If we run this again. Now, we should be able to jump around. If we go to home, we're here. If you go to about, about PyPI.
5:24
You can tell the formatting is totally wonky. We need spacing and whatnot, but check that out.
5:30
We've got our common look and feel We've got our styles coming across. We got our footer very, very cool, right? So this is how we're going
5:38
to create this common look and feel over here in our FastAPI web app. Well, really, we're just leaning on Chameleon. OK,
5:46
this overall common look and feel here. And then within one of these, we just say, here's the overall layout and then we're gonna fill various slots.
5:56
You can have multiple ones of these, like we could set the title and so on. But we don't really need to go into that right now.
6:02
This should give you more than enough to know what to work with here. So I think this is a really,
6:06
really good idea for building maintainable apps because you define your layout once, and then you're good to go.