Well, the first thing we're gonna wanna do is actually create a layout for

our project.

That way we can eliminate this repeated code.

The way we're gonna do that is by using the extends function or

method that is given to us by twig.

Let's head back over to our index.php file and work that out.

So, now, our templates here are index.html and contact.html.

I'm gonna create a new file.

This new file is gonna be my main layout.

So, I'm gonna type out main.twig as the extension to tell

the interpreter we're gonna use twig to interpret this and compile it.

Now, if I open up my twig file, I'm gonna put in the code here

from my index.html file, so this.

I wanna use everything I can here without repeating it in the next file.

So, I'm gonna go ahead and grab everything here, and I'm gonna copy it.

Then, I'm gonna head back over to my twig file and set up my main template.

Let's start by pasting in the code from the index.html file.

Okay. That's a lot of code.

I'm gonna hit save on that and go back up to the top.

Now, I can look at a few things here that I know are gonna be repeated.

Something that I might wanna add something to, something that I might wanna modify.

I'm gonna do that by using content blocks.

So, what I'm gonna do first is inside of my head tag here,

I'm gonna create a tag using the twig syntax to a block for the head.

So, I'm gonna start with two curly braces and then,

inside of those, I'm gonna do two percent signs.

I'm gonna open up some space in there, give it a little wiggle room.

Then, I'm gonna type the keyword block and then I'm gonna type head.

This is just an identifier to tell me what block I'm gonna actually be modifying.

Then, I'm gonna tab everything that I want in there in one.

Then, I'm going to close this out by the same way with two curly braces and

two percentage signs.

Except inside of this, I'm gonna type endblock.

Now, you can leave it just like this, but I like to give it a little bit

more clarity, and instead of just endblock, I'll do endblock head.

That tells me it's ending that particular block.

Just good for readability.

I'm going to save that and that's my first step.

That means that I can modify that block as much or as little as I want

in any file that extends this main template or main twig file.

What other sections could we do this for?

Okay, we're gonna definitely gonna wanna do it for that flash feedback there, so

the success message which is commented out.

We'll get to that a little bit later.

Now, if we scroll down, you'll see we have our header.

Well, I actually want to take the header and

move it to a completely different file.

Do that too.

Let's keep going down, see if we can add anymore blocks.

Actually, I can add one up here.

The title might want to change.

So, let's do the same thing we've done here, where we did block head.

I'm just going to copy it and paste it inside of my tab.

Where these go, doesn't matter.

But this is not the head, this is the title.

All right, there's our title.

Now, I wanna end that block too, so I'm gonna copy this again.

And at the very end of the content, I'm gonna type endblock and title.

That way I can change the title as much as I want on any page

that implements the main template file.

Anymore that we'd wanna do?

Let's go down a little bit.

Let's say we might want to change this hero image here.

We like the tag, the div is fine.

But what we can do is do a block here and we'll call this block, hero,

for our hero image.

And then, we'll paste it in at the end and we'll say endblock.

And make sure you change it to hero.

So, now, you know that anything inside of this div here, the tag, the image,

whatever you want can be changed by simply adding to the block hero.

All right, what else do we wanna do?

Well, I'm gonna go ahead and scroll down a little bit more, and

see if there's another block that I might wanna change.

Well, for sure the footer is something I'm gonna wanna do, right?

So, let's do a block footer.

That's one of the things that we can paste in.

So, I'll come over and add block footer.

And we're gonna do that inside of our footer tag,

that way it doesn't mess up our styles.

Okay, we're going to tab it in.

It's not necessary but definitely good for clean up.

And then, do our end block.

All right.

The last bit, the big bit, the one that matters the most, is our content.

This main area here that has all of this content,

I'm just gonna copy it all out, and delete it.

Now, inside of here, then I'm going to create another content block, or

another block and call it content.

And it's blank by default.

That's fine, cuz we're always gonna want content on every page.

So, I'm gonna end this block.

And that's gonna be the start of our template.

The next thing we're gonna need to do is actually create a template for

each of the pages that we're gonna serve up, such as index and contact.

I'm gonna do that by simply renaming the index.html file.

I'm gonna rename it index.twig.

Okay? In fact,

I'm gonna rename it a little bit more than that because it's not just an index file,

it's the about file.

So, rename, about.

Okay, now the next step here is the part that gets really interesting and

super cleans up our code.

Let's go here now and get rid of everything except for our content.

So, let's go here, we're gonna get rid of all of this.

We're gonna get rid of all of the header.

We don't need any of that.

We're gonna leave nothing but the content.

All right, at the very bottom, same thing.

Get rid of our main tag and everything here.

Now, I'm gonna save this, and this is not gonna work.

We have to do a couple of special commands at the top to make sure we know what

file we're trying to fix or what file we're trying to include.

We're gonna say with using a twig template command that we wanna extend

our main template.

So, we do that by our two curly braces, our two percentage signs,

and then a couple of spaces just for clarity.

Then, we're gonna type in the keyword, extends.

And then, in a string format, the file that we actually want to extend.

So, that's going to be main.twig.

Okay. Now, that's gonna get our header and

footer but its just going to throw this content anywhere on the page.

We actually need to put this inside of a content block and

the way we do that is the same way we did it here in the main.twig.

So, it says block content.

We're gonna do block content.

I'm gonna copy that over.

Same thing, block content.

Now, the only way it knows that this is content that's serving

into a file is that we're using extends at the very top.

I'm gonna actually grab all of this that we have from all the way here from

the bottom, gonna tab it in.

And then, finish our content block by ending it with endblock.

Okay. Save that file and

that should do it for us.

Let's go ahead and see if this works.

Just by going back to our index.php file.

So, we'll hit preview and then, we have a slim application loader error.

Okay.

It says, we're unable to find the template index.html.

Okay. There is a reason for

that we no longer have a template index.html.

We only have a main.twig and an about.twig.

Well for us, we're not gonna serve main.twig.

We're gonna serve our about page.

So here, we're using our new views.

We're going to render not just the index, but the about page.

So, about.twig.

Now, we go back and refresh and hopefully that works for us.

Let's head over and hit refresh.

There we go, Ralph Waldo Emerson and it's our about page.

We've done this all by extending a big template.

So if you look at our index.php We've just simply said about.twig and

then for our contact page, we're gonna do the same, so

contact.twig.

Okay, now using the same thing that we did here, on line 21 to 23,

rendering our about.twig, I want you to take the time to do the Contact.html and

make it contact.twig and I'll meet you in the next video.