Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Express Basics!
You have completed Express Basics!
Preview
Let's make your templating more modular and reusable.
Pug.js Documentation
- Template Inheritance (extends and block)
- Includes
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
Let's take a look at the two
templates we have so far.
0:00
Index.pug and card.pug.
0:03
Notice that a lot of the text is similar.
0:10
They both have a doctype, HTML,
0:15
head tags, and so forth.
0:20
In fact,
any HTML page will need to have these.
0:25
They also both have these footer elements
that contain the same paragraph text.
0:31
If we include the same elements
in all of our HTML templates,
0:38
we'll run into a problem when
we need to update our HTML.
0:43
For example, what if we need
to change of the footer across
0:48
all of the pages on our site?
0:53
We'll need to update all
of the template files.
0:56
Imagine that when we have 10 or
20 different pages,
1:00
each with their own template, a simple
change to the footer like a new copyright
1:04
notice would require 10 or
20 template changes.
1:09
Making changes to each file
would be incredibly tedious.
1:15
A better method is to put HTML that's used
throughout the site into one file and
1:19
include it in other files.
1:24
Pug lets you include a template
into another template.
1:27
The child, or the included template,
is extended, or nested, within the layout.
1:31
Let's take a look at how this works.
1:37
First, let's create
a template called layout.pug.
1:40
The layout should include everything
that our templates have in common.
1:44
By examining the two files,
1:49
I know that they're going to have all
of the HTML boilerplate in common.
1:51
The doctype, the head tag, and the body.
1:55
I can copy that into the layout file.
1:59
I already know that the same header and
2:02
footer is being used
across all of my pages.
2:04
So I can copy those into
the layout file as well.
2:08
The final thing I need in my layout
is the block content keywords.
2:15
This lets Pug know that any
template extending the layout
2:22
can inject its HTML there.
2:26
We'll see an example
of that in the second.
2:29
Now I can slice and dice the content
that's duplicated in the index.pug file.
2:32
Now in the child template,
I need two final things.
2:43
First, I need to tell the template that it
extends or inherits from the layout file.
2:47
I do this by using the extends keyword,
and then the path to the file.
2:55
Secondly, and finally,
3:00
I need to tell the template to inject
the content in the content block.
3:02
I do this using the block
content keywords.
3:07
So this content here will be placed
right here in the layout.pug file and
3:17
a full HTML page will be rendered
from these two templates.
3:25
Let's see if anything has
changed in our browser.
3:32
Nope, it stayed the same which is perfect.
3:38
Look back at the index.pug now.
3:44
It's a lot more focused, we just have
the content section of the page to worry
3:46
about if we want to come back and
edit this file.
3:51
All the other bits are tucked away and
are less distracting.
3:54
Let's check out the layout file again now.
4:01
Believe it or not, this can be broken up
further into what are known as includes.
4:05
For example,
4:10
this header element could go into its
own include as well as the footer.
4:12
In a small and
4:18
simple page like this, it might not
seem important to break these out.
4:19
But for real world applications, headers
and footers can get really complicated,
4:23
and even if it's not complicated now,
your applications can often grow.
4:28
Having it broken up ahead of time
can help you keep it organized and
4:34
make maintaining it easier.
4:38
Let's break out the header and
footer into their own includes.
4:40
I'll start by creating a folder in
the views directory and I'll call it,
4:44
includes.
4:48
Then, I'll create a file named header.pug.
4:52
I can cut the header element
out of the layout file and
5:02
paste it into the header.pug file,
removing any indentation.
5:07
Back where I cut out
the header in the layout file,
5:13
I can use the include right here.
5:17
Using Pug's include keyword and
then the path to the file,
5:20
I can now render the header in the layout.
5:30
Now we can repeat the same process for
the footer.
5:34
I can create a footer.pug file, And
5:37
cut the footer and
paste it into the footer file.
5:44
Then I can add the include at
the bottom of the file here.
5:56
Now that we’ve got the layout and
the include setup,
6:02
let's cut down the card.pug file like
we just did with the index.pug file.
6:06
Remember, all we want to do is
keep this section element here.
6:11
I'll make sure that I'm extending
the layout at the top of the file.
6:17
And then nest the content
block with block content.
6:26
Let's see what happens when we
edit the footer element now.
6:39
I'll open it and
then replace the text with,
6:42
the best study app ever created.
6:48
If I save the page and
visit the two pages now,
6:53
You can see that the change is
everywhere from just one edit.
7:00
I'll just undo that change for now, but
7:06
feel free to change it to your
own footer if you want to.
7:08
You can put a copyright message in here,
for example.
7:12
Now that you know how Pug templates work,
7:15
let's get a little deeper
into express routing.
7:18
This is where we'll examine
exciting parts of the project, and
7:21
where we can accept and
respond to user input.
7:25
See you there.
7:28
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