Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Chameleon templates
Lecture: Concept: Layout

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's review the core concepts at play with this shared layout. So, the first thing is we're going to have a layout page
0:09 that defines the overall structure of our site and the way that we do this is we tell it this is a definition of a macro
0:17 so we say, metal: define-macro. Now, you don't usually have to type this from scratch but Cookiecutter creates it for you automatically
0:25 and then just copy it from somewhere. But this is how you do it. You give it a name, Layout or something like that.
0:31 And then you decide where you're going to allow the pages to fill in pieces, so over here we can say here's where the content goes.
0:39 Maybe above that we have the navigation and other things. Now, because these are optional to fill it's generally better to have more.
0:50 So maybe have a place for JavaScript to be injected and a place for CSS to be injected in a controlled way.
0:57 If people don't use it, a particular page doesn't use it there's no harm, it'll just turn into nothing. This is defining the layout page
1:05 and then to consume that, to add a page to your site then you going to basically just have a div section and here you're going to say, use macro
1:15 and then you want to use this relative file syntax load: Now here, we've organized our templates a little bit better
1:23 so this one is in templates/home, and it's And then we moved the shared layouts into a shared folder that's one up.
1:31 So, we can say go up a folder, so got off home into templates, go into the shared directory and find Then we can put our page contents here
1:41 and we can add our additional JavaScript there at the bottom so maybe this page requires Angular2 so we're going to drop that in.
1:48 Again, Angular might actually go at the top just because it's one of these single-page app things and you want it to run as fast as possible
1:55 and not have those little double-mustache things all over the place for just a brief second. So, maybe not the perfect example, but the idea is that
2:05 we're going to put that JavaScript, specifically for this page this extra JavaScript, at the bottom. And that's it!
2:12 These are super easy to use, highly recommended. It's basically a mandatory to do something like this for your site, and it's great
2:19 that Chameleon has this support. Other languages like Jinja also have it but it's great Chameleon has good support for it.

Talk Python's Mastodon Michael Kennedy's Mastodon