1
00:00:00,990 --> 00:00:01,900
‫-: D'accord.

2
00:00:01,900 --> 00:00:04,500
‫Dans cette vidéo, je vais vous montrer

3
00:00:04,500 --> 00:00:06,180
‫comment utiliser l'une des

4
00:00:06,180 --> 00:00:09,440
‫fonctionnalités les plus importantes et les plus complexes de Pug.

5
00:00:09,440 --> 00:00:11,940
‫Et ce sont des extensions.

6
00:00:11,940 --> 00:00:14,280
‫Avec extend, nous pourrons

7
00:00:14,280 --> 00:00:17,000
‫utiliser la même mise en page

8
00:00:17,000 --> 00:00:20,770
‫de base pour chaque page que nous souhaitons rendre.

9
00:00:20,770 --> 00:00:24,280
‫À l'heure actuelle, notre modèle de base est en quelque sorte terminé

10
00:00:24,280 --> 00:00:27,210
‫avec un bel en-tête et un joli pied de page.

11
00:00:27,210 --> 00:00:30,760
‫Alors maintenant, commençons à remplir son contenu.

12
00:00:30,760 --> 00:00:32,670
‫Maintenant, bien sûr, nous

13
00:00:32,670 --> 00:00:35,560
‫voulons charger un contenu différent pour différentes pages.

14
00:00:35,560 --> 00:00:38,550
‫Et pour commencer, nous voulons avoir une page d'aperçu avec

15
00:00:38,550 --> 00:00:40,860
‫toutes les visites, puis une page avec

16
00:00:40,860 --> 00:00:43,763
‫tous les détails de la visite pour une visite spécifique.

17
00:00:44,860 --> 00:00:47,080
‫Implémentons maintenant quelques routes pour

18
00:00:47,080 --> 00:00:48,713
‫ces deux pages.

19
00:00:51,410 --> 00:00:53,640
‫Et je vais le faire juste en dessous

20
00:00:53,640 --> 00:00:55,840
‫du premier que nous avons déjà créé.

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

22
00:01:09,440 --> 00:01:12,750
‫puis quelque chose de très similaire à avant.

23
00:01:12,750 --> 00:01:15,430
‫Et encore une fois, un peu plus tard, dans la

24
00:01:15,430 --> 00:01:16,910
‫vidéo suivante, nous mettrons ensuite

25
00:01:16,910 --> 00:01:18,863
‫ces routes dans leur propre fichier séparé.

26
00:01:21,530 --> 00:01:24,560
‫Alors, rendez-vous, et maintenant sur cette page de présentation,

27
00:01:24,560 --> 00:01:26,030
‫nous voulons en

28
00:01:26,030 --> 00:01:28,223
‫fait rendre un modèle appelé présentation.

29
00:01:32,440 --> 00:01:34,000
‫Cela n'existe pas

30
00:01:34,000 --> 00:01:36,903
‫encore, alors allons-y maintenant rapidement et créons-en un.

31
00:01:40,400 --> 00:01:43,010
‫Alors, vue d'ensemble. pug Et

32
00:01:48,570 --> 00:01:51,640
‫en fait, passons aussi quelques données.

33
00:01:51,640 --> 00:01:54,080
‫Et on passera dans le titre de la page

34
00:01:54,080 --> 00:01:56,113
‫qui dans ce cas, on va dire, Tous

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

36
00:02:00,780 --> 00:02:03,130
‫Maintenant, récupérons ce code

37
00:02:03,130 --> 00:02:05,503
‫et copions-le pour la visite.

38
00:02:06,680 --> 00:02:11,270
‫Nous voulons donc à nouveau un itinéraire pour un circuit spécifique.

39
00:02:11,270 --> 00:02:12,770
‫Et ici, nous

40
00:02:12,770 --> 00:02:16,160
‫voudrons avoir un modèle qui s'appelle aussi tour.

41
00:02:16,160 --> 00:02:18,260
‫Et puis le titre de celui-ci, pour

42
00:02:18,260 --> 00:02:19,300
‫l'instant, faisons-le à

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

44
00:02:25,830 --> 00:02:27,990
‫Donc, pour l'instant, ce n'est qu'un espace réservé, et

45
00:02:27,990 --> 00:02:29,470
‫bien sûr, un peu plus

46
00:02:29,470 --> 00:02:31,360
‫tard, nous allons ensuite créer cette dynamique.

47
00:02:31,360 --> 00:02:33,120
‫Parce qu'à ce stade, nous

48
00:02:33,120 --> 00:02:35,723
‫sommes encore en train d'apprendre comment Pug fonctionne vraiment.

49
00:02:38,830 --> 00:02:42,323
‫Créons maintenant également ce modèle de visite.

50
00:02:44,070 --> 00:02:45,810
‫Et c'est tout.

51
00:02:45,810 --> 00:02:49,363
‫Bon, maintenant que ces deux nouveaux modèles sont terminés, c'est

52
00:02:50,810 --> 00:02:52,680
‫ce que nous allons faire.

53
00:02:52,680 --> 00:02:54,960
‫Dans chacun de ces modèles, et dans ce

54
00:02:54,960 --> 00:02:56,820
‫cas ici la vue d'ensemble,

55
00:02:56,820 --> 00:02:59,500
‫nous souhaitons uniquement mettre le contenu de cette page spécifique.

56
00:02:59,500 --> 00:03:01,720
‫Nous ne voulons donc ni pied de page ni

57
00:03:01,720 --> 00:03:04,260
‫en-tête ni aucun des éléments que nous avons dans la base.

58
00:03:04,260 --> 00:03:06,040
‫Donc, encore une fois, vraiment juste

59
00:03:06,040 --> 00:03:07,900
‫le contenu de la page de présentation.

60
00:03:07,900 --> 00:03:10,890
‫C'est donc exactement ce que nous allons mettre dans

61
00:03:10,890 --> 00:03:14,000
‫ce fichier, puis nous injecterons essentiellement ce contenu dans

62
00:03:14,000 --> 00:03:16,300
‫le modèle de base, que nous

63
00:03:16,300 --> 00:03:18,316
‫pouvons appeler le modèle parent.

64
00:03:18,316 --> 00:03:21,620
‫Ce processus est alors appelé extension.

65
00:03:21,620 --> 00:03:24,750
‫Ainsi, chaque fois que le modèle de vue d'ensemble est

66
00:03:24,750 --> 00:03:26,550
‫rendu, nous prenons le modèle de

67
00:03:26,550 --> 00:03:29,560
‫base et le remplissons avec le contenu de ce fichier,

68
00:03:29,560 --> 00:03:31,353
‫et nous l'étendons donc.

69
00:03:32,930 --> 00:03:35,080
‫Voici comment nous mettons cela en œuvre.

70
00:03:35,080 --> 00:03:38,203
‫Tout d'abord, dans la base, nous devons mettre un bloc.

71
00:03:40,110 --> 00:03:41,560
‫Je vais le faire ici.

72
00:03:42,890 --> 00:03:45,180
‫Alors supprimons tout ça,

73
00:03:45,180 --> 00:03:47,900
‫et ici, mettons un bloc.

74
00:03:47,900 --> 00:03:52,320
‫Et ce bloc, je vais l'appeler contenu.

75
00:03:52,320 --> 00:03:54,260
‫Ensuite, à l'intérieur de ce bloc, nous pouvons

76
00:03:54,260 --> 00:03:55,303
‫également avoir du contenu.

77
00:03:56,490 --> 00:03:58,520
‫Mettons donc simplement un h1 ici.

78
00:03:58,520 --> 00:04:01,740
‫Mais ce contenu sera ensuite écrasé par la suite.

79
00:04:01,740 --> 00:04:03,600
‫Mais de toute façon, mettons-le

80
00:04:03,600 --> 00:04:06,230
‫ici juste comme un espace réservé, en gros.

81
00:04:06,230 --> 00:04:09,630
‫Il s'agit donc d'un en-tête d'espace réservé.

82
00:04:12,150 --> 00:04:15,600
‫D'accord, nous avons donc notre bloc ici, et maintenant nous

83
00:04:15,600 --> 00:04:18,280
‫pouvons aller sur notre page de présentation

84
00:04:18,280 --> 00:04:21,473
‫et dire que nous voulons étendre notre modèle de base.

85
00:04:22,360 --> 00:04:25,053
‫Alors, étendez la base.

86
00:04:26,400 --> 00:04:28,420
‫Ou en fait, cela s'appelle s'étend.

87
00:04:28,420 --> 00:04:30,823
‫Ce fichier étend donc le fichier de base.

88
00:04:31,970 --> 00:04:33,528
‫Et bien sûr, si celui-ci ici

89
00:04:33,528 --> 00:04:36,157
‫s'appellerait, par exemple, index. carlin, alors

90
00:04:36,157 --> 00:04:38,853
‫nous dirions ici étend l'index.

91
00:04:40,660 --> 00:04:42,510
‫Maintenant, quel est exactement le contenu

92
00:04:42,510 --> 00:04:45,083
‫qui va être étendu dans le modèle de base ?

93
00:04:46,000 --> 00:04:49,203
‫Eh bien, c'est tout ce que nous mettons dans le bloc de contenu.

94
00:04:52,030 --> 00:04:55,573
‫Donc, également ici, nous créons un bloc appelé contenu.

95
00:04:57,410 --> 00:05:01,063
‫Et puis là-dedans, on peut comme toujours mettre notre contenu.

96
00:05:02,650 --> 00:05:06,243
‫Disons simplement, ceci est la vue d'ensemble de la tournée.

97
00:05:09,180 --> 00:05:12,075
‫Ici, nous redéfinissons essentiellement le bloc de contenu qui

98
00:05:12,075 --> 00:05:14,073
‫se trouve dans la base.

99
00:05:15,270 --> 00:05:16,900
‫Donc, encore une fois,

100
00:05:16,900 --> 00:05:19,450
‫nous avons ce bloc ici qui s'appelle contenu,

101
00:05:19,450 --> 00:05:22,400
‫et maintenant en mettant le même bloc de contenu

102
00:05:22,400 --> 00:05:24,370
‫ici même dans cette page, qui

103
00:05:24,370 --> 00:05:27,293
‫étend ensuite la base, nous redéfinissons fondamentalement ce bloc.

104
00:05:28,171 --> 00:05:31,820
‫Chaque fichier ne peut étendre qu'un autre fichier.

105
00:05:31,820 --> 00:05:33,860
‫Nous ne pouvons donc étendre que

106
00:05:33,860 --> 00:05:38,390
‫la base ici, mais nous pouvons avoir des blocs différents dans chacun des fichiers.

107
00:05:38,390 --> 00:05:41,730
‫Donc, nous pourrions également avoir un bloc pour la tête ici.

108
00:05:41,730 --> 00:05:43,760
‫Et puis nous pourrions étendre cela également

109
00:05:43,760 --> 00:05:45,790
‫dans le modèle de vue d'ensemble.

110
00:05:45,790 --> 00:05:48,330
‫Et, en fait, nous le ferons un peu plus tard.

111
00:05:48,330 --> 00:05:51,260
‫Mais pour l'instant, bien sûr, restons simples.

112
00:05:51,260 --> 00:05:52,923
‫D'accord, cela a-t-il un sens ?

113
00:05:54,270 --> 00:05:57,020
‫Allons de l'avant et faisons la même chose ici.

114
00:05:57,930 --> 00:06:02,190
‫Cela étend donc la mise en page de base.

115
00:06:02,190 --> 00:06:04,083
‫Et qu'est-ce que ça prolonge exactement ?

116
00:06:05,200 --> 00:06:08,900
‫Eh bien, cela étendra le bloc de contenu.

117
00:06:08,900 --> 00:06:11,660
‫Et donc celle-ci, nous la mettrons

118
00:06:11,660 --> 00:06:16,180
‫sur le h1, C'est la page de détail de la tournée.

119
00:06:19,230 --> 00:06:21,830
‫Alors, avant de tester cela, récapitulons rapidement ce que

120
00:06:21,830 --> 00:06:23,020
‫nous venons de faire.

121
00:06:23,020 --> 00:06:26,100
‫Nous voulons donc utiliser ce modèle de base ici en

122
00:06:26,100 --> 00:06:28,330
‫quelque sorte comme point de départ.

123
00:06:28,330 --> 00:06:31,600
‫Donc, en tant que squelette qui a tout le

124
00:06:31,600 --> 00:06:32,815
‫contenu HTML,

125
00:06:32,815 --> 00:06:36,360
‫comme cet en-tête, ainsi que l'en-tête et le pied de

126
00:06:36,360 --> 00:06:39,610
‫page, mais pas le contenu spécifique pour chaque page.

127
00:06:39,610 --> 00:06:41,720
‫Ensuite, dans chacune de ces pages

128
00:06:41,720 --> 00:06:44,933
‫ici, nous n'avons que le contenu de cette page elle-même.

129
00:06:46,020 --> 00:06:47,650
‫Et nous pouvons le

130
00:06:47,650 --> 00:06:49,913
‫faire parce que nous pouvons essentiellement injecter

131
00:06:49,913 --> 00:06:53,650
‫ce contenu ici dans le modèle de base parent en utilisant extend.

132
00:06:53,650 --> 00:06:57,353
‫Donc, fondamentalement, pensez à cela comme le contraire de l'inclusion.

133
00:06:58,881 --> 00:07:03,298
‫Ici, ce modèle comprenait deux modèles parents.

134
00:07:03,298 --> 00:07:07,424
‫Ce modèle comprenait ici deux modèles enfants, l'en-tête

135
00:07:07,424 --> 00:07:10,293
‫et le pied de page.

136
00:07:12,284 --> 00:07:14,200
‫Donc, encore une fois, la base est

137
00:07:14,200 --> 00:07:17,140
‫le parent, et l'en-tête et le pied de page sont les enfants.

138
00:07:17,140 --> 00:07:19,890
‫Donc ici, le parent a inclus les enfants.

139
00:07:19,890 --> 00:07:22,740
‫Mais avec les extensions, c'est l'inverse, où les enfants,

140
00:07:22,740 --> 00:07:25,660
‫comme nous pouvons le dire, nous pouvons donc en quelque

141
00:07:25,660 --> 00:07:27,300
‫sorte dire que la vue

142
00:07:27,300 --> 00:07:29,570
‫d'ensemble est également un enfant de la

143
00:07:29,570 --> 00:07:33,160
‫base, mais ici, c'est l'enfant qui inclut en quelque sorte la base.

144
00:07:33,160 --> 00:07:36,883
‫Donc, en gros, tout ce qui entoure ce contenu de bloc.

145
00:07:38,260 --> 00:07:40,960
‫Vous pouvez imaginer que tout ce

146
00:07:40,960 --> 00:07:43,750
‫code ici, tout ce qui n'est pas le

147
00:07:43,750 --> 00:07:47,090
‫contenu du bloc est ensuite copié directement dans ce fichier.

148
00:07:47,090 --> 00:07:49,843
‫C'est une belle façon d'imaginer comment cela fonctionne.

149
00:07:51,334 --> 00:07:55,360
‫Cela nous permet ensuite d'utiliser ici dans notre itinéraire la

150
00:07:55,360 --> 00:07:59,430
‫vue d'ensemble et les modèles de tournée au lieu d'utiliser la base.

151
00:07:59,430 --> 00:08:02,750
‫Mais toujours, bien sûr, en utilisant tout ce HTML

152
00:08:02,750 --> 00:08:04,620
‫que nous avons ici.

153
00:08:04,620 --> 00:08:08,460
‫Bon, j'espère que ça a du sens maintenant.

154
00:08:08,460 --> 00:08:10,653
‫Allons de l'avant et essayons cela.

155
00:08:12,030 --> 00:08:13,783
‫Je vais juste copier l'URL.

156
00:08:14,960 --> 00:08:16,913
‫Alors maintenant, écrivons un aperçu.

157
00:08:18,960 --> 00:08:22,350
‫Et donc, en effet, nous obtenons le h1 qui dit Ceci est

158
00:08:22,350 --> 00:08:24,460
‫la vue d'ensemble de la tournée.

159
00:08:24,460 --> 00:08:27,810
‫Et en fait, utilisons également la variable de titre que nous

160
00:08:27,810 --> 00:08:29,683
‫avons transmise à ces modèles.

161
00:08:31,810 --> 00:08:34,096
‫N'oubliez pas qu'ici nous avons le titre

162
00:08:34,096 --> 00:08:37,320
‫All Tours sur la vue d'ensemble, puis sur la tournée,

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

164
00:08:39,310 --> 00:08:41,563
‫Mettons donc cela dans le titre.

165
00:08:42,590 --> 00:08:44,860
‫En fait, nous pouvons le faire ici

166
00:08:44,860 --> 00:08:47,110
‫même dans le modèle de base.

167
00:08:47,110 --> 00:08:48,850
‫Donc, quand ici dans

168
00:08:48,850 --> 00:08:51,140
‫la vue d'ensemble nous étendons le modèle

169
00:08:51,140 --> 00:08:54,970
‫de base, le modèle de base a toujours accès aux locaux, donc,

170
00:08:54,970 --> 00:08:57,843
‫aux variables, que nous avons passées dans le modèle.

171
00:08:58,810 --> 00:09:02,300
‫Ici, on peut faire ce qu'on a fait

172
00:09:02,300 --> 00:09:05,973
‫avant, donc, interpolation avec la variable, donc avec le local.

173
00:09:07,620 --> 00:09:12,580
‫Donc, tout ce que nous avons à faire est de mettre le titre ici, comme ceci.

174
00:09:12,580 --> 00:09:14,400
‫Et si nous rechargeons maintenant, alors

175
00:09:14,400 --> 00:09:16,823
‫vous voyez Toutes les visites ici en haut.

176
00:09:19,267 --> 00:09:20,573
‫Essayons maintenant la tournée.

177
00:09:21,630 --> 00:09:24,420
‫Et c'est donc la page de détail de la visite,

178
00:09:24,420 --> 00:09:26,833
‫et ici vous voyez The Forest Hiker Tour.

179
00:09:28,610 --> 00:09:30,660
‫Maintenant, si nous chargeons celui-ci, nous devrions

180
00:09:30,660 --> 00:09:32,540
‫obtenir cet espace réservé que nous

181
00:09:32,540 --> 00:09:34,230
‫avons mis dans le bloc.

182
00:09:34,230 --> 00:09:35,113
‫Vous vous en souvenez ?

183
00:09:36,890 --> 00:09:40,430
‫Et, en effet, Ceci est le titre de l'espace réservé.

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

185
00:09:41,570 --> 00:09:44,466
‫Il s'agit d'un mécanisme puissant et très important que nous

186
00:09:44,466 --> 00:09:47,220
‫devons comprendre et utiliser pour tous les modèles que

187
00:09:47,220 --> 00:09:49,200
‫nous allons créer dans le reste

188
00:09:49,200 --> 00:09:50,550
‫de la section.

189
00:09:52,210 --> 00:09:54,250
‫Dans la vidéo suivante, nous allons

190
00:09:54,250 --> 00:09:57,710
‫enfin nettoyer un peu ce désordre que nous avons ici

191
00:09:57,710 --> 00:09:59,328
‫et refactoriser tout ce

192
00:09:59,328 --> 00:10:01,303
‫code ici dans des fichiers différents.