‫All right.
‫In this video, I will show you how to use
‫one of the most important
‫and also most complex features of Pug.
‫And that are extends.
‫With extends, we will be able to use
‫the same base layout for every single page
‫that we want to render.
‫Right now, we have our base template kind of finished
‫with a nice header and a nice footer.
‫So now, let's actually start filling out its content.
‫Now, of course, we want to load
‫different content for different pages.
‫And to start, we want to have a overview page
‫with all the tours, and then a page
‫with all the tour details for one specific tour.
‫So let's now implement some routes
‫for both of these pages.
‫And I'm going to do that right here
‫below the first one that we already created.
‫So, /overview
‫And then something very similar to before.
‫And again, a bit later, actually in the next video
‫we will then put these routes
‫into their own separate file.
‫So, render, and now on this overview page
‫we will actually want to render
‫a template called overview.
‫That doesn't yet exist,
‫so let's now quickly go ahead and create one.
‫So, overview.pug
‫And actually let's also pass in some data.
‫And we will pass in the title of the page
‫which in this case, we'll say,
‫All Tours.
‫Now let's just grab this code
‫and copy it for the tour.
‫So we also want a route for a specific tour again.
‫And here, we will want to have
‫a template which is also called tour.
‫And then the title of that, for now,
‫let's do it again,
‫The Forest Hiker Tour.
‫So for now, this is just a placeholder,
‫and of course a bit later we will
‫then actually make this dynamic.
‫Because at this point, we are still
‫kind of learning how Pug really works.
‫Let's now create that tour template as well.
‫And that's it.
‫Okay, now with these two new templates here done,
‫this is what we're going to do.
‫In each of these templates, and in this case here
‫the overview, we only want to put
‫the content for that specific page.
‫So we want no footer here and no header
‫and none of the stuff that we have in the base.
‫So, again, really just the content
‫for the overview page.
‫So that's exactly what we're going to put in this file,
‫and then, we will basically inject this content
‫into the base template, which we can call
‫the parent template.
‫This process is then called extending.
‫So whenever the overview template is rendered,
‫we then take the base template
‫and fill it up with the content of this file,
‫and so we extend it.
‫Here is how we implement that.
‫First off, in the base, we need to put a block.
‫I will actually do that here.
‫So let's delete all of this,
‫and here, put a block.
‫And that block, I'm going to call it content.
‫Then inside that block, we can actually also
‫have some content.
‫So let's just put a h1 here.
‫But this content will then later be overwritten.
‫But anyway, let's put it here
‫just as a placeholder, basically.
‫So, This is a placeholder heading.
‫Okay, so we have our block here,
‫and now we can go to our overview page
‫and say that we want to extend our base template.
‫So, extend base.
‫Or actually, that's called extends.
‫So this file extends the base file.
‫And of course, if this one here
‫would be called, for example, index.pug,
‫then here we would say extends index.
‫Now what exactly is the content
‫that's going to be extended in the base template?
‫Well, that's whatever we put in the content block.
‫So, also here, we create a block called content.
‫And then in there, we can as always put our content.
‫So let's just say, This is the tour overview.
‫Here, we basically redefine the content block
‫that is in the base.
‫So again, we have this block here
‫which is called content, and now by putting
‫the same content block right here in this page,
‫which is then extending the base,
‫we are basically redefining that block.
‫Each file can only extend one other file.
‫So we can only extend the base here,
‫but we can have different blocks in each of the files.
‫So we could have a block for the head here as well.
‫And then we could extend that also
‫in the overview template.
‫And, actually, we will do that a bit later.
‫But for now, of course, let's keep it simple.
‫Okay, does this make sense?
‫Let's now go ahead and actually do the same thing here.
‫So this extends the base layout.
‫And what exactly does it extend?
‫Well, it will extend the content block.
‫And so this one we'll put on the h1,
‫This is the tour detail page.
‫So, before testing this, let's quickly recap
‫what we just did.
‫So, we want to use this base template here
‫kind of as our starting point.
‫So, as a skeleton that has all the HTML stuff,
‫like this head,
‫and also the header and the footer,
‫but not the specific content for each page.
‫Then, in each of these pages here,
‫we only have the content for that page itself.
‫And we can do that because we can
‫basically inject this content here
‫into the parent base template by using extend.
‫So basically, think of this as the opposite of including.
‫Here, this template included two parent templates.
‫This template here included two child templates,
‫the header and the footer.
‫So, again, the base is the parent,
‫and the header and the footer are the children.
‫So here, the parent included the children.
‫But with extends, it's the other way around,
‫where the children, as we can say,
‫so we can kind of say that the overview
‫is a child as well of the base,
‫but here its the child that kind of includes the base.
‫So, basically, everything that's around this block content.
‫You can imagine that all of this code here,
‫all of this which is not the block content
‫is then copied right into this file.
‫That's a nice way of imagining how this works.
‫That allows us to then use here in our route
‫the overview and the tour templates instead of using base.
‫But still, of course, using all of this HTML
‫that we have in here.
‫Okay, so I hope that makes sense now.
‫Let's actually go ahead and try this out.
‫I'm just going to copy the URL.
‫So now let's write overview.
‫And so, indeed, we get the h1 which says
‫This is the tour overview.
‫And actually let's also use the title variable
‫that we passed into these templates.
‫Remember that here we have the title All Tours
‫on the overview, and then on the tour,
‫we have The Forest Hiker.
‫So let's actually put that on the title.
‫In fact, we can actually do that
‫right here in the base template.
‫So when right here in the overview
‫we extend the base template,
‫the base template still has access to the locals,
‫so, to the variables, that we passed into the template.
‫Here, we can do what we did before,
‫so, interpolation with the variable, so with the local.
‫So, all we need to do is put the title here, like this.
‫And if we now reload,
‫then you see All Tours here on top.
‫Now let's try tour.
‫And so this is the tour detail page,
‫and up here you see The Forest Hiker Tour.
‫Now if we load this one
‫then we should get that placeholder
‫that we put in the block.
‫Remember that?
‫And, indeed, This is the placeholder heading.
‫Great.
‫This is a powerful and very important mechanism
‫for us to understand and to use
‫for all of the templates that we're going to build
‫in the rest of the section.
‫In the next video, we will then finally
‫clean up a little bit this mess that we have here,
‫and refactor all of this code here
‫into some different files.