WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.496 --> 00:00:04.836 align:middle
What about adding a layout to our
page - like a header and a footer?

00:00:05.336 --> 00:00:10.156 align:middle
Take a peek at the HTML for the page:
it's just the HTML from the template.

00:00:10.446 --> 00:00:14.016 align:middle
There's nothing special in Twig
where a base layout with a header

00:00:14.016 --> 00:00:17.306 align:middle
and a footer is automatically
wrapped around our content.

00:00:17.496 --> 00:00:20.416 align:middle
Whatever you have in your template
is what you get on the page.

00:00:20.996 --> 00:00:26.736 align:middle
However, the Twig recipe did add a
base layout file called base.html.twig.

00:00:27.206 --> 00:00:31.236 align:middle
It's really simple now, but this
is where we'll add our top nav,

00:00:31.486 --> 00:00:34.626 align:middle
footer and any other things
that should live on every page.

00:00:35.036 --> 00:00:38.566 align:middle
The question is: how can we
make our template use this?

00:00:39.076 --> 00:00:41.986 align:middle
With a cool feature called template inheritance.

00:00:42.536 --> 00:00:48.506 align:middle
In homepage.html.twig, at the
top, type {% extends then the name

00:00:48.506 --> 00:00:51.106 align:middle
of the base template: base.html.twig.

00:00:51.476 --> 00:00:54.416 align:middle
And notice: this is the do something tag.

00:00:54.776 --> 00:00:58.966 align:middle
We're not printing this template, we're
telling Twig that we want to extend it.

00:00:59.886 --> 00:01:03.066 align:middle
If we do nothing else and
refresh, we get an error:

00:01:03.356 --> 00:01:07.856 align:middle
a template that extends another one cannot
include content outside Twig blocks.

00:01:08.246 --> 00:01:11.696 align:middle
Hmm. When you extend a template,
it tells Twig that you want

00:01:11.696 --> 00:01:14.386 align:middle
to render your template inside that base layout.

00:01:14.676 --> 00:01:18.376 align:middle
But... Twig has no idea where
our content should go.

00:01:18.896 --> 00:01:21.946 align:middle
Should it take our homepage
HTML and put it down here?

00:01:21.946 --> 00:01:22.936 align:middle
Or up here?

00:01:22.936 --> 00:01:23.726 align:middle
Or right there?

00:01:24.176 --> 00:01:24.976 align:middle
It doesn't know!

00:01:25.176 --> 00:01:26.796 align:middle
So it throws that error.

00:01:27.286 --> 00:01:29.746 align:middle
The way we tell it is via these blocks.

00:01:30.516 --> 00:01:34.806 align:middle
Blocks are holes into which a
child template can put content.

00:01:35.586 --> 00:01:38.176 align:middle
And you may have noticed
one block called body...

00:01:38.296 --> 00:01:41.236 align:middle
which is exactly where we
want our content to go.

00:01:41.976 --> 00:01:47.626 align:middle
To put it there, surround all the
content with a {% block body %}...

00:01:47.626 --> 00:01:52.006 align:middle
and at the bottom, {% endblock %}.

00:01:52.006 --> 00:01:52.806 align:middle
And now...

00:01:53.136 --> 00:01:54.346 align:middle
it's alive!

00:01:54.666 --> 00:01:58.626 align:middle
It doesn't look much different,
but we are inside the base layout.

00:01:59.216 --> 00:02:04.476 align:middle
This is called template inheritance because
it works exactly like PHP class inheritance.

00:02:04.886 --> 00:02:08.076 align:middle
Imagine you have a Homepage
class that extends a Base class.

00:02:08.426 --> 00:02:10.566 align:middle
That Base class has a body() method,

00:02:10.776 --> 00:02:14.026 align:middle
and we override that body()
method in the Homepage class.

00:02:14.286 --> 00:02:16.276 align:middle
It's the same concept in Twig.

00:02:17.086 --> 00:02:22.346 align:middle
And these block names - like javascripts,
stylesheets and body - aren't special names...

00:02:22.346 --> 00:02:23.986 align:middle
and they're not registered anywhere.

00:02:24.576 --> 00:02:28.056 align:middle
Feel free to create new blocks
however and whenever you want.

00:02:28.656 --> 00:02:33.146 align:middle
For example, suppose we want to change the
title of the page from a child template.

00:02:33.996 --> 00:02:37.926 align:middle
In this case, the recipe already gave
us a block called title to do that.

00:02:38.526 --> 00:02:40.876 align:middle
And this block has default content...

00:02:41.126 --> 00:02:44.606 align:middle
which is why we already see
Welcome on the browser tab.

00:02:45.506 --> 00:02:47.296 align:middle
Let's override this in our template.

00:02:48.256 --> 00:02:57.806 align:middle
Anywhere outside the body block, say {% block
title %}, type something, then {% endblock %}.

00:02:57.806 --> 00:02:59.726 align:middle
And now, got it!

00:02:59.816 --> 00:03:00.836 align:middle
New title!

00:03:01.226 --> 00:03:05.646 align:middle
And notice that when we override a
block, we override it completely.

00:03:05.946 --> 00:03:07.876 align:middle
We don't see the word Welcome anymore.

00:03:08.636 --> 00:03:12.886 align:middle
Occasionally, you may want to add to the
parent block instead of replacing it.

00:03:13.666 --> 00:03:16.576 align:middle
You can do that by saying {{ parent() }}.

00:03:17.366 --> 00:03:18.596 align:middle
This is really neat!

00:03:18.786 --> 00:03:22.766 align:middle
The parent() function grabs the content
from the title block of the parent template.

00:03:23.416 --> 00:03:26.036 align:middle
Then we use {{ to print it.

00:03:27.176 --> 00:03:29.756 align:middle
This time we see welcome and then our title.

00:03:30.406 --> 00:03:32.716 align:middle
But since we don't really
want that, I'll remove it.

00:03:33.636 --> 00:03:37.626 align:middle
Status check: we're returning
HTML and we have a base layout.

00:03:38.076 --> 00:03:42.016 align:middle
Yeah, our site is still horribly
ugly, but we'll fix that in a bit.

00:03:42.686 --> 00:03:46.826 align:middle
Next up, let's run one command
and instantly gain access to some

00:03:46.826 --> 00:03:49.756 align:middle
of the most powerful debugging tools on the web.