1
00:00:01,057 --> 00:00:02,830
‫Instructeur : Dans cette conférence,

2
00:00:02,830 --> 00:00:06,513
‫vous allez apprendre les bases mêmes de l'utilisation des modèles Pug.

3
00:00:07,950 --> 00:00:12,950
‫Alors ouvrons notre modèle de base ici et commençons.

4
00:00:13,030 --> 00:00:17,720
‫Donc, en substance, Pug est une syntaxe simple sensible aux espaces

5
00:00:17,720 --> 00:00:22,550
‫blancs pour écrire du HTML, c'est donc vraiment l'essentiel de ce que c'est.

6
00:00:22,550 --> 00:00:24,900
‫Maintenant, cela signifie que tout ce que

7
00:00:24,900 --> 00:00:29,290
‫nous utilisons pour écrire des éléments html est leur nom et leur indentation

8
00:00:29,290 --> 00:00:30,630
‫dans notre code.

9
00:00:30,630 --> 00:00:32,320
‫Commençons donc par mettre

10
00:00:32,320 --> 00:00:35,093
‫en place une structure html très simple ici,

11
00:00:36,420 --> 00:00:38,170
‫alors laissez-nous un peu d'espace.

12
00:00:38,170 --> 00:00:41,680
‫Et donc html commence généralement toujours par le doctype

13
00:00:44,350 --> 00:00:45,990
‫et un html.

14
00:00:45,990 --> 00:00:49,300
‫Donc, pour pouvoir travailler correctement avec Pug, vous devez bien sûr

15
00:00:49,300 --> 00:00:51,943
‫avoir quelques connaissances en html ; sinon,

16
00:00:53,100 --> 00:00:56,280
‫cela pourrait ne pas avoir beaucoup de sens pour vous.

17
00:00:56,280 --> 00:00:58,090
‫Mais si vous ne connaissez pas le

18
00:00:58,090 --> 00:01:01,750
‫html, ne vous inquiétez pas, vous pouvez toujours suivre ce que je fais ici

19
00:01:01,750 --> 00:01:03,300
‫et peut-être simplement lire un

20
00:01:03,300 --> 00:01:05,250
‫article sur les premiers pas avec le html

21
00:01:05,250 --> 00:01:07,053
‫parce que c'est vraiment, vraiment simple.

22
00:01:08,250 --> 00:01:11,010
‫Quoi qu'il en soit, nous commençons

23
00:01:11,010 --> 00:01:14,500
‫toujours par doctype puis le premier élément, donc l'élément

24
00:01:14,500 --> 00:01:18,720
‫primordial dans tous nos documents html est toujours le html, puis

25
00:01:18,720 --> 00:01:21,960
‫à l'intérieur il y a généralement un élément head.

26
00:01:21,960 --> 00:01:23,650
‫Et donc dans Pug pour

27
00:01:23,650 --> 00:01:26,360
‫dire qu'un élément est à l'intérieur de l'autre, tout

28
00:01:26,360 --> 00:01:28,700
‫ce que nous faisons est d'utiliser une balise.

29
00:01:28,700 --> 00:01:32,550
‫Nous utilisons donc l'indentation, comme je l'ai mentionné au début,

30
00:01:32,550 --> 00:01:33,720
‫et c'est tout.

31
00:01:33,720 --> 00:01:37,090
‫C'est donc notre élément head, et donc à l'intérieur de cette

32
00:01:37,090 --> 00:01:39,770
‫tête créons le titre de la page Web.

33
00:01:39,770 --> 00:01:41,573
‫Et donc, encore une autre balise.

34
00:01:42,790 --> 00:01:43,773
‫Alors

35
00:01:45,490 --> 00:01:47,210
‫titre, et disons Natours.

36
00:01:47,210 --> 00:01:50,610
‫Bon, encore une fois, juste l'indentation, puis le

37
00:01:50,610 --> 00:01:52,997
‫nom de l'élément html, puis

38
00:01:52,997 --> 00:01:54,890
‫le contenu lui-même.

39
00:01:54,890 --> 00:01:57,450
‫Pas de balises d'ouverture, pas de balises

40
00:01:57,450 --> 00:02:01,130
‫de fermeture et aucun de l'encombrement que nous avons habituellement en HTML.

41
00:02:01,130 --> 00:02:04,040
‫Donc en fait, j'aime beaucoup cette syntaxe ici pour

42
00:02:04,040 --> 00:02:05,660
‫écrire des documents html, donc

43
00:02:05,660 --> 00:02:08,750
‫je la trouve vraiment incroyable, vraiment simple à utiliser et

44
00:02:08,750 --> 00:02:10,183
‫à lire aussi.

45
00:02:11,320 --> 00:02:14,290
‫Quoi qu'il en soit, c'est le contenu que nous voulons dans la

46
00:02:14,290 --> 00:02:16,660
‫tête, et maintenant nous voulons aussi créer un corps.

47
00:02:16,660 --> 00:02:19,660
‫Maintenant, ce corps n'est bien sûr pas à l'intérieur

48
00:02:19,660 --> 00:02:22,340
‫de la tête, mais au même niveau

49
00:02:22,340 --> 00:02:25,870
‫que la tête, donc fondamentalement aussi un enfant direct de html.

50
00:02:25,870 --> 00:02:29,190
‫Et donc tout ce que nous avons à faire est de revenir en arrière

51
00:02:30,130 --> 00:02:31,830
‫d'un niveau d'indentation, puis d'y créer l'élément.

52
00:02:32,900 --> 00:02:35,323
‫Ensuite, nous voulons notre h1, et

53
00:02:36,490 --> 00:02:39,070
‫nous devons maintenant utiliser un peu plus d'indentation.

54
00:02:39,070 --> 00:02:43,290
‫Alors bien sûr pas ici, pas ici, mais ici, donc à

55
00:02:43,290 --> 00:02:44,913
‫l'intérieur du corps.

56
00:02:47,404 --> 00:02:49,270
‫Ajoutons également un paragraphe,

57
00:02:49,270 --> 00:02:52,410
‫et donc pour cela nous utilisons l'élément p disant

58
00:02:52,410 --> 00:02:55,203
‫quelque chose comme, ceci est juste du texte.

59
00:02:56,228 --> 00:03:00,600
‫Alors essayons cela maintenant dans notre navigateur, alors

60
00:03:00,600 --> 00:03:03,223
‫rechargez, et c'est parti.

61
00:03:04,900 --> 00:03:08,200
‫Très bien, et donc ici vous voyez en

62
00:03:08,200 --> 00:03:12,400
‫fait toute la structure que nous venons de créer avec le doctype, l'élément

63
00:03:12,400 --> 00:03:15,740
‫html, et bien sûr la tête et le corps là-dedans.

64
00:03:15,740 --> 00:03:19,620
‫Et vous voyez également ce titre apparaître ici.

65
00:03:19,620 --> 00:03:24,140
‫Super, maintenant, incluons également un fichier CSS et

66
00:03:24,140 --> 00:03:27,360
‫le favicon à afficher ici

67
00:03:27,360 --> 00:03:31,280
‫au lieu de cette page générique là-bas.

68
00:03:31,280 --> 00:03:33,230
‫Et donc si vous connaissez un

69
00:03:33,230 --> 00:03:37,320
‫peu de HTML, vous savez que ce genre de choses appartient ici à la tête.

70
00:03:37,320 --> 00:03:40,650
‫Alors, comment incluriez-vous réellement une feuille de style CSS avec du

71
00:03:40,650 --> 00:03:42,233
‫code HTML normal ?

72
00:03:43,350 --> 00:03:45,310
‫Vous feriez quelque chose comme ça.

73
00:03:45,310 --> 00:03:48,100
‫Donc, vous créeriez un élément de lien,

74
00:03:48,100 --> 00:03:50,763
‫puis définiriez qu'il s'agit d'une feuille de

75
00:03:54,220 --> 00:03:55,853
‫style, puis également

76
00:03:57,590 --> 00:03:59,453
‫la référence, donc comme ceci.

77
00:04:00,393 --> 00:04:03,483
‫Donc style CSS. css, et donc

78
00:04:05,230 --> 00:04:10,230
‫ce que nous avons ici, donc ceci et ceci sont des attributs.

79
00:04:11,900 --> 00:04:15,260
‫Et donc avec Pug, nous écrivons des attributs comme celui-ci.

80
00:04:15,260 --> 00:04:17,610
‫Donc, au lieu d'avoir

81
00:04:17,610 --> 00:04:21,950
‫cet élément, nous écrivons simplement link, puis nous écrivons

82
00:04:21,950 --> 00:04:25,140
‫ces attributs entre parenthèses, donc comme ça.

83
00:04:25,140 --> 00:04:28,030
‫Donc, sans aucun espace et sans parenthèses ouvertes, et

84
00:04:28,030 --> 00:04:29,890
‫puis c'est là que

85
00:04:31,290 --> 00:04:33,343
‫nous écrivons ces attributs comme ceci.

86
00:04:35,410 --> 00:04:38,270
‫Et nous devrions toujours les écrire avec des guillemets simples et

87
00:04:38,270 --> 00:04:39,553
‫non des guillemets doubles,

88
00:04:41,600 --> 00:04:44,210
‫et nous n'avons donc plus besoin de celui-ci ici.

89
00:04:44,210 --> 00:04:47,140
‫Maintenant, une chose que je voulais également

90
00:04:47,140 --> 00:04:51,970
‫vous dire, c'est que nous pouvons également utiliser du HTML normal dans Pug.

91
00:04:51,970 --> 00:04:54,880
‫Donc, si vous le vouliez, vous pourriez laisser cette

92
00:04:54,880 --> 00:04:57,920
‫ligne de code ici et Pug la comprendrait alors très bien.

93
00:04:57,920 --> 00:04:59,760
‫Mais bien sûr, ici, je voulais

94
00:04:59,760 --> 00:05:02,223
‫vous montrer comment nous pouvons définir des attributs avec Pug.

95
00:05:03,860 --> 00:05:07,080
‫Et donc faisons maintenant la même chose pour le favicon, et donc

96
00:05:07,080 --> 00:05:09,960
‫encore une fois nous avons besoin d'un élément de lien,

97
00:05:09,960 --> 00:05:12,160
‫et là nous allons définir quelques attributs.

98
00:05:14,510 --> 00:05:17,323
‫Nous avons donc défini qu'il s'agit d'une

99
00:05:20,180 --> 00:05:23,723
‫icône de raccourci, nous spécifions également son type, donc image,

100
00:05:24,830 --> 00:05:26,713
‫et dans ce cas

101
00:05:27,966 --> 00:05:30,530
‫c'est un PNG, puis à nouveau sa

102
00:05:30,530 --> 00:05:35,530
‫référence, et c'est une image favicon. png.

103
00:05:37,300 --> 00:05:40,103
‫Et maintenant, allons de l'avant et testons cela,

104
00:05:40,980 --> 00:05:44,610
‫et vous verrez que cela semble en fait un peu différent.

105
00:05:44,610 --> 00:05:46,460
‫Nous avons donc notre favicon,

106
00:05:46,460 --> 00:05:48,943
‫et notre texte est maintenant bien empilé.

107
00:05:50,342 --> 00:05:54,120
‫Et en fait, vous voyez des propriétés CSS apparaître ici maintenant sur

108
00:05:54,120 --> 00:05:55,153
‫le côté gauche.

109
00:05:56,490 --> 00:05:59,470
‫Et c'est bien sûr parce que j'ai écrit

110
00:05:59,470 --> 00:06:01,443
‫une tonne de CSS

111
00:06:02,980 --> 00:06:07,870
‫en fait pour cette application, donc tout est en public, CSS et style.

112
00:06:07,870 --> 00:06:09,733
‫Donc vous voyez que j'ai

113
00:06:10,690 --> 00:06:14,600
‫comme, je ne sais pas, comme un millier de lignes ou même plus

114
00:06:14,600 --> 00:06:16,950
‫de CSS que j'ai écrit juste pour que

115
00:06:16,950 --> 00:06:19,053
‫cette application soit aussi belle qu'elle l'est.

116
00:06:21,784 --> 00:06:25,420
‫Donc, en d'autres termes, pourquoi ce style. css est en

117
00:06:25,420 --> 00:06:28,820
‫fait chargé automatiquement à partir du dossier CSS,

118
00:06:28,820 --> 00:06:32,110
‫et le favicon est également chargé automatiquement

119
00:06:32,110 --> 00:06:34,170
‫à partir du dossier image.

120
00:06:34,170 --> 00:06:38,040
‫Eh bien, tout d'abord, gardez à l'esprit que chacun

121
00:06:38,040 --> 00:06:41,433
‫de ces actifs déclenche en fait sa

122
00:06:42,330 --> 00:06:46,690
‫propre requête http, confirmons-le donc ici dans les sources ou

123
00:06:46,690 --> 00:06:48,920
‫dans le panneau réseau.

124
00:06:48,920 --> 00:06:51,270
‫Et donc ici vous voyez ces trois

125
00:06:51,270 --> 00:06:54,970
‫requêtes, donc une pour la page elle-même, l'autre pour notre style,

126
00:06:54,970 --> 00:06:56,593
‫et pour notre favicon.

127
00:06:59,280 --> 00:07:02,410
‫Et encore une fois, pourquoi cela

128
00:07:02,410 --> 00:07:06,020
‫fonctionne-t-il ainsi, car nous n'avons évidemment pas de gestionnaire

129
00:07:06,020 --> 00:07:09,460
‫de route pour l'un de ces fichiers ici.

130
00:07:09,460 --> 00:07:12,250
‫Mais c'est toujours un itinéraire si vous y

131
00:07:12,250 --> 00:07:15,140
‫réfléchissez, car c'est une demande d'obtention vers cette URL

132
00:07:15,140 --> 00:07:17,210
‫et aussi vers cette URL.

133
00:07:17,210 --> 00:07:20,930
‫Alors laissez-moi me rappeler pourquoi cela fonctionne réellement,

134
00:07:20,930 --> 00:07:24,590
‫et c'est à cause de ce middleware

135
00:07:24,590 --> 00:07:29,290
‫que nous avons défini quelque part ici, donc ceci ici.

136
00:07:29,290 --> 00:07:33,100
‫Alors rappelez-vous cela en utilisant express. statique, nous définissons

137
00:07:33,100 --> 00:07:36,190
‫essentiellement que tous les actifs statiques

138
00:07:36,190 --> 00:07:38,170
‫seront toujours automatiquement servis

139
00:07:38,170 --> 00:07:43,170
‫à partir d'un dossier appelé public, donc avec ce dossier ici.

140
00:07:43,690 --> 00:07:47,470
‫Et c'est pourquoi quand on dit style slash css, cela

141
00:07:47,470 --> 00:07:50,050
‫vient en fait du dossier public.

142
00:07:50,050 --> 00:07:54,473
‫Et donc ce dossier CSS est le dossier à l'intérieur de public, et il en va

143
00:07:55,612 --> 00:07:57,810
‫de même bien sûr pour les images.

144
00:07:57,810 --> 00:08:01,550
‫Donc, si dans notre html nous avons une favicon de barre oblique

145
00:08:01,550 --> 00:08:04,010
‫d'image, alors il ouvrira le dossier d'image

146
00:08:04,010 --> 00:08:06,720
‫qui se trouve à l'intérieur de notre dossier public.

147
00:08:06,720 --> 00:08:10,673
‫Encore une fois parce que nous l'avons défini ainsi dans notre application expresse.

148
00:08:12,360 --> 00:08:15,400
‫Vous avez donc déjà appris à créer des éléments

149
00:08:15,400 --> 00:08:17,570
‫dans Pug à l'aide de l'indentation

150
00:08:17,570 --> 00:08:20,470
‫et vous avez également appris à utiliser les attributs.

151
00:08:20,470 --> 00:08:21,810
‫Mais une autre

152
00:08:21,810 --> 00:08:24,380
‫chose vraiment cool est d'utiliser des variables ici.

153
00:08:24,380 --> 00:08:27,350
‫Alors laissez-moi maintenant vous montrer comment nous pouvons réellement transmettre

154
00:08:27,350 --> 00:08:31,040
‫des données dans un modèle, puis comment nous pouvons utiliser ces données ici

155
00:08:31,040 --> 00:08:32,153
‫même dans Pug.

156
00:08:35,300 --> 00:08:38,143
‫Rappelez-vous donc que nous avons cette route

157
00:08:39,090 --> 00:08:42,580
‫ici, que nous utilisons pour rendre notre modèle de base.

158
00:08:42,580 --> 00:08:43,860
‫Et bien sûr, si

159
00:08:43,860 --> 00:08:45,900
‫c'est plus tard, nous aurons en fait

160
00:08:45,900 --> 00:08:48,173
‫un fichier séparé, où tous ces itinéraires vivront alors.

161
00:08:49,050 --> 00:08:52,810
‫Mais pour l'instant, tout ce que je veux faire, c'est vraiment faire en sorte que cela fonctionne.

162
00:08:52,810 --> 00:08:57,030
‫Quoi qu'il en soit, pour maintenant transmettre des données dans ce modèle ici,

163
00:08:57,030 --> 00:09:00,560
‫tout ce que nous avons à faire est de

164
00:09:00,560 --> 00:09:04,140
‫définir un objet ici, puis nous y mettrons simplement des données.

165
00:09:04,140 --> 00:09:07,263
‫Et ces données seront ensuite disponibles dans le modèle Pug.

166
00:09:08,390 --> 00:09:10,910
‫Créons donc simplement un objet ici

167
00:09:10,910 --> 00:09:15,853
‫avec une propriété de visite et définissons-le sur The Forest Tiger,

168
00:09:18,795 --> 00:09:19,712
‫puis...

169
00:09:20,950 --> 00:09:23,660
‫créons également une propriété utilisateur

170
00:09:23,660 --> 00:09:25,993
‫et définissons-la sur Jonas.

171
00:09:28,180 --> 00:09:30,710
‫Et ces variables que nous avons transmises ici,

172
00:09:30,710 --> 00:09:33,543
‫elles sont alors appelées locales dans le fichier Pug.

173
00:09:34,840 --> 00:09:39,380
‫Alors maintenant, allons de l'avant et utilisons ces données.

174
00:09:39,380 --> 00:09:41,630
‫Et ce que je veux faire

175
00:09:41,630 --> 00:09:45,140
‫maintenant, c'est mettre cette variable de tournée sur notre h1.

176
00:09:45,140 --> 00:09:48,600
‫Donc, en gros, je veux créer un élément h1, où

177
00:09:48,600 --> 00:09:51,510
‫le contenu est le nom de la tournée.

178
00:09:51,510 --> 00:09:53,260
‫Et la façon la

179
00:09:53,260 --> 00:09:56,510
‫plus simple de le faire est d'utiliser simplement la syntaxe

180
00:09:56,510 --> 00:10:01,340
‫égale comme celle-ci, donc h1 est égal à, puis un espace, puis un tour.

181
00:10:01,340 --> 00:10:04,353
‫Et c'est tout, c'est vraiment tout ce que nous avons à faire.

182
00:10:05,830 --> 00:10:07,660
‫Alors prenons celui-ci ici, et

183
00:10:07,660 --> 00:10:09,803
‫donc en fait une autre chose que je

184
00:10:09,803 --> 00:10:12,830
‫voulais vous montrer est que dans Pug, nous pouvons créer des

185
00:10:12,830 --> 00:10:15,450
‫commentaires, et nous pouvons créer deux types de commentaires.

186
00:10:15,450 --> 00:10:19,100
‫Donc, le plus simple est tout simplement comme en JavaScript,

187
00:10:19,100 --> 00:10:20,703
‫donc comme ça.

188
00:10:21,890 --> 00:10:23,600
‫Et cela créera ensuite

189
00:10:23,600 --> 00:10:26,120
‫un commentaire qui sera visible dans le html.

190
00:10:26,120 --> 00:10:27,770
‫Jetons donc maintenant un coup

191
00:10:29,290 --> 00:10:30,520
‫d'œil à ceci,

192
00:10:30,520 --> 00:10:34,330
‫et gardons à l'esprit que maintenant le h1 ne sera plus The Park

193
00:10:34,330 --> 00:10:37,480
‫Camper, mais à la place ce devrait être The Forest Hiker

194
00:10:37,480 --> 00:10:39,520
‫parce que c'est la variable de la

195
00:10:39,520 --> 00:10:42,090
‫tournée, ou en d'autres termes la tournée locale,

196
00:10:42,090 --> 00:10:44,640
‫qui il est maintenant passé dans ce modèle.

197
00:10:44,640 --> 00:10:46,390
‫Et donc ici, j'ai ensuite

198
00:10:46,390 --> 00:10:49,373
‫mis cela dans le h1 en utilisant la syntaxe égale.

199
00:10:51,070 --> 00:10:53,160
‫Alors vérifions cela, jetez un œil

200
00:10:53,160 --> 00:10:54,293
‫à ceci.

201
00:10:55,360 --> 00:10:57,743
‫Et en effet, c'est maintenant The Forest Hiker.

202
00:11:00,020 --> 00:11:02,920
‫Et voici également ce commentaire dont nous

203
00:11:02,920 --> 00:11:05,250
‫venons de parler également.

204
00:11:05,250 --> 00:11:07,940
‫Donc, comme je l'ai dit, cette double barre oblique

205
00:11:07,940 --> 00:11:10,810
‫que nous avons faite là crée essentiellement un commentaire html.

206
00:11:10,810 --> 00:11:14,820
‫Donc, cette syntaxe ici est la façon dont nous écrivons les commentaires

207
00:11:14,820 --> 00:11:19,380
‫en html, mais si vous voulez vraiment que ce soit un commentaire pour le fichier

208
00:11:19,380 --> 00:11:21,950
‫Pug mais pas vraiment sorti en html, vous

209
00:11:21,950 --> 00:11:24,093
‫devez ajouter un tiret comme celui-ci.

210
00:11:26,350 --> 00:11:29,513
‫Donc, si nous rechargeons maintenant ceci, alors ce commentaire devrait disparaître.

211
00:11:31,880 --> 00:11:34,550
‫Donc, ce genre de code ici, que nous avons écrit

212
00:11:34,550 --> 00:11:36,163
‫ici, est appelé code tamponné.

213
00:11:37,080 --> 00:11:40,550
‫Et en fait, nous pourrions également écrire

214
00:11:40,550 --> 00:11:44,880
‫du JavaScript ici, disons donc que h2 est égal à l'utilisateur,

215
00:11:44,880 --> 00:11:48,700
‫puis nous pouvons également appeler toUppercase à ce sujet.

216
00:11:53,080 --> 00:11:54,710
‫Du JavaScript si simple ici

217
00:11:54,710 --> 00:11:57,600
‫car ici encore, dans ce code tamponné, c'est ainsi

218
00:11:57,600 --> 00:11:59,150
‫que cela s'appelle, nous

219
00:11:59,150 --> 00:12:02,403
‫pouvons exécuter du JavaScript simple comme nous l'avons fait ici.

220
00:12:05,840 --> 00:12:10,263
‫Alors en effet, c'est parti, Jonas en majuscule.

221
00:12:12,160 --> 00:12:16,030
‫Donc du code tamponné, et si nous avons du code tamponné,

222
00:12:16,030 --> 00:12:19,660
‫alors nous devons également avoir du code non tamponné.

223
00:12:19,660 --> 00:12:22,890
‫Et donc fondamentalement, le code sans tampon est du

224
00:12:22,890 --> 00:12:25,620
‫code qui n'ajoutera rien à la sortie.

225
00:12:25,620 --> 00:12:28,510
‫Et nous écrivons cela en écrivant dash, puis

226
00:12:28,510 --> 00:12:30,863
‫faisons simplement du JavaScript ici,

227
00:12:31,990 --> 00:12:34,610
‫par exemple en définissant simplement une variable.

228
00:12:34,610 --> 00:12:38,330
‫Disons donc que const x est égal à neuf,

229
00:12:38,330 --> 00:12:40,720
‫puis reprenons du code tamponné.

230
00:12:40,720 --> 00:12:45,200
‫Donc encore une fois du code qui va ajouter quelque chose à la sortie.

231
00:12:45,200 --> 00:12:47,870
‫Et encore une fois, nous pouvons utiliser JavaScript

232
00:12:47,870 --> 00:12:50,290
‫ici, alors faisons simplement deux fois x.

233
00:12:50,290 --> 00:12:54,613
‫Et donc ici, nous aurons alors accès à cette variable x.

234
00:12:56,710 --> 00:13:00,833
‫Cela devrait donc être 18 et c'est effectivement le cas.

235
00:13:01,990 --> 00:13:04,603
‫Voilà donc tous les petits morceaux de code

236
00:13:04,603 --> 00:13:06,950
‫différents que nous pouvons utiliser dans Pug.

237
00:13:06,950 --> 00:13:11,130
‫Maintenant, il existe également une troisième façon d'écrire du code, et permettez-moi

238
00:13:11,130 --> 00:13:12,970
‫de le montrer ici.

239
00:13:12,970 --> 00:13:15,240
‫C'est ce qu'on appelle l'interpolation, et

240
00:13:15,240 --> 00:13:16,690
‫en fait, celle-ci

241
00:13:16,690 --> 00:13:19,370
‫ressemble un peu aux chaînes du modèle ES6.

242
00:13:19,370 --> 00:13:21,430
‫Donc, au lieu d'avoir juste Natours ici,

243
00:13:21,430 --> 00:13:23,233
‫ajoutons également le nom de

244
00:13:24,100 --> 00:13:26,883
‫la tournée, et ainsi nous pouvons le faire comme ceci.

245
00:13:29,380 --> 00:13:33,620
‫Donc, avec la chaîne de modèle dans ES6, cela fonctionne comme ceci,

246
00:13:33,620 --> 00:13:36,553
‫mais ici dans Pug, c'est avec ce

247
00:13:37,660 --> 00:13:39,350
‫hachage, donc comme ça.

248
00:13:39,350 --> 00:13:41,230
‫Et ici, nous devons procéder

249
00:13:41,230 --> 00:13:45,090
‫comme ceci essentiellement parce que c'est du code, donc c'est variable, mais ce

250
00:13:45,090 --> 00:13:47,700
‫n'est pas du code, c'est simplement du texte.

251
00:13:47,700 --> 00:13:51,500
‫Et donc nous ne pouvons pas le faire parce que tout ce qui est

252
00:13:51,500 --> 00:13:53,630
‫ici est alors traité comme du JavaScript,

253
00:13:53,630 --> 00:13:57,150
‫et donc puisque ce n'est pas du JavaScript, cela ne fonctionnerait pas.

254
00:13:57,150 --> 00:13:59,810
‫Et donc ce n'est ici qu'une chaîne,

255
00:13:59,810 --> 00:14:02,730
‫et donc si nous voulons ajouter quelque chose à

256
00:14:02,730 --> 00:14:05,430
‫cette chaîne, alors nous devons utiliser cette syntaxe d'interpolation.

257
00:14:05,430 --> 00:14:07,053
‫D'accord, ça a du sens ?

258
00:14:08,620 --> 00:14:11,320
‫Ajoutons simplement comme cette barre ici, qui fait

259
00:14:11,320 --> 00:14:13,940
‫aussi simplement partie de la chaîne.

260
00:14:13,940 --> 00:14:15,717
‫Et maintenant, nous nous attendons à

261
00:14:17,010 --> 00:14:18,573
‫ce que Natours slash The

262
00:14:19,440 --> 00:14:21,810
‫Forest Hiker, c'est donc exactement ce qu'ils ont obtenu.

263
00:14:21,810 --> 00:14:24,700
‫Génial, ce sont donc les bases mêmes

264
00:14:24,700 --> 00:14:26,760
‫du travail avec Pug.

265
00:14:26,760 --> 00:14:28,970
‫Mais bien sûr, il y a beaucoup plus à apprendre

266
00:14:28,970 --> 00:14:30,330
‫et continuons donc à le

267
00:14:30,330 --> 00:14:31,980
‫faire au cours des deux prochaines conférences.