1
00:00:00,920 --> 00:00:05,710
In this video, we are going to make use of these partials.

2
00:00:05,720 --> 00:00:07,670
So what are partials?

3
00:00:07,670 --> 00:00:12,350
Partials are like a way of reusing a HTML code.

4
00:00:12,350 --> 00:00:20,630
So for application, we have a specific HTML code that we may need across all the pages, and that is

5
00:00:20,630 --> 00:00:23,480
the nav bar and then the footer.

6
00:00:23,600 --> 00:00:30,890
And to achieve that, like I said in the previous video, unless we copy all the bar code and place

7
00:00:30,890 --> 00:00:37,970
it inside all the templates and that one is not ideal and we can achieve that one using what is called

8
00:00:37,970 --> 00:00:38,840
partials.

9
00:00:39,080 --> 00:00:47,360
First step is that let's locate the index to a JS and this is enough bar link for that and we may need

10
00:00:47,360 --> 00:00:49,610
this one across all the templates.

11
00:00:49,610 --> 00:00:51,750
So let me collapse it and let's see.

12
00:00:51,770 --> 00:00:58,550
So if I want to make use of nerve bar inside the log in, I'm going to copy this one and come back to

13
00:00:58,550 --> 00:01:03,990
users, log in and I'm going to place it before this as that.

14
00:01:04,010 --> 00:01:11,300
Now, if I go to the log in page, I'm going to see the nav bar link and in case we have ten templates

15
00:01:11,300 --> 00:01:18,760
or 20 or less, we paste all the codes across and in case in future we make changes to the length,

16
00:01:18,770 --> 00:01:26,780
for example, from log in to log in user unless we go through all the templates and change it.

17
00:01:26,780 --> 00:01:32,940
But you guys make it pretty easy by making use of partials and this is how we are going to make this

18
00:01:32,960 --> 00:01:34,860
or wait inside the views.

19
00:01:34,880 --> 00:01:39,590
Let's create one folder and I'm going to call this one as partials.

20
00:01:40,160 --> 00:01:49,010
And inside here I'm going to create one file and I'll call this one number dot aegis, meaning that

21
00:01:49,010 --> 00:01:52,190
this template, you may need it in other code base.

22
00:01:52,190 --> 00:01:58,400
So I'm going to copy the nav link from the index to TJ's, which is this one.

23
00:01:58,400 --> 00:02:02,810
So I'll copy this one and back to the right here.

24
00:02:02,810 --> 00:02:03,980
I will paste it.

25
00:02:04,010 --> 00:02:11,090
Now we have extracted the number from here, so let me remove it from here also.

26
00:02:11,270 --> 00:02:14,360
So how are we going to use it with this one?

27
00:02:14,390 --> 00:02:22,300
If I go to homepage, let's refresh it and you can see that we don't have the number because I have

28
00:02:22,310 --> 00:02:23,150
removed it.

29
00:02:23,150 --> 00:02:25,430
So how are you going to use it?

30
00:02:25,430 --> 00:02:29,120
And here is a code we are going to make use of eggs.

31
00:02:29,120 --> 00:02:35,540
Syntax at the first glance is going to be scary, but with practice we're getting pretty simple to adhere

32
00:02:35,540 --> 00:02:35,930
to.

33
00:02:35,930 --> 00:02:37,070
So here we go.

34
00:02:37,070 --> 00:02:46,430
We bring in the anchor bracket and then the percentage sign and does include include is a method where

35
00:02:46,430 --> 00:02:49,700
we are going to require the HTML template.

36
00:02:50,330 --> 00:02:59,380
So we have access to that and the purchase folder and slash nav bar dot edges.

37
00:02:59,570 --> 00:03:04,580
Then after that I need to close it here that save it.

38
00:03:04,580 --> 00:03:06,290
And now let's refresh it.

39
00:03:07,410 --> 00:03:11,080
And you can see we have the number being added.

40
00:03:11,100 --> 00:03:16,860
So if I go to forward slash API and then register.

41
00:03:17,660 --> 00:03:18,560
We don't have it.

42
00:03:18,560 --> 00:03:29,570
So to be able to use it, I'm going to copy this code and back to the register Users register and before

43
00:03:29,570 --> 00:03:31,640
the contents I'll paste that.

44
00:03:31,820 --> 00:03:34,370
For this one, the path has changed.

45
00:03:34,370 --> 00:03:37,490
We're going to be dot four slash.

46
00:03:38,120 --> 00:03:42,050
You can see that it worked fine, but unlucky for us.

47
00:03:42,050 --> 00:03:45,140
You couldn't find the case for the number.

48
00:03:45,200 --> 00:03:49,100
And we can achieve this one in two ways.

49
00:03:49,100 --> 00:03:56,300
One is we can require the keys for the number inside the template, and that is a register.

50
00:03:56,480 --> 00:04:02,990
Or we can require all the common cases inside the partials.

51
00:04:03,290 --> 00:04:08,090
So first step is let's require the CSS for the number inside here.

52
00:04:08,090 --> 00:04:10,010
So I'm going to copy this one.

53
00:04:10,730 --> 00:04:18,050
The case for that nav bar is part of the tiles going to be forward slash style dot CSS.

54
00:04:18,050 --> 00:04:20,300
Save it and let's have a look.

55
00:04:22,230 --> 00:04:25,020
And you can see it worked fine.

56
00:04:25,020 --> 00:04:31,530
And I can cut this one from here and place it inside the partials.

57
00:04:34,250 --> 00:04:37,190
And you can see it also worked fine.

58
00:04:37,190 --> 00:04:45,950
So for the past year, we can put all CSIS links inside here and we can even cut the head tag here and

59
00:04:45,950 --> 00:04:46,960
place it here.

60
00:04:46,970 --> 00:04:53,690
And for this we can see that we have common links that is the font or some Google fonts and many more.

61
00:04:53,720 --> 00:05:01,330
So we can even cut the Google font from here and then place it inside the partial size that save it.

62
00:05:01,340 --> 00:05:02,510
And let's have a look.

63
00:05:03,380 --> 00:05:05,510
You can see it works fine.

64
00:05:05,510 --> 00:05:11,360
But with this one, we have one place where we are managing all the CSS and other lengths.

65
00:05:11,360 --> 00:05:13,400
So what about the future?

66
00:05:13,430 --> 00:05:15,140
We can do the same thing.

67
00:05:15,140 --> 00:05:23,960
So let me create one file for the footer that is under postures and I'll call this one as footer dot

68
00:05:23,960 --> 00:05:24,980
edges.

69
00:05:25,160 --> 00:05:34,310
And let's look at the index dot hml or the index dot edges and let's go down and let's have a section

70
00:05:34,310 --> 00:05:36,380
for the footer, which is this.

71
00:05:36,380 --> 00:05:42,740
So let me collapse and I'll cut it from here and I'm going to place it inside the partials.

72
00:05:44,350 --> 00:05:49,430
Next step is that let's go ahead and use it as we did for the number.

73
00:05:49,450 --> 00:05:58,810
So on the index page, I'm going to copy this code here and down here I'm going to make use of the photon.

74
00:05:58,810 --> 00:06:04,600
So for here, the name is called Footer Dot Aegis, Save it.

75
00:06:04,600 --> 00:06:08,530
And now let's get to the homepage and let's see it in action.

76
00:06:09,890 --> 00:06:12,550
And we have their foot down here.

77
00:06:12,560 --> 00:06:17,720
So let's go ahead and use the number and footer across all the templates.

78
00:06:17,720 --> 00:06:21,710
So let's look at the log in.

79
00:06:22,880 --> 00:06:25,580
I'm going to paste the procedures for the number.

80
00:06:25,580 --> 00:06:33,020
So we're going to be this one and paste it here not far as that.

81
00:06:33,440 --> 00:06:35,450
And let me remove this.

82
00:06:35,450 --> 00:06:40,520
You are here for look in this number because I have it here.

83
00:06:41,180 --> 00:06:41,840
Perfect.

84
00:06:41,840 --> 00:06:44,930
Let me remove this one then the photo.

85
00:06:45,110 --> 00:06:46,430
Let me copy this one.

86
00:06:46,430 --> 00:06:55,400
And down here I will add a comment by saying footer and place it here and change this one to footer

87
00:06:56,210 --> 00:06:57,050
as that.

88
00:06:57,050 --> 00:06:57,740
Save it.

89
00:06:57,740 --> 00:06:59,780
And now let's go to look in.

90
00:07:04,200 --> 00:07:10,320
Well, if we didn't find the number, then the future, meaning the path, need to be changed.

91
00:07:10,320 --> 00:07:17,580
So here are going to be dot, dot forward slash and here are going to be ..4 slash.

92
00:07:17,580 --> 00:07:19,380
So let's have a look.

93
00:07:20,470 --> 00:07:23,710
Now it works fine as before.

94
00:07:23,830 --> 00:07:26,170
So what about the register?

95
00:07:26,200 --> 00:07:27,970
I think that one, we are done with that.

96
00:07:27,970 --> 00:07:33,350
So let me copy the footer for the register in case we haven't done that.

97
00:07:33,370 --> 00:07:34,000
Yes.

98
00:07:34,000 --> 00:07:38,340
So let me paste the footer here and then the number.

99
00:07:38,350 --> 00:07:40,030
We have it as that.

100
00:07:40,360 --> 00:07:42,330
All right, what about the PU file?

101
00:07:42,340 --> 00:07:49,210
So let's also other one profile and let me add the footer down here.

102
00:07:49,900 --> 00:07:51,160
So I think I have that one.

103
00:07:51,160 --> 00:07:55,510
So I'm going to remove the photo here because I'm going to use the partials.

104
00:07:55,510 --> 00:08:00,230
So I'm going to replace with this one with this few lines of code.

105
00:08:00,250 --> 00:08:04,480
So let's locate the profile page.

106
00:08:06,680 --> 00:08:08,120
And we have the tower.

107
00:08:08,150 --> 00:08:09,790
What about the number?

108
00:08:09,800 --> 00:08:13,340
So let me paste the number or so here.

109
00:08:16,450 --> 00:08:19,960
And change this one to now for.

110
00:08:25,350 --> 00:08:26,880
And there you go.

111
00:08:26,910 --> 00:08:31,880
The next one going to be upload the cover image and then the profile photo.

112
00:08:31,890 --> 00:08:35,010
So let me place the number here.

113
00:08:36,730 --> 00:08:39,640
Change this one to not for.

114
00:08:41,240 --> 00:08:45,720
And if Forte here is going to be as to.

115
00:08:45,740 --> 00:08:49,220
So let me change this one to nav bar.

116
00:08:50,820 --> 00:08:51,810
Oh, right.

117
00:08:51,830 --> 00:08:55,010
The next one is going to be the update user.

118
00:08:56,920 --> 00:09:02,080
Pace the number and change this one to number.

119
00:09:02,530 --> 00:09:05,770
Likewise, this as number.

120
00:09:08,000 --> 00:09:14,730
And down here pace that change this 1 to 4 to I think it remains the same.

121
00:09:14,750 --> 00:09:15,290
All right.

122
00:09:15,770 --> 00:09:19,730
The next one is going to be upload cover photo.

123
00:09:20,390 --> 00:09:24,230
Yes, we have it I think is about the profile photo.

124
00:09:24,800 --> 00:09:25,220
All right.

125
00:09:25,220 --> 00:09:25,970
You don't have it.

126
00:09:25,970 --> 00:09:32,620
So let me change this one to now for this one Now for.

127
00:09:34,480 --> 00:09:38,440
And down here is going to be the future and start.

128
00:09:39,150 --> 00:09:40,050
Then this video.

129
00:09:40,050 --> 00:09:41,910
Let's see how we can link pages.

130
00:09:41,910 --> 00:09:46,350
For example, when I click on homepage, I won't render the homepage and the new post.

131
00:09:46,350 --> 00:09:49,560
I want to render a post page or register page.