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

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's review the core concepts
0:01 at play with this shared layout.
0:04 So, the first thing is we're going to have a layout page
0:08 that defines the overall structure of our site
0:11 and the way that we do this is we tell it
0:14 this is a definition of a macro
0:16 so we say, metal: define-macro.
0:19 Now, you don't usually have to type this from scratch
0:21 but Cookiecutter creates it for you automatically
0:24 and then just copy it from somewhere.
0:25 But this is how you do it.
0:27 You give it a name, Layout or something like that.
0:30 And then you decide where you're going to allow the pages
0:34 to fill in pieces, so over here we can say
0:37 here's where the content goes.
0:38 Maybe above that we have the navigation and other things.
0:44 Now, because these are optional to fill
0:47 it's generally better to have more.
0:49 So maybe have a place for JavaScript to be injected
0:52 and a place for CSS to be injected in a controlled way.
0:56 If people don't use it, a particular page doesn't use it
0:59 there's no harm, it'll just turn into nothing.
1:02 This is defining the layout page
1:04 and then to consume that, to add a page to your site
1:08 then you going to basically just have a div section
1:11 and here you're going to say, use macro
1:14 and then you want to use this relative file syntax load:
1:19 Now here, we've organized our templates a little bit better
1:22 so this one is in templates/home, and it's index.pt.
1:26 And then we moved the shared layouts
1:28 into a shared folder that's one up.
1:30 So, we can say go up a folder, so got off home
1:33 into templates, go into the shared directory
1:34 and find _layout.pt.
1:37 Then we can put our page contents here
1:40 and we can add our additional JavaScript
1:42 there at the bottom
1:43 so maybe this page requires Angular2
1:46 so we're going to drop that in.
1:47 Again, Angular might actually go at the top
1:49 just because it's one of these single-page app things
1:51 and you want it to run as fast as possible
1:54 and not have those little double-mustache things
1:59 all over the place for just a brief second.
2:01 So, maybe not the perfect example, but the idea is that
2:04 we're going to put that JavaScript, specifically for this page
2:07 this extra JavaScript, at the bottom.
2:10 And that's it!
2:11 These are super easy to use, highly recommended.
2:14 It's basically a mandatory to do something
2:16 like this for your site, and it's great
2:18 that Chameleon has this support.
2:20 Other languages like Jinja also have it
2:22 but it's great Chameleon has good support for it.