All right. 1
So here comes the answer. 2
We know that in order to render the page we need to do it when the storedTitle matches the requested 3
Title. 4
So we need to do it somewhere in between the set of curly braces here. 5
And so I'm going to delete the console.log 6
and I'm also going to delete the else statement because we don't need it. Now 7
inside here is where I'm going to render my post. 8
ejs. 9
But before I render it, let's set it up first. Just as we have in our home.ejs 10
we've got our partials right? And that's the first thing we're going to add to any new web page. 11
Let's go ahead and include our header and our footer into our new page. And then in between is where our 12
code is going to go. 13
We need to have an h1 which is going to have the title 14
and then we're going to have a paragraph element which is going to have the body of the blog post. 15
Now inside the h1 I'm going to add some EJS tags which is going to give me the value of a variable 16
that I pass over. And that variable 17
I'm going to simply name title. And I'm going to do the same inside the paragraph tag 18
but in this case I'm going to call that variable content. 19
So now I have to figure out a way of passing over these two variables over to our post.ejs. 20
Inside our app.js is where I'm going to do that. 21
And if we remind ourselves of how we did this in our previous route say how we rendered our home page, 22
then you can see we use the res.render method 23
then there's two parameters we provide. 24
The first one is the name of the page we want to render 25
then there's a comma and then there's a set of curly braces where we pass in a Javascript object with 26
key value pairs that contain the thing that we want, 27
the new page to be able to access and the thing that we want to pass over. Down here 28
what we need to do is we need to again use res.render and the page that we want to render is this 29
post page right? 30
So we'll put that in there and then we have a comma and we open up a set of curly braces. 31
Now inside here is where we pass over everything that the post.ejs needs and it needs two things. 32
One called title, one called content. 33
So let's add those keys in first. 34
So one is called title one is called content. 35
Now we have to decide what to pass over as the values for those two keys. 36
Now because we're currently still inside the FOR loop then you can see that once this triggers and it's 37
true that we still have access to this post object 38
right? 39
For each and every post inside the post array we check to see if it has a title that matches the requested 40
Title. 41
And if that is true then we're going to render the post.ejs page and we're going to pass over that 42
current post's title and then comma and we're going to pass over the current post's content. 43
So now let's close everything off with semicolons and save our app.js and let's go ahead and 44
test our website. 45
Let's call it Day 1. 46
And now if I head over to /posts/day-1 hit enter, bam! We've got our new Web 47
page created for us on the fly through the use of EJS and express. 48
I've created another post 49
and I just want to show you that this is really where you start seeing the power of EJS. Previously 50
we've been creating new EJS files for home, for about us, for contact us. 51
But now every time we create a new blog post then we get a brand new page that simply created using 52
an EJS template. 53
So now if we head over to /posts/day-1 54
then we get access to this brand new page with the content of the Day 1 blog post. And then -2 55
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
only thing that's changing in this post template is the actual content. 57
And because all of our blog posts are going to be formatted the same way, it's going to look the same 58
way, 59
the only changes are the text content. And 60
this is how we can use EJS to create a massive website with lots of content 61
but creating these pages dynamically through the use of templating. Feel free to mess around with that. 62
Once you're done 63
head over to the next lesson where are we going to finish off this project with just two more challenges.