1
00:00:01,010 --> 00:00:03,430
‫Instructeur : Dans cette conférence, je veux juste vous montrer

2
00:00:03,430 --> 00:00:05,760
‫très rapidement une fonctionnalité que nous avons réellement dans

3
00:00:05,760 --> 00:00:07,330
‫tous les langages de programmation.

4
00:00:07,330 --> 00:00:09,870
‫Nous devons simplement inclure un fichier et dans ce

5
00:00:09,870 --> 00:00:12,313
‫cas, un modèle dans un autre modèle.

6
00:00:13,770 --> 00:00:16,250
‫Disons donc que nous voulions garder notre

7
00:00:16,250 --> 00:00:18,540
‫mise en page de base ici

8
00:00:18,540 --> 00:00:20,720
‫vraiment propre sans aucun contenu.

9
00:00:20,720 --> 00:00:23,460
‫Et donc ce que nous allons faire, c'est mettre tout

10
00:00:23,460 --> 00:00:26,180
‫le code de l'en-tête dans un seul fichier d'en-tête.

11
00:00:26,180 --> 00:00:29,040
‫Et puis incluez ce fichier ici.

12
00:00:29,040 --> 00:00:31,470
‫Et pareil aussi pour le pied de page.

13
00:00:31,470 --> 00:00:33,990
‫Et donc, notre bloc de contenu,

14
00:00:33,990 --> 00:00:35,670
‫donc fondamentalement, notre

15
00:00:35,670 --> 00:00:39,650
‫corps ici devient cet élément très propre uniquement avec ces

16
00:00:39,650 --> 00:00:42,780
‫inclusions, puis ce contenu ici pour le moment.

17
00:00:42,780 --> 00:00:43,613
‫D'accord.

18
00:00:43,613 --> 00:00:47,633
‫Encore une fois, créons ici un nouveau fichier pour l'en-tête.

19
00:00:49,950 --> 00:00:51,000
‫dot pug

20
00:00:51,000 --> 00:00:54,640
‫Et en fait j'aime préfixer ces fichiers qui ne servent qu'à

21
00:00:54,640 --> 00:00:57,083
‫être inclus avec un trait de soulignement.

22
00:00:58,060 --> 00:01:00,710
‫Et si vous connaissez quelque chose

23
00:01:00,710 --> 00:01:03,423
‫comme Sass, cela vous sera également familier.

24
00:01:04,310 --> 00:01:08,400
‫Bon, allons maintenant ajouter et coller ceci ici, et non ce

25
00:01:08,400 --> 00:01:10,110
‫code, donc je suppose

26
00:01:10,110 --> 00:01:13,740
‫que j'ai oublié de le copier ou de couper même.

27
00:01:13,740 --> 00:01:16,030
‫Et puis collez-le ici.

28
00:01:16,030 --> 00:01:18,940
‫Et maintenant, cette indentation est complètement fausse

29
00:01:18,940 --> 00:01:22,040
‫ici, car maintenant nous avons trois niveaux, comme

30
00:01:22,040 --> 00:01:24,870
‫vous pouvez le voir, donc un,

31
00:01:24,870 --> 00:01:28,520
‫deux, trois niveaux où ce code devrait réellement être ici.

32
00:01:28,520 --> 00:01:31,940
‫D'accord, et maintenant nous devons ajouter et corriger cela, mais ce que

33
00:01:31,940 --> 00:01:35,250
‫nous pouvons réellement faire au lieu de le faire manuellement, c'est

34
00:01:35,250 --> 00:01:38,423
‫d'utiliser une belle extension qui fait cela pour nous.

35
00:01:39,400 --> 00:01:41,313
‫Alors ici, dans mon onglet

36
00:01:42,280 --> 00:01:44,930
‫extension, laissez-moi vous montrer l'extension que je veux dire.

37
00:01:44,930 --> 00:01:48,380
‫Et cela s'appelle Pug embellir.

38
00:01:48,380 --> 00:01:53,330
‫D'accord, alors allez-y et installez ce paquet, très bien.

39
00:01:53,330 --> 00:01:55,210
‫Et une fois cela

40
00:01:55,210 --> 00:01:57,350
‫fait, vous pouvez simplement sélectionner

41
00:01:57,350 --> 00:02:00,970
‫tout le code ici en appuyant sur la commande-A, puis

42
00:02:00,970 --> 00:02:03,810
‫créer une commande VS Code en disant commande-shift-P.

43
00:02:03,810 --> 00:02:06,310
‫Et puis ici, vous écrivez carlin.

44
00:02:06,310 --> 00:02:08,800
‫Et donc cela embellira alors le carlin.

45
00:02:08,800 --> 00:02:11,480
‫Et vous voyez que vous avez également le raccourci

46
00:02:11,480 --> 00:02:14,610
‫ici et je ne sais pas s'il s'agit de celui par

47
00:02:14,610 --> 00:02:17,825
‫défaut mais au moins dans mon cas, je peux également utiliser

48
00:02:17,825 --> 00:02:19,740
‫le raccourci pour embellir ce code.

49
00:02:19,740 --> 00:02:21,910
‫Mais de toute façon, en écrivant

50
00:02:21,910 --> 00:02:24,590
‫carlin, vous devriez obtenir cette sélection ici maintenant.

51
00:02:24,590 --> 00:02:27,290
‫Et si vous appuyez ensuite sur Entrée, cela corrigera,

52
00:02:27,290 --> 00:02:30,880
‫comme vous le voyez, l'indentation qui n'était pas correcte dans ce fichier.

53
00:02:30,880 --> 00:02:32,230
‫D'accord?

54
00:02:32,230 --> 00:02:34,800
‫Alors sauvez-le, fermez-le et revenons

55
00:02:36,450 --> 00:02:38,103
‫ici en fait.

56
00:02:39,220 --> 00:02:42,870
‫Et maintenant, tout ce que nous avons à faire est de dire inclure _header.

57
00:02:46,297 --> 00:02:48,750
‫Et idem pour le pied

58
00:02:48,750 --> 00:02:52,170
‫de page, alors coupons-le ici, créons un nouveau modèle...

59
00:02:54,826 --> 00:02:55,659
‫_footer

60
00:02:57,160 --> 00:02:58,320
‫collez-le, sélectionnez-le,

61
00:02:58,320 --> 00:03:00,940
‫commande-shift-P ou probablement dans Windows, c'est

62
00:03:02,061 --> 00:03:04,270
‫control-shift-P, puis le dernier qui

63
00:03:04,270 --> 00:03:06,460
‫a été utilisé apparaîtra ici

64
00:03:06,460 --> 00:03:08,470
‫lors de la sélection.

65
00:03:08,470 --> 00:03:12,043
‫Alors, appuyez sur retour et c'est parti.

66
00:03:13,090 --> 00:03:14,763
‫C'est réglé maintenant aussi.

67
00:03:16,330 --> 00:03:17,260
‫Comprendre...

68
00:03:19,130 --> 00:03:20,500
‫bas de page.

69
00:03:20,500 --> 00:03:23,200
‫Et remarquez que nous n'avons même pas besoin de

70
00:03:23,200 --> 00:03:25,103
‫spécifier à nouveau l'extension dot pug.

71
00:03:26,610 --> 00:03:29,610
‫Alors faites-lui une sauvegarde et lorsque nous le

72
00:03:29,610 --> 00:03:32,800
‫rechargerons maintenant, cela devrait ressembler exactement à la même chose.

73
00:03:32,800 --> 00:03:36,380
‫Eh bien, pas vraiment, parce que ces boutons ici, ils se

74
00:03:36,380 --> 00:03:38,860
‫sont en quelque sorte déplacés vers le

75
00:03:38,860 --> 00:03:41,900
‫bas, alors ils ont quitté cette barre de navigation.

76
00:03:41,900 --> 00:03:45,560
‫Ou en fait, cet en-tête, donc ce n'est pas

77
00:03:45,560 --> 00:03:47,230
‫correct, c'était peut-être

78
00:03:47,230 --> 00:03:50,990
‫un problème avec cette indentation automatique ici dans l'en-tête.

79
00:03:50,990 --> 00:03:53,510
‫Et oui, en fait, ce n'est pas

80
00:03:53,510 --> 00:03:56,523
‫correct car tout cela devrait être à l'intérieur de l'en-tête.

81
00:03:59,880 --> 00:04:03,040
‫Donc ce nav, ce div et ce nav devraient

82
00:04:03,040 --> 00:04:05,180
‫tous être au même niveau.

83
00:04:05,180 --> 00:04:07,030
‫Et maintenant c'est correct.

84
00:04:07,030 --> 00:04:09,623
‫Juste pour être sûr, vérifions également le pied de page.

85
00:04:10,786 --> 00:04:12,740
‫Mais ici, c'est en fait correct, donc je

86
00:04:12,740 --> 00:04:15,690
‫ne suis pas sûr de ce qui s'est réellement passé dans cette situation.

87
00:04:17,010 --> 00:04:19,073
‫Mais de toute façon, essayons à nouveau maintenant.

88
00:04:20,560 --> 00:04:22,230
‫Et donc on y va.

89
00:04:22,230 --> 00:04:26,100
‫Quoi qu'il en soit, cela inclut simplement certains fichiers, l'un

90
00:04:26,100 --> 00:04:27,283
‫dans l'autre.

91
00:04:28,382 --> 00:04:30,380
‫Dans la vidéo suivante, nous ferons

92
00:04:30,380 --> 00:04:35,120
‫alors quelque chose d'un peu similaire, mais en même temps beaucoup plus complexe et aussi plus utile.

93
00:04:35,120 --> 00:04:37,580
‫Donc, si vous êtes curieux de savoir ce

94
00:04:37,580 --> 00:04:39,963
‫que c'est, rejoignez-moi juste dans le prochain.