Header (partial)


Partials Demo

Partials enable you to construct your template using components. The header and footer in this example are included as partials. Partials are specified using standard HTML comments in the following format:

<!-- include relative/path/from/views/folder/to/the/partial.html -->

(Note: the component does not have to be HTML. It could be JS, CSS, etc.)

Partials take part in the template render. For example, the contents of the title tag on this page are specified using the data-set-text attribute on the tag.

HTML (head component)

<!doctype html>
<html lang='en'>
<head>
  <!-- Labs common -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title data-set-text='title'>Ind.ie Labs: Set</title>
  …
        

HTML (main template)

<!-- include components/head.html -->
<!-- include components/labs-header.html -->
  <!-- include components/partials-demo-header.html -->
  <h2>Partials Demo</h2>
  …
  <!-- include components/partials-demo-footer.html -->
  <!-- include components/footer.html -->
  </div>
</body>
</html>

Express 3 router (node.js)

exports.route = (request, response) ->
  response.render 'partials', { data: { title: 'Ind.ie Labs: Set: Partials' }

Footer (partial)