1
00:00:00,990 --> 00:00:01,900
‫All right.

2
00:00:01,900 --> 00:00:04,500
‫In this video, I will show you how to use

3
00:00:04,500 --> 00:00:06,180
‫one of the most important

4
00:00:06,180 --> 00:00:09,440
‫and also most complex features of Pug.

5
00:00:09,440 --> 00:00:11,940
‫And that are extends.

6
00:00:11,940 --> 00:00:14,280
‫With extends, we will be able to use

7
00:00:14,280 --> 00:00:17,000
‫the same base layout for every single page

8
00:00:17,000 --> 00:00:20,770
‫that we want to render.

9
00:00:20,770 --> 00:00:24,280
‫Right now, we have our base template kind of finished

10
00:00:24,280 --> 00:00:27,210
‫with a nice header and a nice footer.

11
00:00:27,210 --> 00:00:30,760
‫So now, let's actually start filling out its content.

12
00:00:30,760 --> 00:00:32,670
‫Now, of course, we want to load

13
00:00:32,670 --> 00:00:35,560
‫different content for different pages.

14
00:00:35,560 --> 00:00:38,550
‫And to start, we want to have a overview page

15
00:00:38,550 --> 00:00:40,860
‫with all the tours, and then a page

16
00:00:40,860 --> 00:00:43,763
‫with all the tour details for one specific tour.

17
00:00:44,860 --> 00:00:47,080
‫So let's now implement some routes

18
00:00:47,080 --> 00:00:48,713
‫for both of these pages.

19
00:00:51,410 --> 00:00:53,640
‫And I'm going to do that right here

20
00:00:53,640 --> 00:00:55,840
‫below the first one that we already created.

21
00:00:59,056 --> 00:01:00,510
‫So, /overview

22
00:01:09,440 --> 00:01:12,750
‫And then something very similar to before.

23
00:01:12,750 --> 00:01:15,430
‫And again, a bit later, actually in the next video

24
00:01:15,430 --> 00:01:16,910
‫we will then put these routes

25
00:01:16,910 --> 00:01:18,863
‫into their own separate file.

26
00:01:21,530 --> 00:01:24,560
‫So, render, and now on this overview page

27
00:01:24,560 --> 00:01:26,030
‫we will actually want to render

28
00:01:26,030 --> 00:01:28,223
‫a template called overview.

29
00:01:32,440 --> 00:01:34,000
‫That doesn't yet exist,

30
00:01:34,000 --> 00:01:36,903
‫so let's now quickly go ahead and create one.

31
00:01:40,400 --> 00:01:43,010
‫So, overview.pug

32
00:01:48,570 --> 00:01:51,640
‫And actually let's also pass in some data.

33
00:01:51,640 --> 00:01:54,080
‫And we will pass in the title of the page

34
00:01:54,080 --> 00:01:56,113
‫which in this case, we'll say,

35
00:01:58,220 --> 00:01:59,063
‫All Tours.

36
00:02:00,780 --> 00:02:03,130
‫Now let's just grab this code

37
00:02:03,130 --> 00:02:05,503
‫and copy it for the tour.

38
00:02:06,680 --> 00:02:11,270
‫So we also want a route for a specific tour again.

39
00:02:11,270 --> 00:02:12,770
‫And here, we will want to have

40
00:02:12,770 --> 00:02:16,160
‫a template which is also called tour.

41
00:02:16,160 --> 00:02:18,260
‫And then the title of that, for now,

42
00:02:18,260 --> 00:02:19,300
‫let's do it again,

43
00:02:19,300 --> 00:02:20,950
‫The Forest Hiker Tour.

44
00:02:25,830 --> 00:02:27,990
‫So for now, this is just a placeholder,

45
00:02:27,990 --> 00:02:29,470
‫and of course a bit later we will

46
00:02:29,470 --> 00:02:31,360
‫then actually make this dynamic.

47
00:02:31,360 --> 00:02:33,120
‫Because at this point, we are still

48
00:02:33,120 --> 00:02:35,723
‫kind of learning how Pug really works.

49
00:02:38,830 --> 00:02:42,323
‫Let's now create that tour template as well.

50
00:02:44,070 --> 00:02:45,810
‫And that's it.

51
00:02:45,810 --> 00:02:49,363
‫Okay, now with these two new templates here done,

52
00:02:50,810 --> 00:02:52,680
‫this is what we're going to do.

53
00:02:52,680 --> 00:02:54,960
‫In each of these templates, and in this case here

54
00:02:54,960 --> 00:02:56,820
‫the overview, we only want to put

55
00:02:56,820 --> 00:02:59,500
‫the content for that specific page.

56
00:02:59,500 --> 00:03:01,720
‫So we want no footer here and no header

57
00:03:01,720 --> 00:03:04,260
‫and none of the stuff that we have in the base.

58
00:03:04,260 --> 00:03:06,040
‫So, again, really just the content

59
00:03:06,040 --> 00:03:07,900
‫for the overview page.

60
00:03:07,900 --> 00:03:10,890
‫So that's exactly what we're going to put in this file,

61
00:03:10,890 --> 00:03:14,000
‫and then, we will basically inject this content

62
00:03:14,000 --> 00:03:16,300
‫into the base template, which we can call

63
00:03:16,300 --> 00:03:18,316
‫the parent template.

64
00:03:18,316 --> 00:03:21,620
‫This process is then called extending.

65
00:03:21,620 --> 00:03:24,750
‫So whenever the overview template is rendered,

66
00:03:24,750 --> 00:03:26,550
‫we then take the base template

67
00:03:26,550 --> 00:03:29,560
‫and fill it up with the content of this file,

68
00:03:29,560 --> 00:03:31,353
‫and so we extend it.

69
00:03:32,930 --> 00:03:35,080
‫Here is how we implement that.

70
00:03:35,080 --> 00:03:38,203
‫First off, in the base, we need to put a block.

71
00:03:40,110 --> 00:03:41,560
‫I will actually do that here.

72
00:03:42,890 --> 00:03:45,180
‫So let's delete all of this,

73
00:03:45,180 --> 00:03:47,900
‫and here, put a block.

74
00:03:47,900 --> 00:03:52,320
‫And that block, I'm going to call it content.

75
00:03:52,320 --> 00:03:54,260
‫Then inside that block, we can actually also

76
00:03:54,260 --> 00:03:55,303
‫have some content.

77
00:03:56,490 --> 00:03:58,520
‫So let's just put a h1 here.

78
00:03:58,520 --> 00:04:01,740
‫But this content will then later be overwritten.

79
00:04:01,740 --> 00:04:03,600
‫But anyway, let's put it here

80
00:04:03,600 --> 00:04:06,230
‫just as a placeholder, basically.

81
00:04:06,230 --> 00:04:09,630
‫So, This is a placeholder heading.

82
00:04:12,150 --> 00:04:15,600
‫Okay, so we have our block here,

83
00:04:15,600 --> 00:04:18,280
‫and now we can go to our overview page

84
00:04:18,280 --> 00:04:21,473
‫and say that we want to extend our base template.

85
00:04:22,360 --> 00:04:25,053
‫So, extend base.

86
00:04:26,400 --> 00:04:28,420
‫Or actually, that's called extends.

87
00:04:28,420 --> 00:04:30,823
‫So this file extends the base file.

88
00:04:31,970 --> 00:04:33,528
‫And of course, if this one here

89
00:04:33,528 --> 00:04:36,157
‫would be called, for example, index.pug,

90
00:04:36,157 --> 00:04:38,853
‫then here we would say extends index.

91
00:04:40,660 --> 00:04:42,510
‫Now what exactly is the content

92
00:04:42,510 --> 00:04:45,083
‫that's going to be extended in the base template?

93
00:04:46,000 --> 00:04:49,203
‫Well, that's whatever we put in the content block.

94
00:04:52,030 --> 00:04:55,573
‫So, also here, we create a block called content.

95
00:04:57,410 --> 00:05:01,063
‫And then in there, we can as always put our content.

96
00:05:02,650 --> 00:05:06,243
‫So let's just say, This is the tour overview.

97
00:05:09,180 --> 00:05:12,075
‫Here, we basically redefine the content block

98
00:05:12,075 --> 00:05:14,073
‫that is in the base.

99
00:05:15,270 --> 00:05:16,900
‫So again, we have this block here

100
00:05:16,900 --> 00:05:19,450
‫which is called content, and now by putting

101
00:05:19,450 --> 00:05:22,400
‫the same content block right here in this page,

102
00:05:22,400 --> 00:05:24,370
‫which is then extending the base,

103
00:05:24,370 --> 00:05:27,293
‫we are basically redefining that block.

104
00:05:28,171 --> 00:05:31,820
‫Each file can only extend one other file.

105
00:05:31,820 --> 00:05:33,860
‫So we can only extend the base here,

106
00:05:33,860 --> 00:05:38,390
‫but we can have different blocks in each of the files.

107
00:05:38,390 --> 00:05:41,730
‫So we could have a block for the head here as well.

108
00:05:41,730 --> 00:05:43,760
‫And then we could extend that also

109
00:05:43,760 --> 00:05:45,790
‫in the overview template.

110
00:05:45,790 --> 00:05:48,330
‫And, actually, we will do that a bit later.

111
00:05:48,330 --> 00:05:51,260
‫But for now, of course, let's keep it simple.

112
00:05:51,260 --> 00:05:52,923
‫Okay, does this make sense?

113
00:05:54,270 --> 00:05:57,020
‫Let's now go ahead and actually do the same thing here.

114
00:05:57,930 --> 00:06:02,190
‫So this extends the base layout.

115
00:06:02,190 --> 00:06:04,083
‫And what exactly does it extend?

116
00:06:05,200 --> 00:06:08,900
‫Well, it will extend the content block.

117
00:06:08,900 --> 00:06:11,660
‫And so this one we'll put on the h1,

118
00:06:11,660 --> 00:06:16,180
‫This is the tour detail page.

119
00:06:19,230 --> 00:06:21,830
‫So, before testing this, let's quickly recap

120
00:06:21,830 --> 00:06:23,020
‫what we just did.

121
00:06:23,020 --> 00:06:26,100
‫So, we want to use this base template here

122
00:06:26,100 --> 00:06:28,330
‫kind of as our starting point.

123
00:06:28,330 --> 00:06:31,600
‫So, as a skeleton that has all the HTML stuff,

124
00:06:31,600 --> 00:06:32,815
‫like this head,

125
00:06:32,815 --> 00:06:36,360
‫and also the header and the footer,

126
00:06:36,360 --> 00:06:39,610
‫but not the specific content for each page.

127
00:06:39,610 --> 00:06:41,720
‫Then, in each of these pages here,

128
00:06:41,720 --> 00:06:44,933
‫we only have the content for that page itself.

129
00:06:46,020 --> 00:06:47,650
‫And we can do that because we can

130
00:06:47,650 --> 00:06:49,913
‫basically inject this content here

131
00:06:49,913 --> 00:06:53,650
‫into the parent base template by using extend.

132
00:06:53,650 --> 00:06:57,353
‫So basically, think of this as the opposite of including.

133
00:06:58,881 --> 00:07:03,298
‫Here, this template included two parent templates.

134
00:07:03,298 --> 00:07:07,424
‫This template here included two child templates,

135
00:07:07,424 --> 00:07:10,293
‫the header and the footer.

136
00:07:12,284 --> 00:07:14,200
‫So, again, the base is the parent,

137
00:07:14,200 --> 00:07:17,140
‫and the header and the footer are the children.

138
00:07:17,140 --> 00:07:19,890
‫So here, the parent included the children.

139
00:07:19,890 --> 00:07:22,740
‫But with extends, it's the other way around,

140
00:07:22,740 --> 00:07:25,660
‫where the children, as we can say,

141
00:07:25,660 --> 00:07:27,300
‫so we can kind of say that the overview

142
00:07:27,300 --> 00:07:29,570
‫is a child as well of the base,

143
00:07:29,570 --> 00:07:33,160
‫but here its the child that kind of includes the base.

144
00:07:33,160 --> 00:07:36,883
‫So, basically, everything that's around this block content.

145
00:07:38,260 --> 00:07:40,960
‫You can imagine that all of this code here,

146
00:07:40,960 --> 00:07:43,750
‫all of this which is not the block content

147
00:07:43,750 --> 00:07:47,090
‫is then copied right into this file.

148
00:07:47,090 --> 00:07:49,843
‫That's a nice way of imagining how this works.

149
00:07:51,334 --> 00:07:55,360
‫That allows us to then use here in our route

150
00:07:55,360 --> 00:07:59,430
‫the overview and the tour templates instead of using base.

151
00:07:59,430 --> 00:08:02,750
‫But still, of course, using all of this HTML

152
00:08:02,750 --> 00:08:04,620
‫that we have in here.

153
00:08:04,620 --> 00:08:08,460
‫Okay, so I hope that makes sense now.

154
00:08:08,460 --> 00:08:10,653
‫Let's actually go ahead and try this out.

155
00:08:12,030 --> 00:08:13,783
‫I'm just going to copy the URL.

156
00:08:14,960 --> 00:08:16,913
‫So now let's write overview.

157
00:08:18,960 --> 00:08:22,350
‫And so, indeed, we get the h1 which says

158
00:08:22,350 --> 00:08:24,460
‫This is the tour overview.

159
00:08:24,460 --> 00:08:27,810
‫And actually let's also use the title variable

160
00:08:27,810 --> 00:08:29,683
‫that we passed into these templates.

161
00:08:31,810 --> 00:08:34,096
‫Remember that here we have the title All Tours

162
00:08:34,096 --> 00:08:37,320
‫on the overview, and then on the tour,

163
00:08:37,320 --> 00:08:39,310
‫we have The Forest Hiker.

164
00:08:39,310 --> 00:08:41,563
‫So let's actually put that on the title.

165
00:08:42,590 --> 00:08:44,860
‫In fact, we can actually do that

166
00:08:44,860 --> 00:08:47,110
‫right here in the base template.

167
00:08:47,110 --> 00:08:48,850
‫So when right here in the overview

168
00:08:48,850 --> 00:08:51,140
‫we extend the base template,

169
00:08:51,140 --> 00:08:54,970
‫the base template still has access to the locals,

170
00:08:54,970 --> 00:08:57,843
‫so, to the variables, that we passed into the template.

171
00:08:58,810 --> 00:09:02,300
‫Here, we can do what we did before,

172
00:09:02,300 --> 00:09:05,973
‫so, interpolation with the variable, so with the local.

173
00:09:07,620 --> 00:09:12,580
‫So, all we need to do is put the title here, like this.

174
00:09:12,580 --> 00:09:14,400
‫And if we now reload,

175
00:09:14,400 --> 00:09:16,823
‫then you see All Tours here on top.

176
00:09:19,267 --> 00:09:20,573
‫Now let's try tour.

177
00:09:21,630 --> 00:09:24,420
‫And so this is the tour detail page,

178
00:09:24,420 --> 00:09:26,833
‫and up here you see The Forest Hiker Tour.

179
00:09:28,610 --> 00:09:30,660
‫Now if we load this one

180
00:09:30,660 --> 00:09:32,540
‫then we should get that placeholder

181
00:09:32,540 --> 00:09:34,230
‫that we put in the block.

182
00:09:34,230 --> 00:09:35,113
‫Remember that?

183
00:09:36,890 --> 00:09:40,430
‫And, indeed, This is the placeholder heading.

184
00:09:40,430 --> 00:09:41,570
‫Great.

185
00:09:41,570 --> 00:09:44,466
‫This is a powerful and very important mechanism

186
00:09:44,466 --> 00:09:47,220
‫for us to understand and to use

187
00:09:47,220 --> 00:09:49,200
‫for all of the templates that we're going to build

188
00:09:49,200 --> 00:09:50,550
‫in the rest of the section.

189
00:09:52,210 --> 00:09:54,250
‫In the next video, we will then finally

190
00:09:54,250 --> 00:09:57,710
‫clean up a little bit this mess that we have here,

191
00:09:57,710 --> 00:09:59,328
‫and refactor all of this code here

192
00:09:59,328 --> 00:10:01,303
‫into some different files.