Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint
Chapter 4. Server-Side Templates > Partial Templates
4.2. Partial Templates
There will be certain pieces of the pages in our site that are repeated. Things like headers, footers, and certain application-specific widgets will appear on multiple pages, or every page. We could copy the markup for those pieces into the page’s template, but it will be easier to manage a single shared template for each of these common elements. Copying and pasting a reference to a child template is more maintainable than copying and pasting the markup itself. If we don’t want to have to repeat the code that imports our CSS and client-side JavaScript, we can templatize a default version of the pages in our site, storing all that information there, in addition to site-wide headers and footers. We can leave a space for the content of each page and reuse the rest. Let’s create a file with this boilerplate markup called parent.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{pageTitle}}</title>
<link rel="stylesheet" src="css/style.css" />
{{>stylesheets}}
</head>
<body>
{{>content}}
<footer>© 2011 Node for Front-End Developers</footer>
</body>
{{>scripts}}
</html>Every template engine handles nested templates differently. While Mustache uses the {{>...}} syntax you see above, templating engines that are otherwise very similar to Mustache may use something different. Try not to get too caught up in the particular syntax of this engine, just know that the greater-than sign here indicates a child template, and we’ll use that to do composition.
