Meta Data Headers

Stencil allows you to include arbitrary data as JSON in the beginning of every page and partial, which will then be accessible from other components as the page traverses through its included files and wrapper templates.

A typical page with a template might look something like this:

{
  "body_class": "main",
  "title": "Welcome",
  "template": "default"
}

<div class="wrapper">
  {{= it.include("navigation") }}

  <div class="content">
    Content
  </div>

  {{= it.include("footer") }}
</div>

Accessing meta data fields

In the above case, body_class and title will be accessible in the default.dot.html template as it.document.body_class and it.document.title. (Note that file extensions can be omitted when specifying a template file in the header.) Current file's meta data fields are appended to doT's it object, so if a page defines a body_class, it can be printed in files using {{= it.body_class }}.

Accessing meta data fields defined in other, non-related partials or pages

Meta data fields can also be accessed by files that don't directly include the partial where the value is defined. For example, to include the field contact_styles from the partial contact.dot.html in footer.dot.md, one would use {{= it.include("contact").contact_styles }}, and the value from that field will be included in the footer.