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