3.4 Override Config Variables Per Page

Hi and welcome back to top speed HTML development with Jade. In the last lesson you learned how to create a config file that would enable you to set up some defaults for you overall size. In this lesson, you're going to learn how to override the variables that you've set in that config on a page by page basis as you need to. You should find this technique pretty easy to pick up because you've already learned how to do it in a previous video. What we're going to be doing is using the block and append technique that we already covered to work with your config file. Now, we already have our config file being included into our base template with our line here that says include config, so this basically just takes the content from our config file and places it right here. Now what we're gonna do is turn that content into a block that can then be appended to. To do that, all we need is to tab indent that line, and, above that, we use the keyword block, and we need to name our block, and we'll name it config. So now, when we extend our docwrapper template in our index file, we can also append to that config block. So again, drawing from what we already covered in a previous video, we just need to use the keyword append, and then the name of our block, which is config. And now, we can append new variables with different settings and they will override the variable settings that we already have in our main config file. For example, our config file currently sets our page title as Learn Jade. So we have our page title here in our main heading, and up here, in between our title tags. Now, we can take this variable, and we can create a new entry for it, here where we're appending to our config block. So we'll just paste the variable in in exactly the same way, but we will give it a new value. This is our HTML. You can see we have Learn Jade up here in our title tags, and we have it down here in our h1 tags. Now, if I save and compile, we can see that we have the new value here and up in our title. And there we have it in the live site. And you are gonna be able to do this for any of the variables that you set in your default config settings. If you don't add anything for a particular variable to your appending config entry in your individual template file, then you'll just have the default that you set in your config come through. So another example is our meta-description variable. Right now, because we haven't overridden the config file meta-description variable, our current meta-description pulls from the default value. But we can do the same thing, and we can override that setting in our individual page. So again, we've just used the exact same variable name, but we've given a new page-specific value. So if I save and compile, there is our individual, page-specific, setting for that config variable. And the same thing also works if you want to enable or disable jQuery on a page by page basis. So we just copy the original variable, paste it into our appending area, and then just change the value. So right now, jQuery is set not to load by default. But let's say there's something on this particular page that you need jQuery for and you don't need it elsewhere in your site. So in this one page, you can set jQuery to true, save, compile, and now, jQuery is being loaded in this page. So then that can help you prevent excess loading of resources that you may not need on every page of your site. So those are just a few basic examples of the kind of things that you can configure using this technique of having a base config file with default settings and using the ability to override those defaults on a page-by-page basis. You can do anything that you can imagine with this approach. You can use this to load in scripts depending on the page. You can use it to load in image resources, CSS resources, to load in font files depending on what you need to do. It really gives you a very, very powerful and yet still very simple way to create a templating system that's gonna give you lots and lots of shortcuts that are very, very customizable depending on your own unique workflows, and what you need for each individual project. In the next lesson you're gonna start learning how to incorporate different languages into Jade. One of the coolest things about Jade is not only is it an exceptionally powerful language in its own right, it will also allow you to work with multiple other languages right inside your Jade files. I'll see you in the next lesson.