Join Daniel Khan for an in-depth discussion in this video Creating reusable components with layouts and blocks, part of Building a Website with Node.js and Express.js.
- [Instructor] Template engines let you reuse elements throughout a project. Let's start with the obvious. The over structure, let's call it the layout of a page, is usually fairly similar throughout a project. If we look at our conference page, we see that the large, top image, this is, by the way, called jumbotron, and the navigation below stays the same throughout all pages. A layout in pug contains the structure that is shared through a set of pages. Let's create the layout for our project now.
So head over to Visual Studio Code and in there, I create a new folder layout in views. And in layout, I will create a new file index.pug. Now, into this index.pug file, I will, to get started, copy everything from our previous index page over. Now we will use another part of the pugs and text, so called blocks. Blocks are the parts of a site that will change from page to page.
For instance, the content of the speakers page is different than on the index page, and we don't have this yellow area with the speakers on any other page than on the index page. In our layout index file, I will now try to find the block for this speakers list, this yellow area, so I scroll down until line 46, and so see here, the speakerslist starts and it's indented by two.
Let's keep that in mind, or let's real quick also remove the sidebar here and also the terminal down there to have a little bit more space. And now, I'm scrolling down until I reach the home container on line 75 and I will remove that, make two indents, so that I'm, again, at the same level as the home container and add block speakerslist.
Our index file is still the same and we're not using the layout at all. So next, we will head over to the index file and there, we now have two. Basically do the other way around, remove everything that is now part of the layout and just leave the pure content of the index page in there. For that, I start on top of the page and scroll down until the speakerslist starts and I will remove everything from there and now I will start here on the very top by extending from the layout file so I add extends layout/index.
We can omit the extension.pug, but in this case, we have to explicitly name the file that we want to extend from. So it will not default to index if we do nothing here and let's fix the indents here again, so as we did before, I will now use Alt + Shift and move down all the way to remove the indents and for the speakerslist, I now start a new block.
I called it speakerslist. And under this block, now I have to indent again so let's scroll down with Alt + Shift until the home container starts and we will indent by one. So as you see here, the contents of the speakers list is now part of the block speakerslist and we do the same for the content block, so I add a new block content.
Yes, let's see what's wrong. I see that in my layout file, I called this block speakerlist, but here, on the index file, I called it just speakerlist. So I will simply fix that here, speakerslist and let's have another try and it works now. This is now, in fact, really, already rendered with the layout. To proceed and also to test if our layout really works, let's create a stop for the speakers page now, so I head over into Visual Studio Code and there, in views, I create a new folder, speakers, and in there, I create an index file, new file index.pug and there, on top of it, I have to extend the layout.
Extends ../layout/index. Don't forget we're now one level deeper, so we have to add two dots to refer to our layout folder and in there, we'll now add block content and inside this block content, I will create a container. In this container, I will create a row. If this looks unfamiliar, these are CSS clauses by boostrap, and I add .col-sm-8 and then we finally start with the .maincontent and in there, I will add h1.article-title and it should be Speakers List.
Our route is not yet ready to render the speakers list, so I go into routes, speakers, and in index.js, I will now return res.render, and here I can again use just speakers because it will then default to the index template in speakers. Let's restart our application and let's head over to a project and real quick, simply, let's call the URL /speakers, and as we see, the Speakers List stub that we just created is now rendered into the main layout.
- Creating a server with Express and pure Node.js
- Handling errors in Express
- Creating routes
- Using templates
- Working with the Pug template engine
- Implementing the site structure and logic
- Working with conditionals
- Dealing with POST requests
- Sanitizing user inputs and handling form errors