Alright, let's get into the good stuff and actually build something. Let's play out a scenario, which may not be far from the truth. Let's pretend that you're a developer on a team. There's a new website being designed and built. Design is done. It's been coded. The front end is all done. HTML, CSS. But it's all static. And they want to make it manage in a content management system.

And the nav is kind of repeated down here. And we have a copyright and some social media links. Pretty typical site, especially if you've ever wanted to rent a DeLorean before and travel through time, this company looks like they'll do a pretty good job. Let's jump into the code and start lighting up some dynamic bits and structuring the templates. We can open up our project and head to resources/views/layout. And here is everything that I've built so far. All of this is static HTML. There's no Statamic, dynamic features, no tags being used, or anything like that. Statamic's template language, Antlers, uses a layout and template style approach to building.

There's no Statomic, dynamic features, no tags being used, or anything like that. Statomic's template language, Antlers, uses a layout and template style approach to building out templates, as opposed to Laravel's Blade, Sections, and Extends. So let's walk through how this works. The layout is loaded on every page load, and you can have different URLs can have their own layouts, but the layout is going to be loaded and then any page-specific templates will be injected into the layout wherever you put a variable, which is template content. You'll see how that works as we start going along. Let's start from the top and start replacing static content with dynamic tags. Come down to the title page, and we'll replace that with title, which would be the title

Let's start from the top and start replacing static content with dynamic tags. Come down to the title page, and we'll replace that with title, which would be the title of the page. We can also set a backup, heavy 88. Great. Next we've got this call to CSS slash Tailwind. We're going to replace that with a mix tag. So mix source, there you go, and make sure we close the outside quotes. That's going to dynamically pull in the proper file with mix, and if it's cached, it'll map to the proper file from the manifest.

That's going to dynamically pull in the proper file with mix, and if it's cached, it'll map to the proper file from the manifest. Pretty equivalent to Laravel's Blade mix directive. Next these are fine to be hard-coded because they're external URLs. How we're loading a font and some Alpine scripts, some plugins. So that all looks pretty good. Coming down here, this starts the header area. So this is the nav, and let's make a partial out of the nav. So we're going to come down to the end of the nav, we're going to extract that and replace it with partial nav.

So we're going to come down to the end of the nav, we're going to extract that and replace it with partial nav. There's a couple ways to structure your partials. The first would be to create a directory called partials, and then whatever you put in there, new file, we'll call this nav.antlers.html. Save that. Now Statamic has a lot of these tags. You're looking at the first one right here. This is the partial tag. Tags work like this.

This is the partial tag. Tags work like this. Double curly braces, that's how you know you're in antlers. The first part of the tag is the name of the tag. The second part is an argument that gets passed in, and then it also supports parameters like this equals that. If we pop open the docs, go to the tags section, you can see the list of all the tags that are available. They cover a wide range of features from fetching content to building forms to showing errors and all sorts of other good stuff.

They cover a wide range of features from fetching content to building forms to showing errors and all sorts of other good stuff. You can also choose to put your partials in the main directory or in subdirectories as you wish. So you could put this here in the top level directory, rename it, and put an underscore at the beginning. This is another convention. Both of these will be equivalent. So partial nav will look for this pattern or this pattern, and whichever one it finds will be the one it uses.

I'm going to go back, refresh, make sure it still loads, and that's good. So we know that the homepage is using the home template because that is the default. We can take a look in content/collections/pages/home, and we can see here that the template is set to home. If we wanted to call it something else like landing and use the word landing in our template name, that's fine too. We'll just leave it like that for now. While we're in here, we can just clear out this content that's not going to be relevant anymore. Great.

So if we were to take this out, you'd see no homepage would be loaded. The contents of that homepage are being ejected right here. Next let's jump back to the command line. We're going to start a new project here. We're going to make sure we've got git. We're going to add everything, initial commit, that way we just have that ready to go. And then we're going to kick off npm install and npm run watch. Let's make sure that mix is always running and that if we make any changes to the HTML, that Tailwind needs to recompile classes. It'll do that automatically.