1 00:00:05,570 --> 00:00:06,650 In this video. 2 00:00:06,650 --> 00:00:14,660 Let's go ahead and create more pages, for example, about us, contact us and many more and see how 3 00:00:14,660 --> 00:00:16,170 we can render them. 4 00:00:16,190 --> 00:00:26,810 So inside the eggs folder here, let's create one file call about dot edges and let's have the snippets 5 00:00:26,810 --> 00:00:28,580 and here we go. 6 00:00:28,580 --> 00:00:31,910 So here a title is going to be about. 7 00:00:32,450 --> 00:00:45,290 And now inside it let's add about as and with few lines of text to as that about us. 8 00:00:45,470 --> 00:00:47,330 Let's also create. 9 00:00:48,440 --> 00:00:51,220 A template for contact us. 10 00:00:51,230 --> 00:00:55,340 So copy and paste and change this one to. 11 00:00:56,700 --> 00:00:58,320 Contact. 12 00:00:58,470 --> 00:00:59,190 Perfect. 13 00:00:59,190 --> 00:01:02,070 And let me change the title to. 14 00:01:03,600 --> 00:01:04,920 Contact. 15 00:01:05,610 --> 00:01:06,860 And that is it. 16 00:01:06,870 --> 00:01:14,370 And lastly, I want to rename this one, but because I have this code here, maybe you may use it as 17 00:01:14,370 --> 00:01:15,420 a reference. 18 00:01:15,420 --> 00:01:22,470 So I'm going to create a new file for the home call, home page or home for short. 19 00:01:22,470 --> 00:01:30,570 So let me copy this one and paste here and change this one to as home dot edges. 20 00:01:30,780 --> 00:01:31,290 All right. 21 00:01:31,290 --> 00:01:35,670 So now this one going to be a reference for the syntax of edges. 22 00:01:35,940 --> 00:01:41,700 So now we have the template being done or let me change the name here for the home here. 23 00:01:41,700 --> 00:01:43,860 Change this one to home. 24 00:01:45,180 --> 00:01:51,300 All right, so we can put this video and try your hand on it, how we can render those pages. 25 00:01:51,420 --> 00:01:53,970 So let me close all these tabs. 26 00:01:53,970 --> 00:01:58,770 And now back to the server because we have four templates. 27 00:01:58,770 --> 00:02:04,530 We need to create three route for getting those templates as we did here. 28 00:02:04,770 --> 00:02:12,030 So inside a server here, let's have a beautiful command for this and say home root and for the home 29 00:02:12,030 --> 00:02:17,040 root I want to render the home dot edges. 30 00:02:17,040 --> 00:02:23,460 And one cool thing about it just is that we can even ignore the extension and make use of home. 31 00:02:23,610 --> 00:02:26,760 So now because ARM is not mown, it has restarted. 32 00:02:26,760 --> 00:02:31,980 Let me refresh it and I see the home page, but I think the title is Wrong Home. 33 00:02:32,290 --> 00:02:36,780 So let me change it to, let's say, home page. 34 00:02:37,500 --> 00:02:38,280 All right. 35 00:02:38,280 --> 00:02:40,590 So now we're able to render that. 36 00:02:40,590 --> 00:02:46,080 So let's go ahead and render about and contact port this video and try your hand on it. 37 00:02:48,300 --> 00:02:50,670 Let me show you how I'm going to render those templates. 38 00:02:50,670 --> 00:02:53,910 So I'll copy this one and now here paste it. 39 00:02:53,910 --> 00:03:04,470 Here is going to be about as route and now the template is about next is going to be the contacts and 40 00:03:04,470 --> 00:03:11,070 here going to be the contact route and here are going to be us contact. 41 00:03:11,070 --> 00:03:14,550 So now spelling mistake as that. 42 00:03:14,550 --> 00:03:19,860 So now I'm back to the browser I see home page. 43 00:03:19,860 --> 00:03:26,500 If I go to about kind of get the roots, it means we need to change the paths here. 44 00:03:26,760 --> 00:03:28,710 All of them are home page, home page. 45 00:03:28,710 --> 00:03:36,950 So here is going to be about and here is going to be contact and here we go. 46 00:03:37,500 --> 00:03:48,660 So let's refresh it and I'll see about as page and then the contact as page as that's all right. 47 00:03:48,660 --> 00:03:52,830 So let's try to implement what is called navigation. 48 00:03:52,830 --> 00:03:56,370 So at the home page, I want to have some links. 49 00:03:56,370 --> 00:04:03,960 When I click on it, I want to go to about us or contact us as we did when we are dealing with rendering 50 00:04:03,960 --> 00:04:05,400 raw HTML. 51 00:04:05,610 --> 00:04:09,990 So for this video tool, we can pause it and try a hands on it. 52 00:04:13,400 --> 00:04:15,890 All right, so let me show you my solution. 53 00:04:16,040 --> 00:04:20,450 So inside the home, I need to provide some navigation links. 54 00:04:20,450 --> 00:04:22,640 So above the title of home page. 55 00:04:22,640 --> 00:04:25,780 Here, let me add some naff links. 56 00:04:25,790 --> 00:04:30,410 So I'll provide the nav tag and make use of you air. 57 00:04:30,410 --> 00:04:39,140 And inside I need to provide about RS and then after that we have the contact as. 58 00:04:40,580 --> 00:04:47,630 And the home page also going to be the go home as that. 59 00:04:48,080 --> 00:04:48,650 All right. 60 00:04:48,650 --> 00:04:51,560 So if I save it, then I refresh it. 61 00:04:51,560 --> 00:04:56,870 You see that I have those link, but they are not link above or hyperlink. 62 00:04:56,870 --> 00:04:59,210 So I need to provide the a tag. 63 00:04:59,210 --> 00:05:07,130 So we inside of each of this one, let's add the a red tag here and the path go to home and here is 64 00:05:07,130 --> 00:05:17,060 going to be the home so I can copy this one and then put it here and change this one tune about as and 65 00:05:17,060 --> 00:05:23,750 the path is going to be a bar because it must match the route inside my server. 66 00:05:24,050 --> 00:05:25,070 So here we go. 67 00:05:25,130 --> 00:05:32,870 And that's why I'm going to be the contact as to paste it and change the ref to contact. 68 00:05:32,870 --> 00:05:36,560 And here is going to be as contact. 69 00:05:36,560 --> 00:05:38,300 So moment of truth. 70 00:05:38,570 --> 00:05:39,650 I have saved it. 71 00:05:39,650 --> 00:05:40,220 Oh sorry. 72 00:05:40,220 --> 00:05:41,450 I need to put it inside. 73 00:05:41,720 --> 00:05:44,750 I sorry guys as that. 74 00:05:44,750 --> 00:05:53,360 Let me cut this one and put it inside ly and let me save it and refresh it and I have those links when 75 00:05:53,360 --> 00:05:59,930 I click on this one about as I see it, when I click on this one, I see it when I click on this one, 76 00:05:59,930 --> 00:06:00,980 I see it. 77 00:06:01,040 --> 00:06:08,990 But a caveat here is that look on the home page, I see the nav links and about us I don't see the nav 78 00:06:08,990 --> 00:06:09,530 links. 79 00:06:09,530 --> 00:06:14,840 So to be able to see the nav links unless I copy the nav also. 80 00:06:14,840 --> 00:06:24,110 So let's copy this one, the nav tag here and let's go to the about US template and then before this 81 00:06:24,110 --> 00:06:32,270 one, let's paste it and let's also go to the contact as templates before the heading here. 82 00:06:32,300 --> 00:06:36,110 Let's paste it, let's save it and now refresh it. 83 00:06:36,110 --> 00:06:40,910 And wherever I go I still see the naff links. 84 00:06:40,910 --> 00:06:44,270 But in programming we call something dry. 85 00:06:44,300 --> 00:06:47,360 That is, don't repeat yourself. 86 00:06:47,600 --> 00:06:55,100 It will see that we are copying and pasting the last lines all around, assuming that we have 100 template 87 00:06:55,100 --> 00:07:00,080 or pages unless we copy each of them onto the individual template. 88 00:07:00,080 --> 00:07:03,680 And let's say that in future we make changes to one link. 89 00:07:03,680 --> 00:07:10,580 Let's say this one going to be contact us unless we go through all the code base and change the link 90 00:07:10,580 --> 00:07:13,760 one by one, which is not ideal. 91 00:07:13,760 --> 00:07:16,880 So let's find solution to it in the next video.