Developer docs
Developer docs
Breadcrumbs

How templates work

Templates use tinyliquid, a JavaScript implementation of Liquid.

There are three "wrapper" templates currently in use for Markdown content. They're all in src/site/layouts.

  • page-react: Houses our React pages.

  • page-react-sidebar: Houses our React pages that have a sidebar.

  • page-breadcrumbs: Houses our non-React content pages.

  • page-playbook: Houses Playbook pages.

  • home: Template for the home page

  • home: Template for the home page without search

page-breadcrumbs is a container template that loads layouts for the content between the header and the footer. Those are in content/layouts/includes/.

Templates are loaded based on the value of the template property in the YAML/front-page data of each content file -- the text between the ---. Content files can be found in content/pages/.

Adding a new template

  • Add a new HTML + Liquid template file to src/site/includes

  • Update page-breadcrumbs with a new case for the new layout.

  • Update the template YAML property for whichever pages should load the new template.

Content meta data

To date, we've used YAML syntax in Markdown files as a way to structure data such as related links (majorlinks) and navigation cards.

Help and feedback