WEBVTT

0
00:00.250 --> 00:00.600
All right.

1
00:00.720 --> 00:04.070
Spoiler warning. I'm going to reveal the answer.

2
00:04.470 --> 00:12.360
Inside the EJS documentation you might remember that I pointed you to the part that says layouts. And this

3
00:12.450 --> 00:19.800
allows you to include headers and footers by using this syntax and the key word include. So we can use

4
00:19.800 --> 00:23.810
this syntax to include our header and footer.

5
00:24.210 --> 00:27.570
So let's go ahead and implement it in our file as well.

6
00:27.840 --> 00:29.320
Inside our home.

7
00:29.580 --> 00:36.570
ejs we're going to delete everything other than our h1 and our paragraph tag because we've got everything

8
00:36.840 --> 00:39.070
inside our header and footer.

9
00:39.390 --> 00:47.100
Now instead of those bits of HTML code we're going to use our EJS  layout syntax which is angle bracket,

10
00:47.400 --> 00:55.720
percentage sign, minus sign or dash and then we use the keyword include and we open up a set of parentheses.

11
00:56.040 --> 01:02.040
And then inside the parentheses we specify the name of the file that we want to include which in this

12
01:02.040 --> 01:05.110
case will be header because we have a file called header.

13
01:05.120 --> 01:15.120
ejs inside our views directory. And then we close off our EJS tag with again a minus sign, percentage

14
01:15.300 --> 01:16.570
and angle bracket.

15
01:16.960 --> 01:24.110
And let's go ahead and copy that down here so that we can do the same for our footer.

16
01:24.350 --> 01:30.740
Now this word has to match the EJS file that you've got inside your views folder

17
01:30.890 --> 01:32.200
in order for it to work.

18
01:32.360 --> 01:36.550
So now that we've got that code in there let's go ahead and hit save.

19
01:36.830 --> 01:40.840
And once you refresh your page this is what you should see.

20
01:40.970 --> 01:47.240
Now if you had a search for how to do this and you come across some answers you might realize that there's

21
01:47.240 --> 01:51.420
quite a few ways of creating that syntax.

22
01:51.650 --> 01:59.330
For example in this case, they've simply just said angle percentage include and then the path of the

23
01:59.330 --> 02:01.320
file from the views folder.

24
02:01.630 --> 02:09.400
Or in this case over here you've got a dash in the front and no dash at the back and there's no parentheses.

25
02:09.410 --> 02:15.290
So all of these different methods work and the method that we should try and follow is the one that's

26
02:15.290 --> 02:17.530
used inside the documentation.

27
02:17.810 --> 02:23.510
But for our challenges sake it doesn't matter which method you chose to use as long as you get the end

28
02:23.510 --> 02:28.330
result and you've achieved the goal then you've successfully completed the challenge.

29
02:28.340 --> 02:30.770
All right so here's onwards to challenge 4.