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