How to use Fabricator to quickly build new views
Fabricator's assembly engine is a powerful templating engine built on top of Handlebars.js. It helps you compose new materials and prototypical pages with very little friction.
Layouts are wrappers for pages. You can define as many layouts as you want by creating .html
files in your layouts directory.
Example layout:
<!doctype html>
<html lang="en">
<head>
<title>{{title}}</title>
</head>
<body>
{% body %}
</body>
</html>
View content is inserted in the {% body %}
placeholder.
Context can be passed from a view to the layout via front-matter.
The layout that a view uses is also defined in front-matter:
---
layout: custom-layout
title: My Custom Layout
---
This would use src/views/layouts/custom-layout.html
.
When no layout
property is defined, the view uses the default
layout.
Views are unique pages templated using Handlebars. These are both Fabricator pages and user-created pages.
Example view:
---
title: Document Name
name: World
---
<h1>{{home.greeting}}, {{name}}!</h1>
{{> button}}
This outputs a page that uses the default layout (since no layout was defined).
The front-matter block at the top provides context to both the layout and the view itself.
Context is also piped in from data files. In this example, {{home.greeting}}
refers to the greeting
property in home.json
.
Fabricator pages are typically stored at the root level of the views
directory and user-created views (e.g. "templates", "pages", "interfaces") should be stored in subdirectories:
└── views
├── templates
│ ├── about.html
│ └── home.html
├── components.html
├── docs.html
├── index.html
└── structures.html