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 index.pt. 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 _layout.pt. 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.