Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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. | www.downloadly.ir
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,072
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. | www.downloadly.ir
7125
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.