WEBVTT 0 00:00.420 --> 00:00.690 All right. 1 00:00.690 --> 00:02.940 So here comes the answer. 2 00:02.970 --> 00:08.670 We know that in order to render the page we need to do it when the storedTitle matches the requested 3 00:08.670 --> 00:09.540 Title. 4 00:09.540 --> 00:13.690 So we need to do it somewhere in between the set of curly braces here. 5 00:14.070 --> 00:16.790 And so I'm going to delete the console.log 6 00:16.950 --> 00:20.700 and I'm also going to delete the else statement because we don't need it. Now 7 00:20.730 --> 00:24.290 inside here is where I'm going to render my post. 8 00:24.360 --> 00:25.070 ejs. 9 00:25.290 --> 00:30.760 But before I render it, let's set it up first. Just as we have in our home.ejs 10 00:30.870 --> 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 00:36.690 --> 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 00:45.480 --> 00:46.630 code is going to go. 13 00:46.740 --> 00:50.470 We need to have an h1 which is going to have the title 14 00:50.580 --> 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 00:56.700 --> 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 01:03.450 --> 01:05.940 that I pass over. And that variable 17 01:05.940 --> 01:12.240 I'm going to simply name title. And I'm going to do the same inside the paragraph tag 18 01:12.390 --> 01:16.170 but in this case I'm going to call that variable content. 19 01:16.170 --> 01:21.900 So now I have to figure out a way of passing over these two variables over to our post.ejs. 20 01:22.160 --> 01:25.370 Inside our app.js is where I'm going to do that. 21 01:25.530 --> 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 01:32.160 --> 01:34.710 then you can see we use the res.render method 23 01:34.710 --> 01:36.620 then there's two parameters we provide. 24 01:36.660 --> 01:39.960 The first one is the name of the page we want to render 25 01:39.960 --> 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 01:45.960 --> 01:49.380 key value pairs that contain the thing that we want, 27 01:49.380 --> 01:54.840 the new page to be able to access and the thing that we want to pass over. Down here 28 01:55.020 --> 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 02:00.720 --> 02:02.050 post page right? 30 02:02.100 --> 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 02:07.410 --> 02:13.800 Now inside here is where we pass over everything that the post.ejs needs and it needs two things. 32 02:13.830 --> 02:16.500 One called title, one called content. 33 02:16.500 --> 02:18.650 So let's add those keys in first. 34 02:18.660 --> 02:22.440 So one is called title one is called content. 35 02:22.470 --> 02:27.550 Now we have to decide what to pass over as the values for those two keys. 36 02:27.660 --> 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 02:35.400 --> 02:39.800 true that we still have access to this post object 38 02:39.810 --> 02:40.420 right? 39 02:40.470 --> 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 02:48.150 --> 02:48.920 Title. 41 02:49.110 --> 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 02:55.380 --> 03:03.880 current post's title and then comma and we're going to pass over the current post's content. 43 03:03.900 --> 03:11.430 So now let's close everything off with semicolons and save our app.js and let's go ahead and 44 03:11.430 --> 03:12.720 test our website. 45 03:18.300 --> 03:22.410 Let's call it Day 1. 46 03:22.540 --> 03:31.780 And now if I head over to /posts/day-1 hit enter, bam! We've got our new Web 47 03:31.780 --> 03:36.910 page created for us on the fly through the use of EJS and express. 48 03:39.670 --> 03:41.350 I've created another post 49 03:41.410 --> 03:48.130 and I just want to show you that this is really where you start seeing the power of EJS. Previously 50 03:48.340 --> 03:53.410 we've been creating new EJS files for home, for about us, for contact us. 51 03:53.560 --> 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 04:02.350 --> 04:03.930 an EJS template. 53 04:04.300 --> 04:08.780 So now if we head over to /posts/day-1 54 04:08.830 --> 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 04:16.270 --> 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 04:22.270 --> 04:27.640 only thing that's changing in this post template is the actual content. 57 04:27.880 --> 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 04:32.860 --> 04:33.400 way, 59 04:33.400 --> 04:36.170 the only changes are the text content. And 60 04:36.220 --> 04:41.230 this is how we can use EJS to create a massive website with lots of content 61 04:41.350 --> 04:47.970 but creating these pages dynamically through the use of templating. Feel free to mess around with that. 62 04:48.010 --> 04:48.780 Once you're done 63 04:48.820 --> 04:54.460 head over to the next lesson where are we going to finish off this project with just two more challenges.