3.3 Use Variables and Conditionals to Configure Templates

Hello and welcome back to top speed HTML developement in Jade. In this lesson, you're gonna learn how to create a config file that you can set up however you want to help you with some of things you'll find yourself often needing to change from one project to the next. To get the ball rolling, we're gonna start with just a simple example where we are going to create a config variable, and we'll use that to set the page title for the overall page. So rather than setting default content here inside a title block, instead we're going to create a variable that you can then change for each project that you create. Now in order to hold our variables, I've created an empty file in the same folder as all our other files and I've named it config.jade. Now in order to create a variable inside this file, we need first to enter a dash, a hyphen. In Jjade a hyphen or dash, whatever you want to refer to it as, lets the system know that anything after that should be executed as code. So more or less, it's treated as JavaScript. Not exactly as JavaScript, but roughly speaking, you'll be able to code things up in the same way that you would if you were writing JavaScript. So we are going to create a variable and we will name it, PageTitle and we'll give it a value of learn Jade. So now we have our PageTitle variable, and we've given it a value, and we want to pull that into our main doc wrapper. So the way that we do that is using the same method that you used earlier to pull content into a template, and that is the include keyword. And just as we did before all we need to do is type out the include keyword and follow it up with the name of our file. Now I want that PageTitle variable to be the default content of our title block. So I'm gonna use the pipe symbol that we need whenever we wanna place text. And I'll start just to show you by typing out the variable name. However, what you need to do to let Jade know when there is a variable that you want to use in text is to use a technique called interpolation. And interpolation is just a fancy way of saying that you're inserting something. The correct syntax to use interpolation is a hash followed by curly braces. So we will enter a hash before the variable name, open curly braces, and close curly braces. Now when we save and compile, what we should see is that the PageTitle variable, here has had its value inserted here. So let's look. And there's the value that we have set against our PageTitle variable, right there in our title tag. So now if you wanted to change the default page title, all you would have to do it make a change here, and there you go. All right, let's add a couple of additional config variables into the mix. Now we've looked at how you can create overridable metatag sections, and the primary reason that we're doing that is so that you could have a unique meta description per page. So lets try doing this by using our config file instead. So remove the block that we created earlier. And because this is no longer part of a block, I'll just out dent it, the opposite of indent and then we'll follow the same process and create another config variable and this time, it will hold our meta description. So again, we have the hyphen followed by the variable and its name, and then we give a value for that variable. We'll save that, and this variable will now be available for our docwrapper file. And the way you can use that is by setting the variable as the value against the attribute that you needed to be fed through. So we have the name, description, attribute that doesn't need to change from one file to the next, but the actual content value that is what does need to change. So we've created our meta description variable. We've given it a value and then we've placed that variable into the attribute for our metatag. And now again, when we save and compile that, we will see the information from our config file passed into this metatag. And there is our meta description tag. And you probably picked up that that is going to need to change from one file to the next. You're not going to want to just have one meta description on every page and we will be covering that shortly. But before we do that, let's have two more quick examples of the kind of things that you might find yourself wanting to include in a config file. I find in my own projects that I am using Google Fonts and that I continually need to use the same code to embed Google Fonts. I also often find that I'm using jQuery, but not always. So I'm going to show you how you can use your conflict file to conditionally load in jQuery when you need it and to conditionally load in Google Fonts. I'm just going to paste in a couple of extra variables into our conflict file. We've got a GoogleFonts variable here, and this is the name of one of the fonts that you will find available through GoogleFonts. And the second one is fairly self-explanatory, this is jQuery. And we have used a boolean value here, so we're either setting jQuery to true or false. We'll set it to true when we want jQuery to be loaded, and false when we don't want it to be loaded. I'll save that to make the information available to our docwrapping file. And I'll just quickly grab some code to paste in here. Okay, now what is happening here is, the first thing that we are doing is checking to see if the GoogleFonts variable has a value. If the GoogleFonts variable has a value, then this code will be added into our header. This is the standard URL that all GoogleFonts are loaded from. And we are taking our GoogleFonts variable to grab the name of the specific font that we want to use. Now if you don't want to use GoogleFont, all you have to do is not include anything for this variable in your config file. So you would just comment out that variable and leave it empty. Now we have a similar thing going on with jQuery. We have the address that we're loading jQuery from, and first, we're doing a conditional check. So this says if jQuery, so that's basically just a shortcut to say that if jQuery equals true then, load the script. But, if you don't need jQuery in a project, then you can just set that variable to false and you won't be loading in jQuery unnecessarily. Now just to show you before we load this up. This is a header that has our GoogleFont applied to it. However, because we are not loading that GoogleFont in yet. You can't see the formatting, but you will see it after we save and compile the changes that we just made. So we'll go ahead and save. And now you can see in the header, we have the link to the GoogleFont, and we're also pulling in jQuery. So that's worked beautifully. And the same thing will happen if we now set this to false, we save and then we recompile. And now you can see that the link to jQuery has gone. So that's a really good way to give yourself a set of shortcuts that you can use to load scripts that you are often using, depending on what you need. And now we will also see when we refresh our page, that the wellfleet font is available and we should see that formatting on the heading tag that's sitting in the page, and sure enough, there's a GoogleFont. So that gives you a really easy way to include GoogleFonts, depending on what you need for your protect, you just add in the list of font names and waits in the format that google font provides. In the next lesson, we're going to take this config file one step further and show you how you can override the values that you've set in your config file on a page by page basis.