1
00:00:01,010 --> 00:00:03,430
‫In this lecture, I want to just very quickly

2
00:00:03,430 --> 00:00:05,760
‫show you a feature that we actually have

3
00:00:05,760 --> 00:00:07,330
‫in all programming languages.

4
00:00:07,330 --> 00:00:09,870
‫We're just to include one file and in this case,

5
00:00:09,870 --> 00:00:12,313
‫one template into another template.

6
00:00:13,770 --> 00:00:16,250
‫So let's say that we wanted to keep

7
00:00:16,250 --> 00:00:18,540
‫our base layout here really clean

8
00:00:18,540 --> 00:00:20,720
‫without any content in it.

9
00:00:20,720 --> 00:00:23,460
‫And so what we're gonna do is put all the code

10
00:00:23,460 --> 00:00:26,180
‫for the header into one header file.

11
00:00:26,180 --> 00:00:29,040
‫And then include that file right here.

12
00:00:29,040 --> 00:00:31,470
‫And the same also for the footer.

13
00:00:31,470 --> 00:00:33,990
‫And so then, our content block,

14
00:00:33,990 --> 00:00:35,670
‫so basically our body here

15
00:00:35,670 --> 00:00:39,650
‫becomes this very clean element only with these includes

16
00:00:39,650 --> 00:00:42,780
‫and then this content here for now.

17
00:00:42,780 --> 00:00:43,613
‫Okay.

18
00:00:43,613 --> 00:00:47,633
‫So again, let's create a new file here for the header.

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

20
00:00:51,000 --> 00:00:54,640
‫And actually I like to prefix these files that only serve

21
00:00:54,640 --> 00:00:57,083
‫for being included with an underscore.

22
00:00:58,060 --> 00:01:00,710
‫And if you're familiar with something like Sass,

23
00:01:00,710 --> 00:01:03,423
‫then that will be familiar to you as well.

24
00:01:04,310 --> 00:01:08,400
‫Okay, so let's now go add and paste this here,

25
00:01:08,400 --> 00:01:10,110
‫and not this code,

26
00:01:10,110 --> 00:01:13,740
‫so I guess I forgot to copy it or to cut even.

27
00:01:13,740 --> 00:01:16,030
‫And then paste it here.

28
00:01:16,030 --> 00:01:18,940
‫And now this indentation is all wrong here,

29
00:01:18,940 --> 00:01:22,040
‫because now we have like three levels,

30
00:01:22,040 --> 00:01:24,870
‫as you can see, so, one, two, three levels

31
00:01:24,870 --> 00:01:28,520
‫where this code should actually be here.

32
00:01:28,520 --> 00:01:31,940
‫Okay, and so now we need to go add and fix that

33
00:01:31,940 --> 00:01:35,250
‫but what we can actually do instead of doing it manually

34
00:01:35,250 --> 00:01:38,423
‫is to use a nice extension that does this work for us.

35
00:01:39,400 --> 00:01:41,313
‫So here in my extension tab,

36
00:01:42,280 --> 00:01:44,930
‫let me show you the extension that I mean.

37
00:01:44,930 --> 00:01:48,380
‫And that is called Pug beautify.

38
00:01:48,380 --> 00:01:53,330
‫Okay, so go ahead and install this package, all right.

39
00:01:53,330 --> 00:01:55,210
‫And once you have that done,

40
00:01:55,210 --> 00:01:57,350
‫you can simply select all the code here

41
00:01:57,350 --> 00:02:00,970
‫by hitting command-A and then create a VS Code command

42
00:02:00,970 --> 00:02:03,810
‫by saying command-shift-P.

43
00:02:03,810 --> 00:02:06,310
‫And then in here, you write pug.

44
00:02:06,310 --> 00:02:08,800
‫And so this will then beautify pug.

45
00:02:08,800 --> 00:02:11,480
‫And you see that you also have the shortcut here

46
00:02:11,480 --> 00:02:14,610
‫and I'm not sure if this is the default one

47
00:02:14,610 --> 00:02:17,825
‫but at least in my case I can use the shortcut also

48
00:02:17,825 --> 00:02:19,740
‫to beautify this code.

49
00:02:19,740 --> 00:02:21,910
‫But anyway, by writing pug,

50
00:02:21,910 --> 00:02:24,590
‫you should get this selection here now.

51
00:02:24,590 --> 00:02:27,290
‫And if you then hit enter, it will, as you see,

52
00:02:27,290 --> 00:02:30,880
‫fix the indentation that was wrong in this file.

53
00:02:30,880 --> 00:02:32,230
‫All right?

54
00:02:32,230 --> 00:02:34,800
‫So give it a save, close it up

55
00:02:36,450 --> 00:02:38,103
‫and let's go back here actually.

56
00:02:39,220 --> 00:02:42,870
‫And now all we need to do is to say include _header.

57
00:02:46,297 --> 00:02:48,750
‫And the same for the footer,

58
00:02:48,750 --> 00:02:52,170
‫so let's cut it here, create a new template...

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

60
00:02:57,160 --> 00:02:58,320
‫paste it

61
00:02:58,320 --> 00:03:00,940
‫select it, command-shift-P

62
00:03:02,061 --> 00:03:04,270
‫or probably in Windows that's control-shift-P

63
00:03:04,270 --> 00:03:06,460
‫and then actually the last one that was used

64
00:03:06,460 --> 00:03:08,470
‫will appear here at selection.

65
00:03:08,470 --> 00:03:12,043
‫So, hit return and there you go.

66
00:03:13,090 --> 00:03:14,763
‫That's fixed now as well.

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

68
00:03:19,130 --> 00:03:20,500
‫footer.

69
00:03:20,500 --> 00:03:23,200
‫And notice how we don't even need to specify

70
00:03:23,200 --> 00:03:25,103
‫the dot pug extension again.

71
00:03:26,610 --> 00:03:29,610
‫So give it a save and when we now reload this

72
00:03:29,610 --> 00:03:32,800
‫it should look the exact same.

73
00:03:32,800 --> 00:03:36,380
‫Well, not really, because these buttons here,

74
00:03:36,380 --> 00:03:38,860
‫they kind of shifted down,

75
00:03:38,860 --> 00:03:41,900
‫so they left this navigation bar.

76
00:03:41,900 --> 00:03:45,560
‫Or actually, this header, so that's not correct,

77
00:03:45,560 --> 00:03:47,230
‫maybe that was some problem

78
00:03:47,230 --> 00:03:50,990
‫with this auto indenting here in the header.

79
00:03:50,990 --> 00:03:53,510
‫And yeah, actually that's not correct

80
00:03:53,510 --> 00:03:56,523
‫because all of this should be inside the header.

81
00:03:59,880 --> 00:04:03,040
‫So this nav, this div and this nav

82
00:04:03,040 --> 00:04:05,180
‫they should all be on the same level.

83
00:04:05,180 --> 00:04:07,030
‫And so now that's correct.

84
00:04:07,030 --> 00:04:09,623
‫Just to make sure, let's also check the footer.

85
00:04:10,786 --> 00:04:12,740
‫But here, it actually is correct,

86
00:04:12,740 --> 00:04:15,690
‫so I'm not sure what actually went wrong in this situation.

87
00:04:17,010 --> 00:04:19,073
‫But anyway, let's try that again now.

88
00:04:20,560 --> 00:04:22,230
‫And so here we go.

89
00:04:22,230 --> 00:04:26,100
‫Anyway that is simply including some files,

90
00:04:26,100 --> 00:04:27,283
‫one into the other.

91
00:04:28,382 --> 00:04:30,380
‫In the next video, we will then do something a bit similar,

92
00:04:30,380 --> 00:04:35,120
‫but at the same times way more complex and also more useful.

93
00:04:35,120 --> 00:04:37,580
‫So if you're curious about what that is

94
00:04:37,580 --> 00:04:39,963
‫then just join me right in the next one.