7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 10Length: 1.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.2 Generating Multiple Pages

In this lesson, we'll continue dynamically creating pages. We'll create multiple pages, corresponding with each data item.

3.2 Generating Multiple Pages

In the previous lesson, we created a data driven page. It's very simple, but we provided some data told Gatsby where that data was and how to use it to build a page, and voila, we have our page. So in this lesson, I want to create multiple pages, one for each individual employee. So really, it's very much like what we did in the previous lesson, we will still use the Create Page function to create these. The only difference is going to be that we will create multiple by iterating over employees. So we will use forEach. And for each employee, we will simply create a page. And the path is going to be the same thing except that we need to incorporate the employees name. So let's use the new template string feature here, so that's we will have the employees first name. And let's make this to lowercase, then we will have a dash, and then we will have the last name in lower case as well. And that will be the URL. And then we don't have the template yet, but we can go ahead and specify what that will be. So we will have our component, we will require resolve. This will be inside of source templates and we'll just call this employee js. And then we can set the context. Now, of course this gives us some flexibility as to what we want to do. If we wanted to call this employee, we could do that and give it the employee. Or we could something like this. We could say that the context itself is going to be the employee object. That'll make things a little bit easier inside of the template. So, that's our JavaScript, pretty simple. So, let's go and create that template. Inside of template we will create a new file, call it employee.js, and let's use the list as our basis. So, let's copy the contents of list and let's make a few modifications here. So, the first thing is we don't need to build an extra item or anything like that. And we do need helmet, and I guess as far as the title is concerned, we can have the first name and last name. And since the page context is our employee object that gives us very simple access to those properties. So there we go. We have the first name and last name as the page title. And as far as the content, I'm fine with just having a p element. And we will essentially do the same thing to where we have the first name and last name. But let's also incorporate the title as well. Although, well, let's do this. Let's have the title as a heading. We'll make this h3, and then we will have the title there. So that way that gives us a little variety. Okay, so there we go, we have our component. So now we just need a link to these pages. And we can do that inside of employee list. So now we get to use our link. And so we will go ahead and add that in. Now the to, it would be really nice if we could make this relative but we will have to say employees/, and then we need to use the first name. And once again to lower case, followed by a hyphen. And then, the same thing for the last name. And to lower case, and then slash after and that should be it. Now as far as the content of that link, once again it will be first name and the last name. We'll put that on the separate lines so that is much easier to see. And let's check this out. Okay, so we have our links, however, the URL is definitely not what we wanted. So I goofed up somewhere. And it's for the last page or the last name. Did not call to lower lowercase, just used it as a function or as an object. So there we go. Now, if we navigate, we're going to get a 404. And that is probably because we need to stop and restart Gatsby. But once that clears out the cache and it rebuilds everything, those pages should be built, and we should be able to see those pages. Looks like everything's, well, it's still building the development bundle. It shouldn't take very long. Hopefully we won't get any errors. But if so we will pick them out and fix them. But we're good, we just have one morning. So now we have our page for the individual employees. And if we look at Jim James, there we go as well. So now we have not only a data driven site for an index, but we have dynamically created pages for the other pieces of information in our data file. Well, in the next lesson, we will look at doing essentially the same thing but using GraphQL.

Back to the top