Now let's talk Antlers. We've been using it as we've been building different sections of the site, but we haven't gone in depth and I haven't really explained everything you can do, and really why even it exists when there are things like Blade and Twig. So first, Antlers is designed to be a controllerless template engine. The idea being you don't need to write a controller or need to write separate code elsewhere in order to fetch your data, inject it into the template, and then work with it to write your own HTML. We wanted an engine that was extendable and was tightly integrated with the core of the CMS. For the entirety of this course we're working with the runtime Antlers engine, which was

tightly integrated with the core of the CMS. For the entirety of this course we're working with the runtime Antlers engine, which was released in 3.3. Prior to that, 3.2 all the way back to 3.1 was using a Regex version of this parser. Now the template language and the syntax is the same, but the whole machine underneath that runs the template engine has been completely rebuilt, extended for a whole lot more power, more syntax, more operators, more things that we weren't really able to do with Regex. More than that, this is an AST style parser, which is an abstract syntax tree.

we weren't really able to do with Regex. More than that, this is an AST style parser, which is an abstract syntax tree. It operates in two passes. The first pass parses the template from top to bottom, works out all of the partials, everything that's been included, and then goes back and evaluates with that in mind. So this allows you to do a lot of things that aren't possible with Blade or Twig or other engines that are not ASTs, because code out of order can affect earlier level code. For example, with our Regex parser, you couldn't set variables and then have them be available earlier in the template, so we just didn't support it at all. Now you can create variables and they'll be

set variables and then have them be available earlier in the template, so we just didn't support it at all. Now you can create variables and they'll be available all throughout your template, into partials or up into the layout and things like that. It's very powerful and allows you to do things, honestly, that other template engines just can't. And that's why it exists. So with that in mind, let's go through a lot of the things that it can do, all the basics, some of the advanced stuff, and then I'll point you to the docs so you can dive a little bit deeper if you'd like. This is the Antlers Toolbox. It is a really powerful VS Code package for working with Antlers, and it

a view namespace. There's also the page namespace, the global namespace, and this just allows you to access variables without colliding or overriding unintentionally. So that's the convention we'll be using here. This allows us to just see everything on the screen all at once. I've got browser-sync here. We don't need a command tab between the browser and the codewriter and should be, hopefully, much faster. Let's start with variables. Antlers variables start with a double curly brace and then the name of the variable. You can also, just like Antlers, use the

and then the name of the variable. You can also, just like Antlers, use the $ sign, or basically just like PHP, and that works as well. This can help disambiguate between what's a variable and what's a tag. Variables are truthy and falsy, which means if they don't exist, they're not going to throw an exception. Null variables are just empty, which allows you to write really terse and clean, dry code without having to constantly be checking if variables exist. Keep that in mind as you're building your templates. For example, we can make up a variable that doesn't exist, like missing,

Keep that in mind as you're building your templates. For example, we can make up a variable that doesn't exist, like missing, and if we were to render that, it would be missing because there's nothing there. You can combine this with null coalescing to essentially set fallback variables in the order that you would like to render them. Let's say if we wanted missing or notMissing or maybe viewString. Since these first two don't exist, we will see this third one. String variables are very simple. Arrays are not.

see this third one. string variables are very simple. arrays are not really any harder. You just have to loop through them, which means we need to know where we open the loop and where we close the loop. Let's take this really simple primitive array right here, and we're going to loop through that. We're just going to open and close the same variable name. Since there aren't any named keys or variables inside of this array, each item in this array can be accessed through the value variable. I kind of messed up here. I've got to scope this into the view.

the value variable. I kind of messed up here. I've got to scope this into the view. There we go. If we want to loop through a multidimensional array, we now have access to the name and style keys inside that. We could say name does style, and there we go. If you're inside of a loop, you have access to the next and previous helpers. If you need to know what the previous item in the array was or what the next one is going to be in order to manipulate your markup,

to the next and previous helpers. If you need to know what the previous item in the array was or what the next one is going to be in order to manipulate your markup, you have access to that. Here's how that might look. If nextName is Chuck Norris, Chuck is next. I don't know why you would do this particular example, but this should show you how that works. There we go. In this first loop here, we're in Bruce Lee, but we put this markup here, which is showing that Chuck is going to be next. Same thing works for previous. If previousName equals Bruce Lee, Bruce was

Same thing works for previous. If previous name equals Bruce Lee, Bruce was last. There's another style of array in YAML, which would be a dictionary, and it would look something like this. We've got address say city is Orlando, state is Florida. In this example, there's nothing really to loop through. We just have keys scoped inside of a parent key. In order to access this data, we can do address.city will show us

inside of a parent key. In order to access this data, we can do address['city'] will show us Orlando. address['state'] will show you Florida. You can use this same array access syntax to pull data out of multi-dimensional arrays as well. You would just have to use the indexes for each array item. We could say $fighters[0]['name'], and that should show us Bruce Lee. Blade can do more than just render variables. It can also create them or assign them.

should show us Bruce Lee. Antlers can do more than just render variables. It can also create them or assign them. For example, this should look just like php for the most part. $var equals hello. If we were to render that, we've only just done an assignment, so it's not going to show anything. We actually need to render it. You can also concatenate variables $var equals $var plus world and you can create

var equals var plus world and you can create arrays. Or you can even create that array and immediately render it. We call this a self-iterating assignment. We can even merge multiple arrays together. people equals streamers merge view fighters and then we'll say name

streamers merge view fighters and then we'll say name does style and close it properly. Throw a br in there. There you go. Let's talk logic. Antlers has a number of different operators, so you can write your templates in a lot of different ways depending on your needs. Let's start with the simple if statement. Say if bool

Let's start with the simple if statement. Say if bool it's true and since bool is true, it's going to show true. If we turn the value to bool to false, it's not going to show. Or we can add an else right there. Another way that you could write this would be unless. So unless it's true, you can say it's false, otherwise it's true.

Like it's true, otherwise it's false. There we go. You can also use true the assignment or an operator we call the gatekeeper to only render something if a statement is true. In this case, we can say it's true and it will only show true if it's true. It's a real nice way to have a very short dry statement. You're not limited to just rendering static strings here. You could also do something like have a gatekeeper check and then render a partial.

You're not limited to just rendering static strings here. You could also do something like have a gatekeeper check and then render a partial I don't know, we have a footer partial so we could do that. And then if it was true, it would render the footer. Tags inside of logic need to have their own set of curly braces around them to separate them apart. You have access to a full range of comparison operators so you can check the value of something. In this case, let's say if $int is greater than 2, it's more than

check the value of something. In this case, let's say if int is greater than 2, it's more than just a couple. And I forgot to scope this. You've got strict comparison, you've got less than, and all of your basic operators there. You can also write complex statements. And bool is true. You can use grouping to group a statement together to make sure the logic is interpreted.

and sort by date as you've seen us do already. Tags can do a lot of things. You can create your own custom tags and there are a bunch of them already built in that do everything from work with your assets and your data to your cookies to forms, your locales, even wrapping a bunch of text with the markdown tag to turn it into markdown. Yeah, there's a lot of stuff you can do with tags. You can even assign the result of a tag to a variable equals news, then later loop through it.

You can even assign the result of a tag to a variable equals news, then later loop through it after you've, who knows, manipulated it somehow and I'll just show the date to show that this is different. Don't forget, tags need to be wrapped in a single set of braces. This iteration here can accept parameters as well. So you have a lot of power available to you. Comments. Sometimes you write code and you want to leave it behind. Antlers has its own comment syntax, which is

Comments. Sometimes you write code and you want to leave it behind. Antlers has its own comment syntax, which is {{##}}. Nothing inside Antlers comments will be rendered to the frontend. And last but not least, not parsing Antlers. Say you're working with Vue.js or something and you have a button and you want to render a label dynamically or something like this. Yeah, you can do v-text="label", we get that, but sometimes you do have these interpolated statements and if you don't

or something like this. Yeah, you can do vtext label, we get that, but sometimes you do have these interpolated statements and if you don't want Statamic to parse them, just throw an @ symbol in front of it and that will be rendered statically. Alternatively, you could wrap the no parse tag around a bunch of code and none of that will be rendered. Just a few tools at your disposal. Be sure to check out the docs. There's a lot that it can do that we did not get into, especially some of this more advanced stuff like order by, group by,

that we did not get into, especially some of this more advanced stuff like orderBy, groupBy, and so on. Very powerful. Maybe not something you need all the time, but when it's there you can reach for it.