0 1 00:00:00,420 --> 00:00:00,690 All right. 1 2 00:00:00,690 --> 00:00:02,940 So here comes the answer. 2 3 00:00:02,970 --> 00:00:08,670 We know that in order to render the page we need to do it when the storedTitle matches the requested 3 4 00:00:08,670 --> 00:00:09,540 Title. 4 5 00:00:09,540 --> 00:00:13,690 So we need to do it somewhere in between the set of curly braces here. 5 6 00:00:14,070 --> 00:00:16,790 And so I'm going to delete the console.log 6 7 00:00:16,950 --> 00:00:20,700 and I'm also going to delete the else statement because we don't need it. Now 7 8 00:00:20,730 --> 00:00:24,290 inside here is where I'm going to render my post. 8 9 00:00:24,360 --> 00:00:25,070 ejs. 9 10 00:00:25,290 --> 00:00:30,760 But before I render it, let's set it up first. Just as we have in our home.ejs 10 11 00:00:30,870 --> 00:00:36,680 we've got our partials right? And that's the first thing we're going to add to any new web page. 11 12 00:00:36,690 --> 00:00:45,480 Let's go ahead and include our header and our footer into our new page. And then in between is where our 12 13 00:00:45,480 --> 00:00:46,630 code is going to go. 13 14 00:00:46,740 --> 00:00:50,470 We need to have an h1 which is going to have the title 14 15 00:00:50,580 --> 00:00:56,480 and then we're going to have a paragraph element which is going to have the body of the blog post. 15 16 00:00:56,700 --> 00:01:03,450 Now inside the h1 I'm going to add some EJS tags which is going to give me the value of a variable 16 17 00:01:03,450 --> 00:01:05,940 that I pass over. And that variable 17 18 00:01:05,940 --> 00:01:12,240 I'm going to simply name title. And I'm going to do the same inside the paragraph tag 18 19 00:01:12,390 --> 00:01:16,170 but in this case I'm going to call that variable content. 19 20 00:01:16,170 --> 00:01:21,900 So now I have to figure out a way of passing over these two variables over to our post.ejs. 20 21 00:01:22,160 --> 00:01:25,370 Inside our app.js is where I'm going to do that. 21 22 00:01:25,530 --> 00:01:31,830 And if we remind ourselves of how we did this in our previous route say how we rendered our home page, 22 23 00:01:32,160 --> 00:01:34,710 then you can see we use the res.render method 23 24 00:01:34,710 --> 00:01:36,620 then there's two parameters we provide. 24 25 00:01:36,660 --> 00:01:39,960 The first one is the name of the page we want to render 25 26 00:01:39,960 --> 00:01:45,960 then there's a comma and then there's a set of curly braces where we pass in a Javascript object with 26 27 00:01:45,960 --> 00:01:49,380 key value pairs that contain the thing that we want, 27 28 00:01:49,380 --> 00:01:54,840 the new page to be able to access and the thing that we want to pass over. Down here 28 29 00:01:55,020 --> 00:02:00,630 what we need to do is we need to again use res.render and the page that we want to render is this 29 30 00:02:00,720 --> 00:02:02,050 post page right? 30 31 00:02:02,100 --> 00:02:07,410 So we'll put that in there and then we have a comma and we open up a set of curly braces. 31 32 00:02:07,410 --> 00:02:13,800 Now inside here is where we pass over everything that the post.ejs needs and it needs two things. 32 33 00:02:13,830 --> 00:02:16,500 One called title, one called content. 33 34 00:02:16,500 --> 00:02:18,650 So let's add those keys in first. 34 35 00:02:18,660 --> 00:02:22,440 So one is called title one is called content. 35 36 00:02:22,470 --> 00:02:27,550 Now we have to decide what to pass over as the values for those two keys. 36 37 00:02:27,660 --> 00:02:35,400 Now because we're currently still inside the FOR loop then you can see that once this triggers and it's 37 38 00:02:35,400 --> 00:02:39,800 true that we still have access to this post object 38 39 00:02:39,810 --> 00:02:40,420 right? 39 40 00:02:40,470 --> 00:02:48,150 For each and every post inside the post array we check to see if it has a title that matches the requested 40 41 00:02:48,150 --> 00:02:48,920 Title. 41 42 00:02:49,110 --> 00:02:55,380 And if that is true then we're going to render the post.ejs page and we're going to pass over that 42 43 00:02:55,380 --> 00:03:03,880 current post's title and then comma and we're going to pass over the current post's content. 43 44 00:03:03,900 --> 00:03:11,430 So now let's close everything off with semicolons and save our app.js and let's go ahead and 44 45 00:03:11,430 --> 00:03:12,720 test our website. 45 46 00:03:18,300 --> 00:03:22,410 Let's call it Day 1. 46 47 00:03:22,540 --> 00:03:31,780 And now if I head over to /posts/day-1 hit enter, bam! We've got our new Web 47 48 00:03:31,780 --> 00:03:36,910 page created for us on the fly through the use of EJS and express. 48 49 00:03:39,670 --> 00:03:41,350 I've created another post 49 50 00:03:41,410 --> 00:03:48,130 and I just want to show you that this is really where you start seeing the power of EJS. Previously 50 51 00:03:48,340 --> 00:03:53,410 we've been creating new EJS files for home, for about us, for contact us. 51 52 00:03:53,560 --> 00:04:02,320 But now every time we create a new blog post then we get a brand new page that simply created using 52 53 00:04:02,350 --> 00:04:03,930 an EJS template. 53 54 00:04:04,300 --> 00:04:08,780 So now if we head over to /posts/day-1 54 55 00:04:08,830 --> 00:04:16,210 then we get access to this brand new page with the content of the Day 1 blog post. And then -2 55 56 00:04:16,270 --> 00:04:22,270 then we get a new page, -3 we get a new page and you can see that this is just a template and the 56 57 00:04:22,270 --> 00:04:27,640 only thing that's changing in this post template is the actual content. 57 58 00:04:27,880 --> 00:04:32,860 And because all of our blog posts are going to be formatted the same way, it's going to look the same 58 59 00:04:32,860 --> 00:04:33,400 way, 59 60 00:04:33,400 --> 00:04:36,170 the only changes are the text content. And 60 61 00:04:36,220 --> 00:04:41,230 this is how we can use EJS to create a massive website with lots of content 61 62 00:04:41,350 --> 00:04:47,970 but creating these pages dynamically through the use of templating. Feel free to mess around with that. 62 63 00:04:48,010 --> 00:04:48,780 Once you're done 63 64 00:04:48,820 --> 00:04:54,460 head over to the next lesson where are we going to finish off this project with just two more challenges.