Layouts in Dust.js
For building an application with user friendly and consistent UI, we generally use the concept of “master page” and “layouts”, so that just the content can vary within the pages. This helps user to easily navigate through the website as well as faster loading of the web pages.
For example, generally we make header and footer static which needs to be included in almost all pages. So why not make a single master page for that instead of writing same html code in all pages and just embed the dynamic part accordingly.
In my previous blog on using dust as a view engine in your node.js application, i have given a brief introduction about how we can use dust for templating. Now we will learn how to use dust for layout management.
Lets consider a simple example and create a master.dust, which contain the common code which we want to be there in all the pages.
[js]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo- {+title /}</title>
</head>
<body>
<div class="navbar navbar-fixed-top">
.
.
.
</div>
{+body /}
<footer>
<div class="container">
<p>© Copyright 2014. someDemo.com</p>
</div>
</footer>
</body>
</html>
[/js]
Now this master.dust can be included in any page, providing just the body for the html. Lets move on to create loginPage.dust,
[js]
{>"layouts/master" /}
{<title}Login{/title}
{<body}
<form class="form-login" method="post" action="login" name="loginForm" id="loginForm">
.
.
.
</form>
{/body}
[/js]
Here we have included master.dust on top which is inside layouts folder and also providing value for “title” and “body” tags. In this way, we can include same html in several pages, without actually repeating the code.
Hope this will help 🙂
