This course will be retired on June 1, 2025.
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
One of the most powerful features of a template engine is the way we can use a layout template to create the overall structure of a page while allowing us to fill in specific details. We do this by extending templates much like we can extend classes in object-oriented programming. Besides extending with blocks, Twig can also include other template files.
The extends tag can be used to extend a template from another one.
A child template might look like this:
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ parent() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome to my awesome homepage.
</p>
{% endblock %}
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
One of the most powerful features of
a template engine is the way we can use
0:00
a layout template to create
the overall structure of our page,
0:05
while allowing us to
fill in specific details.
0:09
Previously we've used more of
a quilting method by stitching
0:12
together the different pieces
in the order we choose.
0:17
Using a layout template makes it
easier to view as a whole while giving
0:21
us the flexibility to include
the things as needed on each page.
0:26
Twig allows us to extend
templates much like we can extend
0:31
classes in object oriented programming.
0:36
Let's duplicate our home.twig file,
0:40
and we'll name it base.twig.
0:44
We are going to remove the contents
specific to our homepage.
0:48
Instead we're going to add
a block which is a command,
0:58
the key word block, and
then a name for the block.
1:03
We're going to add content.
1:08
And then we're going to end our block.
1:13
Now in my home file, I'm going to remove
1:17
everything except the content.
1:23
I then surround the home content and
it's own block, named content.
1:32
They should look exactly like I did in
1:40
base.twig, Endblock.
1:45
To use the base template,
1:51
I'm going to add another command.
1:54
At the top, I open my command and
1:59
say extends base.twig.
2:04
Now let's check our browser again.
2:08
Nothing has changed, great.
2:15
We have all the layout for
our site split out to its own file and
2:17
we're still showing the home
page content as expected.
2:22
Before we're ready to add another page,
let's add some blocks to the head.
2:27
We're most definitely going to
want to add or change the title.
2:34
We can add as many blocks as we want,
just make sure to give them unique names.
2:39
In the title,
I'm going to add a block named title.
2:45
And then I'm gonna call my endblock.
2:53
I want all of my titles to
end with -Twig Example.
3:00
So I'm going to put that
outside of my title block.
3:04
We can also nest blocks
within other blocks.
3:09
We'll add a whole headblock so
that we can also add or
3:13
change something in the header.
3:17
Block head.
3:21
And then we'll add the endblock.
3:27
We're not required to do anything
with these defined blocks.
3:28
As you can see,
my site still works, even though we
3:33
haven't added the head or
title to our home template.
3:38
Back in our home template,
3:44
We can add block title and
3:48
say Home, and then endblock.
3:52
Let's change this to Welcome Home.
3:57
For our head block,
I want to keep everything that's there,
4:02
but I want to add a bit more.
4:08
To do that,
we're going to call a function.
4:10
I'm going to open my block head,
4:12
And then I'm going to add
parent with parentheses.
4:20
And then finally, I'll do my endblock.
4:27
This gives me all the code that
was defined in my base template,
4:31
including the title block.
4:36
It doesn't matter in which order
I defined the nested blocks.
4:38
The title block could be before or
after the head block.
4:43
I'm going to add another
style from my h1 tag so
4:47
that we can easily see
this change being added.
4:52
Style type equals text/css,
4:57
H1 color,
5:04
And then end my style.
5:14
Back in the browser,
I can see that my greeting is now green.
5:17
And if I view the source,
I verify that my title and
5:21
my custom style are there.
5:27
I can also see that the custom stylesheet
from my original head block is also here.
5:30
Besides extending with blocks,
I can also include other template files.
5:42
Let's move our navigation
list item into its own file.
5:51
We'll call this nav-item.twig And
we'll paste our code.
6:02
Back in the base template,
we use our include function and
6:09
pass the file we wish.
6:13
Once again, this could be a command or
display block.
6:15
We're gonna use the display block
since we're actually putting
6:19
display content here.
6:24
And then in parenthesis,
we do nav-item.twig.
6:27
We're ready to add our contact page.
6:30
We'll create a new file
named contact.twig.
6:36
We're going to start by extending,
extends base.twig
6:43
Then we're going to add a block for
our title.
6:53
Contact, And endblock.
7:00
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up