FREELessons: 12Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Using Layouts for Consistency

The vision plugin has built-in support for layout pages. So in this lesson, we'll create a layout page and configure vision to use it.

2.2 Using Layouts for Consistency

In the previous lesson, we started looking at vision and we created a single view for displaying a title and a message. And nothing else, there's no style, there's no layout, there's no structure, there's nothing. And really, that's what we want because when it comes to our views, we want just the content. Because anything else, we're going to have to replicate in all of our other views. Like for example I'm going to add two lines to this view. One is going to pull in bootstrap through a CDM. The second is going to pull in a local css file off screen. I added this site dot css it resides with the css inside of public. It just has a single rule for the main element. But just by adding these two lines, for any other view that we wanted to maintain the same look and feel, We would have to include those two lines as well. And of course, this is just the bare bones. With a real application, we would have a lot of markups. So that's not something that we want to do, we are bound to make a mistake here. Any change that we make It's just going to be a nightmare. So, we are going to use a layout page. It's basically just a template that we define that has all of the stuff that we really isn't content. It defines the layout of Our website. And then behind the scenes vision is going to take the layout page. Then it will take our content and merge them together so that we have a single HTML document. So let's get started by first of all enabling the layout feature, because it is disabled by default. And this is a good choice because, this way it won't interfere with the view engines built in layout capabilities. Now, because we're using handle bars and it does not have a lay out feature, we're not going to run into any problems. But you might if you're using some other view engine, it just depends upon how layouts are implemented there. So in order to enable a layout page, we just add a property to our view configuration and we set it to true. Now, there is several different values that we can supply. If it's a Boolean value, we're just switching on or off the layout feature. But if we supply a string, then this is going to be the name of our default layout page. So in this case if we set this to index, Then index is going to be our default page, but really let's do something like this. Layout because that makes sense, but layout is already the default name so all we have to do then is set layout to true and out layout page is going to be called layout.html. But we also have to tell vision where out layout pages. Reside because we can have multiple layout pages. It just depends upon the needs of our application. So in this case we need to decide where we're going to put our layout pages or our layouts part of the views Or are they not part of the views. Well I think that they are. So we're going to put into inside of source, views, layouts. And that is going to be the path to our layouts. This means that we have to add a new folder. Under Views, we'll call it layouts and then we'll have our layouts.html. Now I'm going to paste in some HTML for our layout page just so that you don't see me typing all of this. But it's very simple, we're using Bootstrap. We have a header That has a menu, and right now we just have home, and then we have this main element. And this is where we would put our content. Now before we do anything else, I have nodemon running and let's stop that. Because nodemon doesn't watch HTML files. By default it watches JavaScript, CSS, Jason files, and I think that's it. So in order to watch HTML, we need to tell it to do that. And so we are going to add a new file to the root of our application. And we're going to call it nodemon.json, and this is going to be our nodemon configuration. We need a property called ext for extension, and then we just need to define the extensions that we want to watch. So html, js, css, and json. and there we go. So once we fire up node mon again then it's going to watch our HTML files so that any changes that we make to our views or our layout pages is going to automatically be picked up. So with that out of the way, let's see what happens now. We have enabled the layout feature. We still have our original index.html, but we did define a layout page. So let's go to the browser, let's refresh and we see The result of the layout page, but we don't have any content. And the reason is because we didn't say that, hey, put our content inside of the main element, because that's where we want to put our content. So then let's do that. Inside of our layout page We use not two but three sets of curly braces and then we say content and with that simple change we can go back to the browser and refresh and voila we have our content however let's look at the source again. Now notice that we have our html document and then inside of the main element We have another html document so what vision is doing is taking our review, and then taking the whole thing that is inside of this file and merging it with our layout page- And right there where our content is. So we want to take out anything that is not part of the content of this view. So in this case, it is simply the h1 element and the p element with our message. So that now, if we refresh the page, now we have just a complete HTML document, and everything is going to behave just fine. So before we leave this lesson, let's add another view. One for The contact page. So, let's just add a new file. We'll call it contact.html. And since this is going to be a view all we need is first of all our page title. So, let's include that and then our content. Now since this is going to be a contact view we would have a form. But, we're not go through the motion yet of Adding that form. Instead we'll just say, Contact form goes here. And then later on we will change that. Now we do need to set a route for this, so let's go to our default routes and let's take the route for the route of our application. We'll just copy that And use that as a basis. Our path is going to be '/contact.' and let's use the function for the handler. That way if we need to do any processing later on then we'll have something already. Now in this case we do not want to use the index view. We want to use the contact. View and the page title we want to change to contact us. But we don't have a message to display, so we're going to get rid of the message. And so with that, we should be able to go back to the browser, go to /contact. And we will see the contact page. So one last thing, let's add a link to our menu. So inside of layout html, see this is what's really nice. Any change that we need to make to the layout of our application, we can just go to the layout page, make that single change And then it will be reflected on all of our views. So in this case, this is going to be to the Contact page. So we just make the necessary changes. Let's also get rid of this active class. On both of those links, and so now we will have a contact link, and we can navigate in between our two pages. So now we have a layout page. We have a consistent look and feel across our views, and in the next lesson we are going to look at Partial views, which allows us to reuse the same markup throughout multiple views.

Back to the top