#100DaysOfWeb in Python Transcripts
Chapter: Day 50: Responder framework
Lecture: Using dynamic HTML templates (Jinja2)
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Here's our target application. It's going to look like this. Now what I want to do is have a template that we can use.
0:08
A standard, dynamic HTML template. Now this one I told you was Pyramid and so it's using Chameleon but Responder, as far as I know
0:16
doesn't support Chameleon it supports Jinja2. So what I'm going to do is I'm going to put the HTML already here and we're just going to look at it.
0:22
Because it's not really that interesting and we're just trying to recreate the same thing. So we're going to create a templates folder
0:27
and let's go ahead and actually mark that as a template directory. Here in the _layout.html we have the overall look and feel for our site.
0:36
And it's going to be the same across everything. And importantly notice right here we have our content block and then over here we're just saying this
0:44
extends /shared/_layout.html and here's that content block And this parts pretty static honestly but you could imagine putting
0:55
additional Jinja commands and so on. Gives you enough to work with. So these are in place now how do we use this? Obviously that's not going to work.
1:02
I'm going to say the app and actually I kind of want to rename this. Let's rename this to api. There we go since it's an instance of the api.
1:09
So we'll say api.template and we can give it the name of the template. And this is going to be relative to the working to the template folder here
1:19
So we're going to say it like this. We'll say home/index.html, okay. And then this should get that content and any data we wanted to pass.
1:27
We could pass user equals Micheal or whatever you want. Alright you can do keyword values. I'll expand the dictionary there.
1:34
And it'll be passed to the Jinja template. Alright let's run this and see what we get now. Well it kind of looks good. It looks okay.
1:41
If we compare these though notice there's some formatting that's missing. Alright, for example, this is not so good
1:48
it's suppose to be the right. What's happening? Well the static files over here if we go and inspect element and look at the network
1:55
we'll look at all of it. You can see we're getting 500 errors trying to get access to these static files that don't exist. These really should be 404s
2:03
I've actually submitted an error report like a Github issue, to the project saying those should be 404s but whatever it is
2:10
the point here is that these are not working. We got to now add a static route so that's what we're going to do next.
2:16
But we're already pretty close right? We've got the template up and running. All we got to do is say api.template
2:22
and give it a relative path within the templates folder.