- What is a Template Engine? 3:45
- Installing Twig 4:43
- Twig View 5 questions
- Template Language 4:28
- Escaping and Comments 3:53
- Twig Syntax 5 questions
- The Structure of Control 6:13
- Working with Date 3:17
- Filters and Functions 7 questions
- Combining Templates 7:09
- Adding a Second Page 3:23
- Sharing 6 questions
- Custom Functions with Macros 4:22
- Importing and Using Macros 3:28
- Multiple Macros 2:51
- Custom Functions 5 questions
- Extending Twig and Beyond 1:51
- Your next step 1 question
Preview
Video Player
00:00
00:00
The Structure of Control
6:13Twig uses filters to format the content on a page.
The first thing I want to do is show
the name if the variable is set,
0:00
or else, default to world.
0:06
A conditional statement is a command.
0:08
So I use the curly brace along with
the percent sign, then our command itself.
0:11
If name is not empty.
0:18
Then I'm going to show the name.
0:25
Else, I'm going to show world.
0:28
And finally, end if.
0:35
We see the greeting with a name,
then if go back into index and
0:42
remove that variable, now we see world.
0:48
But I still want to adjust my spacing and
add some HTML tags.
0:52
I'll put my variable back.
0:59
And then in home, I'm going to surround
my whole greeting in an h1 tag.
1:02
And then I'm going add emphasis tags,
1:12
surrounding my conditional.
1:17
Finally, I want to add dashes
to my tags to remove spacing.
1:20
Notice that for world,
I added the dashes to my command tags.
1:30
Now my greeting is formatted properly,
but I still want to filter my name.
1:36
Name should be title case.
1:43
Next I want to add some navigation.
1:45
I'm going to use an array for this to
give us a chance to work with an array.
1:47
Back in my index file,
I'm going to create my array.
1:52
Nav equals an array, And
1:56
then I'm going to create
two inner array elements.
2:01
Home, Is going to equal
2:05
an array where the href is equal to slash.
2:10
The caption is equal to welcome.
2:19
And the status is equal to active.
2:26
My second item is going to be contact.
2:32
I'm going to set this equal to an array
href will equal slash contact.
2:37
The caption is going to equal contact us,
2:46
and the status is going to equal false.
2:52
Then I'm going to pass my
array to my Twig template
2:58
Nav is going to contain my nav array.
3:04
Now let's go back into our twig template.
3:10
We can run a filter on our array
just like we did on our variables.
3:14
Nav and then pipe.
3:19
First, we're going to use
a filter to get the keys.
3:22
Keys, and then another filter to join.
3:25
And we pass in the character
we wish to join with.
3:30
Back in the browser,
I can see our keys separated with a comma.
3:36
Remember, you can find a full list of
tags, filters, functions, tests, and
3:40
operators all on a single
page of documentation.
3:45
If there's something you are trying to do,
go here and take a look.
3:48
Now let's set up the navigation.
3:52
We're gonna start by looping
through each item in my nav array.
3:58
Our command tag for item in nav,
4:03
Then we'll add our endfor.
4:11
I'm going to put this below our list item.
4:15
I'm going to copy the list item and
I'm going to use it in our else.
4:21
In Twig, a for loop can have an else if
4:27
there are no items in the array.
4:32
Within our loop, the variable item is now
a single dimension associative array.
4:36
The href here is going to use our item,
href.
4:42
Twig allows me to access an element
of an array in one of two ways.
4:48
Item and then square brackets for
href, just like I would in PHP.
4:55
We can also use the dot syntax.
5:02
So for my link text,
5:05
I'm going to use item.caption.
5:08
Finally, I only want my active
link to show as active.
5:14
Instead of adding the class active here,
5:18
I'm going to show item.status.
5:23
I'm also going to add
a condition around my span.
5:27
If item.status equals active,
5:33
Then I'll use my span, endif.
5:43
Let's go back to the browser and
check this out.
5:48
Now I see the navigation for
the welcome and the Contact Us page.
5:52
Our links won't actually work because I
don't have my contact page set up yet.
5:57
We'll do that in the next video.
6:02
Before we move on though,
I want to finish my template by
6:04
dynamically adding the year to the footer.
6:09