3.2 Append and Prepend Blocks

Hi, and welcome back to Top Speed HTML Development with Jade. In this lesson you're going to learn about how to append and prepend to blocks. So we're picking up exactly where we left off in the last video. Now you don't necessarily have to completely give your block's value within your template that you are setting up all your other content in. You can actually set up default content for your blocks in your base template. So in the last video, we created a header text block that gave us the content that we have up in the header here. Now that's one way to go about things, but you can also, we'll just comment this out. You can also give some default content in the parent template. So let's say Default Header. So now when we compile our HTML, we should still have header text here, but because we are not longer defining it in our index.jade file it should give us the default content that we have setup In our doc wrapper file. So there you go, the Default Header text has now been included here. Now that we have some default content set for that block, what we can do is we can append to that block, which means to attach something at the end, or we can prepend to that block, meaning we can attach something at the beginning. So, to append to a block, all you need to do is type out block append, and then the name of the block to which you want to append. So, we'll add a little text. And we'll just say appended to header. And now when we save and compile we should see ...appended to header added in here. So there you go, that's how easy it is. And you could do the same thing adding some content at the beginning of this section. It's the same process, just instead of using the keyword append, you use prepend, block prepend headertext. And we will, this time, prepend. Prepend to header. And the same thing again, you can now see that there is text added at the beginning of that section. Now why is this useful? Yes, sometimes you might want to just insert a little bit of extra text or, add in perhaps some footer notes. But it can be very useful in a more functional way than that. For example, in our current doc wrapper we have a metatag for the description, however we really need to be able to set up a different meta description tag on a page by page basis. So, what we can do is set up a block that controls all the metatags. So we will indent all the metatags and then we're going to nest them underneath a block called metatags. First three metatags we have in here we know that we want to load in all cases. But, this last metatag we want it to be different on a page by page basis. So we'll remove that from the base content that's gonna go into this metatag's block. Now in our index file, we're going to append to that metatags block. And what we'll append is the page by page meta description tag. So we write block append metatags. And we paste in the description that we took from the main page. So now, right now that will stay exactly the same. But what we can do, is create a unique entry per page. We save and compile, and now you can see you've got that unique entry every time. So you've still got the default metatags that will appear every time you extend your base doc wrapper, but you have the ability to now append a meta description that works for each individual page that you create. Another example of where this can be really useful is if you need to load in a style sheet to create some styles that are unique to your individual page. So let's say for example your links on your regular page are blue, but on one page, you want them to be red. You would choose the same method that we just did with the metatags and this time we're going to turn the area where we have linked in our style sheets into a block that can be extended. So we'll say block stylesheets, and then we will tab indent our existing link so that it becomes the content, the base content, for the stylesheets block. Save that, and now we're going to append to that block in our individual template file. So what I'm doing here is I'm loading in an additional stylesheet by appending the link element to the existing stylesheets block. Now just before I save and compile that I'll show you the current link color. So we've just got a blue link color set. And I have some CSS that I wrote for this earlier, which will overwrite those colors to be red. So I'll save and compile. And now you can see that the link color style sheet has been loaded in. And if we head over to our page, now our links are red. So whenever you need to load in some custom CSS, that's another really good way that you can take advantage of the ability to append or to prepend to custom blocks. So you might need to load some CSS in before the default style sheet, and you're gonaa be able to do that by swapping the append keyword for prepend. And just finally the other thing that I want to touch on is that you don't need to include this block keyword when you're appending and prepending. It may help you to just remember exactly what's going on but if you drop this block keyword all together when you're appending and prepending, it will still work in exactly the same way. You can see there that the HTML that we have after compilation has not changed at all. So it's just a shortcut if you prefer to just write prepend or append when you are working with this method. And with these techniques you're starting to build up a system where you can push out static web pages really quickly but you can also individually configure each one of the pages that you produce. Now in the next lesson, we're going to add even more ability to configure how each one of your pages come out and how your overall template is being deployed by using Jade's variables.