So far we've created two specific views for our website, one for the home page and one for the details of an image. However, there's no consistent UI wrapping both of these pages together. We have no consistent navigation or logo. There's no common footer with standard copyright or additional information.
Usually, with any website that you create, you're going to want to have some form of a standard layout or master template that every page will use. This layout typically includes the website logo and title, main navigation, sidebar (if any), and the footer. It would be bad practice to include the HTML code for the layout in every single page on our website because if we wanted to make even the smallest change to the main layout, we would have to edit every single page as a result. Fortunately, Handlebars helps lessen the work of utilizing a layout file.
Let's create a layout file for our app by creating a new file named main.handlebars within the views/layouts folder and inserting the following HTML code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>imgPloadr.io</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/public/css/styles.css">
</head>
<body>
<div class="page-header">
<div class="container">
<div class="col-md-6">
<h1><a href="/">imgPloadr.io</a></h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
{{{ body }}}
</div>
<div class="col-sm-4">
{{> stats this }}
{{> popular this }}
{{> comments this }}
</div>
</div>
</div>
<div style="border-top: solid 1px #eee; padding-top: 1em;">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<p class="text-muted">imgPloadr.io | © Copyright 2014, All Rights Reserved</p>
<p class="text-center">
<i class="fa fa-twitter-square fa-2x text-primary"></i>
<i class="fa fa-facebook-square fa-2x text-primary"></i>
</p>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/public/js/scripts.js"></script>
</body>
</html>Most of the preceding code is just HTML, and a lot of it uses Bootstrap for the actual physical layout of the page as well as a few other UI-related elements. The most important part is the highlighted section in the middle with {{{ body }}} and the few lines below that, as they pertain to the use of Handlebars.
{{{ body }}} is a reserved word in Handlebars that is used specifically with layouts. What we are basically saying is that any page we render that's using our default layout file will have its content inserted to the area where {{{ body }}} is defined. If you recall from the configure module we created earlier, we defined our default layout file when we set up Handlebars as our rendering engine. The slightly odd use of {{{ and }}} around the body is due to the fact that Handlebars escapes HTML by default when using {{ and }}. Since our views contain mostly HTML, we want this to stay intact so that we use {{{ and }}} instead.
The other three lines that use {{ > ... }} render Handlebars partials, which are like shared HTML code blocks that we will learn about next.