Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Twig uses filters to format the content on a page.
Twig Documentation
Twig for Template Designers describes the syntax and semantics of the template engine and will be most useful as reference to those creating Twig templates.
Variables can be modified by filters. Filters are separated from the variable by a pipe symbol (|) and may have optional arguments in parentheses. Multiple filters can be chained. The output of one filter is applied to the next.
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
You need to sign up for Treehouse in order to download course files.
Sign up