Page Composition and Styling
Referencing a CSS stylesheet
To apply CSS styling to a page in your theme, make sure that page’s code includes a reference to the stylesheet you want to use. This example does so using the {{partial}} and {{cdn}} custom Handlebars helpers:
Template composition
Template composition is a valuable Stencil feature. By defining blocks of overrideable content, your themes can insert templates on a per-page basis, while sharing code that is common to the whole theme.
Defining content blocks
A base template defines content blocks by name. The following snippet uses {{block}} custom Handlebars helpers to define three content blocks, respectively named head, hero, and page:
Replacing content blocks
Pages can use a base template, replacing the defined blocks with their own content. This example replaces content for the head and page blocks:
Matching partials with blocks
For any given name defined within the template rendering path, we recommend that you maintain a 1:1 mapping of partials to blocks.
