10.1 Template content - Video Tutorials & Practice Problems

<v Instructor>We've talked about the idea of a template,</v> several times so far. But it's probably a little bit abstract at this point, we're gonna make it really concrete, right now, in this section. This is really cool. You're gonna see just how easy Jeykll makes this sort of thing. <v Man>Jeykll magic.</v> <v Instructor>Yeah, it's Jeykll magic.</v> So all we're going to do is take this content here that is specific to the index page, and we're going to move it into index HTML <v Man>Below the front matter.</v> <v Instructor>Right, below the front matter it's important.</v> And then what we're gonna do is in the default template, we're just going to add a little bit of liquid syntax that looks like this. So this is a variable, you can think of it as just like a box that contains the content of whatever page we're rendering. So right now all we have is the index page but this default template will now work for any page that includes layout default in the front matter like that. <v Man>How much cleaner that is.</v> <v Instructor>Yeah, you can see</v> just how much simpler it is. So right here the structure of the page is really clear. <v Man>And this was what I meant when I said that</v> normally when you're working on Jeykll project, you would start making this first with these little includes in the content tag, and then you'd add the content in those individual files. You probably wouldn't start with a monolithic big giant HTML file. <v Instructor>Right, so this is</v> a more typical appearance of a template. So you've got some includes, and then you've got the content here. Notice that there is a slight difference in the syntax these here are including an actual file, and so here we have this quarterly brace in a percent. But here we're actually inserting the contents of a variable, which in this case is a default variable created by Jeykll automatically from the content of this page. So it's a slightly different syntax two quarterly braces on each side. So let's take a look at the result of that. We refresh this shouldn't change, but if we remove this we can see that it'll just be the default layout. So if we restore it, there it is. You can also note that if we accidentally use this syntax. So it was just the same there that's because Jeykll is serving up the page that it used to be. But if we look at the output here, there's error it says, unknown tag content. It's useful to look at the output of the Jeykll server that you get from Jeykll serve here, in order to debug any issues that come up. But here we go. So we'll be using this template later on in this chapter to create more than one page and we'll be inserting this content dynamically, which is then built into the page here in the Underscore site directory. This gives us a lot more flexibility in developing websites because it lets us reuse all of this content. Head, header, footer and so on, that we saw here and then just insert the content for each individual page separately. This is the right way to do things. This is solving the problem that we encountered and learned enough HTML to be dangerous. And so this, this is it. This is the industrial strength solution to the problem of how to make a website that has repeated content on each page and then has variable content that depend on the particular page you're rendering.