2.8 Craft Templating

Hey, welcome back to Up and Running with Craft CMS. In this lesson, we're gonna step through some of the essential things that you need to know in order to write templates for your Craft CMS sites. The first thing you need to know is where the templates are, and where you should put new templates that you need to create. So, if you look inside your Craft folder, then you'll find a folder in there named Templates. Now, all the templates for your site are going to be put in this folder. You never actually need to put any templates inside your HT docs or public HTML folder. Everything happens inside Craft templates. Now even though it looks like these are just regular HTML files, they actually all use the TWIG templating language. TWIG is a PHP driven templating language and basically what it does is it really simplifies the process of outputting content inside your template files. So you don't need to use a lot of really verbose PHP code directly inside your template files. You just use sort of a shorthand and that really streamlines the process of template development. If you have any coding background in a language like PHP or a templating language like Jade, for example, then you probably find that you take to TWIG relatively quickly. And a really good place to get started with learning how to write TWIG Is the TWIG primer that's provided in the Craft CMS doc site. This gives you a really great guide for the kind of things that you're specifically gonna use inside Craft when you're creating templates. And you'll find a link to this primer right below this video. And another thing that you're gonna want before you get into coding templates for Craft is a syntax highlighting package because your templates are going to look to your code editor like regular HTML files, you're gonna need a syntax highlighter specific to TWIG that's gonna make your code a little bit more readable. I'm personally using Sublime Text 3, and for that I recommend this package Craft-Twig. Now this package is great because not only does it highlight TWIG, it also highlights Craft specific things as well. So this is a great one to use. And if you need to install packages into Sublime Text, then I've also got a link to this package control site down below. This will give you the instructions on how to install package control into Sublime Text so you can install that syntax highlighting package. So let's take a quick look at a couple of the templates that are built into Craft by default. So we'll have a look at _layout.html and index.html. So, wherever you see these opening and closing curly brackets, that is TWIG code. Wherever you see these percentages, that means there's some type of logic or functionality from TWIG being used. And wherever you see these pairs of double brackets, that means that in that spot there's gonna be some content output that's come from the database. So, right now all of that TWIG code actually looks pretty plain and white. It's kind of hard to distinguish one bit of code from another. And that's because, by default, given this is a .HTML file, the syntax is just gonna have regular HTML highlighting. So make sure that you've got that highlighting package installed that we just talked about. Go up to View, Syntax and then choose Craft-TWIG. And that's just gonna make your templates a lot more readable as you're working with them. Now, something that you might have noticed is that we've got two files here. One of them has an underscore in front of it, _layout, the HTML, and one of them does not. And that underscore is part of a template naming convention. So, what does that underscore indicate? Well, with Craft templates, you have basically got two types of templates. You have templates that are directly loaded when a visitor goes to a certain URL, and you have templates that are indirectly loaded. The ones that are indirectly loaded have the underscore at the side of their names. So if we take a look back inside our templates folder, you can imagine that the files that you see here load kind of like they would if you were just building a static HTML site. So we have this index.html file here, and that's the file that's gonna load up when somebody just visits the main domain. You have a news folder here. Inside that, you have another index.html file and that's what's gonna load up if somebody visits the main domain slash news. Then you've also got this 404.html file and that's gonna be loaded up anytime there's a 404 error. Then you have these other files with an underscore in front of them. Now those files are only gonna be loaded if one of these other templates tells them to be loaded. So in this case, the underscore layout template file is loaded by the for 404 index template files. So that's what I mean when I say it's loaded indirectly. In the news folder, the entry template file is loaded by the index.HTML file. Now I'll just quickly show you where that's happening in code. So this is our index.html file here, and then you can see in this line it says extends_layout. So that's the point at which our layout file is being loaded in. So if we look inside this layout file, you can see that we've got a basic layout and this layout can be used over and over by other templates. In the middle here we have this section where you can see block content in the block. Now what's gonna happen is this index file here also has a corresponding block, you see here it says block content. So when it extends the layout file, it pulls in all the code from this layout template and it just replaces this block here with the content that you see here. So when you're setting up your templates, that's how you know whether you should be using an underscore or not. If your template is gonna be loaded directly by the CMS itself, then you leave the underscore off. If your template is gonna be loaded indirectly by code that you write inside a template, then include an underscore at the beginning to make it clear that that template file is only ever loaded indirectly. All right, so that covers all the key things that you really need to know before you get started actually coding up your own templates. So in the next lesson, we're gonna go through and we're gonna create a template to display our About Us entry. So i'll see you in the next lesson.