3.1 Creating Parent and Child Templates

Hi, and welcome back to Top Speed HTML Development with Jade. In this lesson you're gonna start the process of learning how to use Jade as a templating language. So you'll be able to take the type of code that you learned in the last section, and use it to create your own boiler plate systems. And that will help you to create much, much more efficient development processes. And we're picking up exactly where we left of in the last lesson. So you have your basic page structure here ,and this is going to act as the very base foundational level for your templating system. What you have in your doc type, your HTML tag, your head title, metatag, all of that generally speaking isn't going to change a lot from project to project. And the type of changes you will have from project to project will be catered for, as part of the system that you'll be creating. Now we're gonna get started with just some absolute basics. Now we already have a style sheet loaded in, in the same way that you learned earlier in the course. So the next thing that we're going to do is add a little bit of layout to our body, and to do this we're going to replace the comment that I added in the last video as a placeholder. Now we have a little code that I already prepared earlier just to speed things along. So we've added two main layout sections. We have a nav section, which will be the header along the top of the site, and we have the main section where the content will appear. Inside the nav we have a wrapper class that is housing a linked image, as well as a little bit of header text. And all of that, when we save and compile, produces this HTML that you see on the right side of your screen here. And that comes together looking like this. Now what we want to do is use the templating capabilities that are available via Jade to be able to replace this place holder content in the header, and this place holder content in the main section. There are two different Different ways that we're going to cover how you can do this. And the first is, including content from an external file. In this case we're going to be using the include keyword, to pull in content that has been written up in a separate Jade file. So we'll head back over to sublime text. So, I have already created this file named headertext.jade. And this file is just saved into the exact same folder as our existing document structure file. And we want headertext inside this file to appear inside the header area that we've already laid out in our main index file. And that's actually very easy to do. So we'll delete our placeholder, and all we need to do is just type out the keyword include. And because our headertext.jade file is already in the same folder as our index file that we're working on. All we need to enter is the name of the file itself. Now you don't even need to include a .jade file extension. If there is no file extension added to the name of the file that you're including, it will be assumed to be a jade file. So this makes it very easy to pull content from one jade file Into another. So we'll just save that and compile it. And you can see the results. So there you go. The text from our header text file has immediately been entered into our header text area. And we'll just have a look at how that looks in the actual site. So there you go. You've got your text pulled in from your content file, and placed into the appropriate location in your main template. Now let's have a look at doing the same thing with the content. Now, again we've created a separate content file, to house the content that we want to have appear in the main part of the site. And the process is exactly the same. All we need to do is type out the keyword include, and enter the name of the file that's holding our content. Save and compile. And there you go, all the content has been immediately placed into the template. Now what that means is, you can take this same base template, and you can spin it as many times as you need. You can create a different header text file, you can create a different content file And you can continue to make as many different versions of this base template as you need. That's a very simple, straight forward way of setting up a really, really powerful templating system with Jade. But, there is an even more powerful and more flexible method using the keywords block And extends. And that's what we'll cover now. In the example that we just looked at, this was our file structure. Our main file was index.jade, and we had our doctype HTML, and so on, all of our essential structure inside index. And then we included the header text and content files into that. Now in the second example we're going to flip that around a little bit. Instead of index dot jade being a file that we pull content into. We'll create index.jade as the file that houses the content, and that will use the extends and block key words, to build on our initial document wrapper code. Now that might sound a little bit confusing, but it'll be very easy to follow as we go through it. To start with let's have a look at the code that in our last example we had in the index.j code. Now this is the exact same code giving us all the same layout, but this time we have it saved in a file called docwrapper.jade. Now what we're going to do is create an index file that will build on this base template. What you're also going to need to do as you set up this project is head into pre-pross, click on the project and then click on the docwrapper.jade file. Now we actually don't want this to automatically compile, and you'll see why shortly. So just make sure that this box here is not checked. And then what we're going to do is create our index file in a way that it will hold the content, and pull in the template. Rather than creating the template first, and pulling in the content. And the way you do this is using the keyword extends. And then very much in the same way that we use the include keyword, you just need to enter the file name of the template that you're wanting to build on, which in this case is docwrapper. Now if I save and compile- You'll actually see that the index.jade file has been compiled into the index.html file, but it has pulled in all of the code from our docwrapper file. Just to show you that a bit more clearly. Let's just turn this into a pipe symbol, and now you'll see you can see here this content has come straight from the docwrapper. Even though the file we're actually compiling directly Is the index.jade file. And that's why you don't want to automatically compile that docwrapper.jade file, because it's all gonna get pulled in to the index.jade file via the extends keyword. Now the next part of this process is where this gets really cool. The counterpart to the extends keyword is the block keyword. Let's have a look at a docwwrapper file. Here, instead of using text to set our page title, I've used the key word block. And I've then given the block that this creates the name title. Now what a block is in jade Is an empty placeholder, it's something that you can then replace with a block of whatever code you choose. Now if I head over to my index file, where I'm extending the docwrapper template, I can now say what I want that block title to hold. And now we save and compile. We should see this page title text in between our title tags. And there you have it. So, now instead of having to create individual context files to include for every time you want to build on a template, all you need to do is set up block place holders. And then fill them out inside the template that you are extending on your base template with. Let's add a couple more blocks to our docwrapper, and then define them in our index.jade file so we get to the same point. So that our site looks the same as it did at the end of the last templating method we covered. Now, instead of using an include for our header text, we are going to use a block. And the same thing applies in our main section. Instead of using an include, we'll use a block. And now, just grabbing some code that I prepared earlier. Instead of having to create individual files for the header text and the main content area. We can just use blocks. So, we have a block with our header text, and we have a block with our main content. Now, if we save and compile we have all the HTML that we were trying to generate. And if we have a look at that in the browser. We have the header text in place. We have our page title. And we have all of the content that we defined in our index.jade file. You might notice something interesting about what you're seeing on this page. And that is the page title up here. That we have in our head section title tags, is the same as the text we have here in our H1 element. Now how is that happening? The way that this is happening is because once you create, once you define a block in a Jade template file. You can then reuse that block anywhere on the page. We have set some content, against the block title up here. Now, we can reuse this information anywhere on the page. Because we want the page title in this case to match the heading for the page. We can just reuse the block title down here inside our H1 element. And now if I'm to change that, let's say we change that to use block and extends. Which is what we're covering right now. Save and re-compile. We should see that not only the page title changes, but also the main heading for the page itself. Let's have a look. And there you go. Now you have a matching page title here. And a matching header, here. So once you define, once you give some value to those blocks. You can then reuse them repeatedly, any way you like in the page. Now the next thing that is really, really awesome about this whole process is, you can now make as many different templates based off of DocWrapper as you want. So, let's have a look at an example. Let's just save this index file as, we'll call it about.jade. And now, we will just give it some different content. About Us, Give it some different header text, Teaching About Us, and we'll give it some content, Things About Us. Now, we'll save that. And Jade will have automatically picked up on the fact that there's a new Jade file inside the project, and it will compile about.jade into about.html for us. The extends docwrapper line will pull in our base template. And then the rest of the code on this page will fill that base template with the content that we've defined here. If we head over to our browser, type in the address of the site of the page we just generated. There you go, and that's how easy it is. So you'll be able to generate as many different pages for a static website as you could possibly need. All you need to do is just make a new template that extends your base, give it new block content, and away you go. In the next lesson we're going to take things a little bit further with using blocks. And you're going to learn how to append and prepend extra information to blocks that have already been predefined in your base template.