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

  • Overview
  • Transcript

2.2 Use Layouts

We like consistent websites, and we can achieve a consistent look and feel across our site by using layouts. In this lesson, you'll learn how to create and use layouts.

2.2 Use Layouts

If there's one thing that we've learned over the many thousands of years of human experience is that we like consistency. And we especially like consistency in the websites that we visit. So we of course, want our website to be consistent between the different pages, so that we don't cause a disjointed experience for the user. We want them to focus on the content, so we are going to use what's called a layout. Now, this is very much like the concept of a layout that you would find in just about every server side framework. If you're not familiar with a layout, well, it's where we define out sites, layout. All of the stuff that doesn't change between the different pages is typically the layout. So it's where we define our sites based styles in JavaScript. It's where we define the menu and just about everything else that doesn't change from page to page. So before we create our layouts, we are going to create another page so that we can see this in action. So let's create a new file inside of our pages folder, let's just call it about.js. Let's take the contents of index. And let's use that inside of about and let's just change the Hello world to be this is the about page. Now, we need to be able to navigate between these two pages because we don't want to keep typing the URL inside of the address bar. So let's add a link. Now, one thing to kind of wrap your head around is that as far as Gatsby is concerned, we aren't really working with pages and HTML. We are working with react components. So of course, our index page, our about page, these really aren't pages. They're just react components, and the layout page that we're going to create isn't a page. It's also a react component, but also the things that we would think would be mundane like linking between two pages. Well, we use react components for that as well. Gatsby gives us a component called link, and we can use this to link between our pages. In fact, we should do so. So let's first of all, import link from Gatsby. And then, we're going to add a div inside of our content, so that is going to be on a separate line. And then, we will use this link component, this has a to prop, and it's just going to be the URL that we want to navigate to. Now, we are inside of the about, so we want to go to the Index page here. So we'll just have the URL as a slash, the text will be go to index, and we'll just copy and paste this inside of index. So that we can easily make the change to say that this is going to go to the about pag,e and then this is go to about. Now, we do need that import for link, so let's do that as well. And if we view this in the browser, we have our link we can navigate between the two and that's great. So now, let's add a layout so that as we navigate between these two pages, we will have a consistent look and feel. And of course, we have that now but as we add content and things like that, and of course we want this to look a lot nicer than just while this text on a white background, so let's do this. Let's go to startbootstrap. This is a website that has a lot of free themes and free templates that you can use to just get started with website. Whenever I need something other than just a plain white screen, this is typically where I come even if I don't plan on using Bootstrap. This is where I come just to make a prototype of something. And we're going to use this starter template, or at least the bare template because there's really nothing here. There's no extra CSS or anything, it's just bootstrap. So if we can inspect the source code, we are going to grab this nav, and we're going to grab this div element with a class of container. And we're going to put this inside of our layout, so let's create our layout. This is not going to be a page. This is going to be just a component. So inside of our source, let's create a new folder called components. This isn't necessary or strictly necessary, but when it comes to my projects, I'd like them to be organized. And in a real application, I might have another form folder inside of components called layouts. Because it might be the case where we would have multiple layouts based upon the content that was being displayed. They would be the same layout overall, but there might be a few changes between the different layouts. But we're not going to worry about that we're just going to have a single layout. So inside of components, let's create a new file. Let's call it layout.js, and this is a react component. So let's take the contents of index and let's start with that. Now, we're going to leave react because well we need react. We're going to leave Bootstrap because this is really where we need to load Bootstrap. This is the layout page. This is going to have the stuff that doesn't change between the individual pages. So really we need to go to index, and we need to remove the import for Bootstrap. We need to do the same thing for about so that they don't load Bootstrap, our layout does. And then, we just need to take the markup from the template, and we're going to paste it inside of the outer divs here. Because remember that this is XML, we have to have a single root element. Let me line this up, so that it looks nice and clean. We do need to get rid of any HTML comments. We also need to change all of the class attributes to class name, so a simple fun and replace will take care of that, and that's it. Now, we do need to define where our content is going to go because this is the layout for our site. Every page is going to have this same nav, and we just need to define where our content is. And really this is where the content will go, inside of this div element with a class of container. So let's get rid of the current contents here because we don't need that, that's from the template. And this is where we will put our content, so let's just have that there. And we'll discuss how to get content inside of our layouts in a moment. Let's go to our index, and we want to use our layout here. So the first thing we need to do is import layout, because once again, it is a react component. So we need to go back to components, then layout, and then we will use layout in place of the div that we had for the root element. This is perfectly fine, and we will essentially do the same thing for about. So let's go ahead and do that. We will replace the outer div layout, and so now our index and about pages are using the layouts. But if we look at that, well there's really nothing difference between these two pages. And that's because we aren't displaying the content of those pages. Instead, we're just displaying what we have inside of the layout. So if we look at the index or about our content is essentially a child of layout and that is how we get the content. The children are going to be passed to this components function, and then we just need to output those children, and we do so using just normal react syntax. So that now we can go back, we are on the about page, and we can definitely see that we are at the about page. If we go to index, we see the Hello world. Now, of course, we want to use our menu to navigate between our two pages. So all we need to do is just modify our menu. Let's first of all grab the import for link. Well, we already had that. And then, instead of using a elements, we will use link we will change href to to, and then they would have the appropriate values. So about will be /about, the index would simply be a slash and whenever we go back to the browser we should be able to navigate between these. So we can click on About. We are now at the About page. We can click on Home. We are now back home.

Back to the top