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
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.
