All language subtitles for 040 Challenge 19 Solution_en

All right.

So here comes the answer.

We know that in order to render the page we need to do it when the storedTitle matches the requested

Title.

So we need to do it somewhere in between the set of curly braces here.

And so I'm going to delete the console.log

and I'm also going to delete the else statement because we don't need it. Now

inside here is where I'm going to render my post.

ejs.

But before I render it, let's set it up first. Just as we have in our home.ejs

we've got our partials right? And that's the first thing we're going to add to any new web page.

Let's go ahead and include our header and our footer into our new page. And then in between is where our

code is going to go.

We need to have an h1 which is going to have the title

and then we're going to have a paragraph element which is going to have the body of the blog post.

Now inside the h1 I'm going to add some EJS tags which is going to give me the value of a variable

that I pass over. And that variable

I'm going to simply name title. And I'm going to do the same inside the paragraph tag

but in this case I'm going to call that variable content.

So now I have to figure out a way of passing over these two variables over to our post.ejs.

Inside our app.js is where I'm going to do that.

And if we remind ourselves of how we did this in our previous route say how we rendered our home page,

then you can see we use the res.render method

then there's two parameters we provide.

The first one is the name of the page we want to render

then there's a comma and then there's a set of curly braces where we pass in a Javascript object with

key value pairs that contain the thing that we want,

the new page to be able to access and the thing that we want to pass over. Down here

what we need to do is we need to again use res.render and the page that we want to render is this

post page right?

So we'll put that in there and then we have a comma and we open up a set of curly braces.

Now inside here is where we pass over everything that the post.ejs needs and it needs two things.

One called title, one called content.

So let's add those keys in first.

So one is called title one is called content.

Now we have to decide what to pass over as the values for those two keys.

Now because we're currently still inside the FOR loop then you can see that once this triggers and it's

true that we still have access to this post object

right?

For each and every post inside the post array we check to see if it has a title that matches the requested

Title.

And if that is true then we're going to render the post.ejs page and we're going to pass over that

current post's title and then comma and we're going to pass over the current post's content.

So now let's close everything off with semicolons and save our app.js and let's go ahead and

test our website.

Let's call it Day 1.

And now if I head over to /posts/day-1 hit enter, bam! We've got our new Web

page created for us on the fly through the use of EJS and express.

I've created another post

and I just want to show you that this is really where you start seeing the power of EJS. Previously

we've been creating new EJS files for home, for about us, for contact us.

But now every time we create a new blog post then we get a brand new page that simply created using

an EJS template.

So now if we head over to /posts/day-1

then we get access to this brand new page with the content of the Day 1 blog post. And then -2

then we get a new page, -3 we get a new page and you can see that this is just a template and the

only thing that's changing in this post template is the actual content.

And because all of our blog posts are going to be formatted the same way, it's going to look the same

way,

the only changes are the text content. And

this is how we can use EJS to create a massive website with lots of content

but creating these pages dynamically through the use of templating. Feel free to mess around with that.

Once you're done

head over to the next lesson where are we going to finish off this project with just two more challenges.