4.4 External Markdown/HTML Content via Includes

Hello, and welcome back to Top Speed HTML Development with Jade. In this lesson, you'll learn how to pull in external content from separate files that are either in markdown format or HTML format. And the reason that you might find yourself wanting to do this is, as you develop a templating system, you will probably want to keep a separation between files that are part of your templating, and files that are part of the actual content that you want to bring in to your templates. So I personally find that I like to keep my content in a separate content folder. And that's the structure that you're seeing in this Prepros Project on your screen. Inside the jade folder, there's a folder named content, and within that folder, we have an external_html document, and an external_markdown document. And we're going to be pulling both of those into the templating system that we've been working on throughout the previous lessons. But before we do that, there's one thing that we want to do with our Prepros Project, and that is to prevent the markdown files in our content folder from automatically compiling. By default, Prepros will pick up that there's a markdown file here, and it will be set to automatically compile. But we don't want that because we are going to be pulling it into our templating system. In fact, we want Prepros to ignore this whole content folder. So everything that's inside the jade content folder, we wanted to just leave along. So to do that, hit Up and click the More Options button. Go to Project Options, and then go to Filters. And this is a list of all of the folders that Prepros will ignore. So enter a comma, and then we're just gonna put in the path of our content folder. Save that. And now the content folder, you can see that it's no longer appearing here, and that means that Prepros is not watching it. And it's not going to automatically compile the markdown files that you create into their own individual HTML files. And from here we're ready to go with importing the HTML content and the markdown content into our template file. Now previously you were either including a Jade file into the block content, or you were writing Jade code, or in-line HTML straight into this content block here. This time we are going to pull in our external documents. We have an external_markdown document here, and we're going to have all of this code placed inside our content section. And to do so, that's really quite easy, again. We're using the include key word, but now because we are including a markdown file, we're going to combine the include key word and the markdown language filter. So we're going to add a colon and the word markdown. And now we can enter our path to our external markdown file. And we'll save and compile. And there is our HTML, so what that has done is not only have we been able to import our external_markdown file, but we've simultaneously been able to compile it into HTML. And that gives us this. So the big perks of being able to keep your markdown files separate are, if you're writing them in a code editor like Sublime Text, you have the correct formatting, which you won't get if you're writing inline in your Jade files. If you write inline in your Jade files everything would just be white, so by keeping your markdown files separate, you'll get all of the helpful syntax highlighting. It also means that you could write your markdown files in whatever your preferred markdown editor is, then just have your markdown files, your finished markdown files, imported into your templating system. And you can also follow much the same process for importing an external HTML file. So, you might also have an HTML, say a Wysiwyg HTML editor that you'd like for creating your content. Or you might have existing HTML files that have come from some other source, and all you want is to pull in that existing complete HTML file into your template in your system. So that's even easier than pulling in markdown. All you need to do is use the include keyword once more. And this time you don't even need a filter because HTML can be compiled as is into your HTML document. All you need is the path to the external HTML file. And save and compile, and there is all the external HTML from our original HTML file. And that give us this. So that means you can also combine different files together into a single template. So those techniques are both very easy to do, but they give you a lot of different options. In the next lesson, you're going to learn how to start using JavaScript processes in your Jade files. Jade operates in many ways just like JavaScript. So that means that a lot of the methods that you might use in JavaScript carry over and work equally well in Jade. So we'll look at that in the next lesson.