Let's make your templating more modular and reusable.
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 up