Layouts and Partials

Store a template once with the type web and a name. {{> name}} prints it inside another template, the layout pin wraps a page in it, and saving it takes effect everywhere at once.

A stored template has a type and a name

Create it through the cluster API. Your token needs the blueprinttemplates create scope.

{
  "type": "web",
  "name": "product-card",
  "html": "<li>{{name}}: {{price | money \"EUR\"}}</li>"
}

A template also has a stylesheet and a script field. Once it exists it shows up in Manage Templates in RUAL Studio, where you can edit its HTML, its stylesheet and its script.

A partial is a shared piece

Print it with {{> name}}. It sees the data around it, or the value you hand it:

{{> site-header}}

<ul>
  {{for p in products}}
    {{> product-card p}}
  {{/for}}
</ul>

• Where it may stand: only where text goes, and it must end there too. Inside a tag, an attribute or a <script> it does not compile, because a partial is compiled on its own and could not be escaped for the place it lands in.
• A name that does not exist fails the render with a message naming it. The visitor reads that the page failed, and a blueprint developer reads why.
• A partial that includes itself fails at 48 levels deep with a message.
• Only a layout's stylesheet and script are linked. Those fields of a partial are not, so put a partial's styles in the layout or the page.

For a small template used in one place only, keep it in the template itself:

{{define "badge"}}<span class="badge">{{.}}</span>{{/define}}

<h1>{{title}} {{> badge status}}</h1>

A layout wraps the page

Set the layout pin of web_render to the template's name or GUID. The block's template_guid setting does the same when the pin is empty.

<!doctype html>
<html lang="{{language}}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="{{viewport}}">
  {{{head}}}
</head>
<body>
  {{> site-header}}
  {{{body}}}
  {{> site-footer}}
</body>
</html>

• {{{body}}} is the page, rendered first. {{{head}}} is where the generated head tags go. Without it they go right before </head>.
• The layout sees the same data as the page: data, the custom pins, title, nonce and the rest.
• The layout's own stylesheet and script are linked automatically, after the other head tags.
• A name is looked up among web templates first and then among all others, so a mail layout can be a page's layout too.

Three ways a page gets its document

The head tags are written in all three. They go where {{{head}}} stands, else before </head>, else right after <head>. A tag your head already has is not written twice.

Every template can read the same variables

Template Syntax lists each variable.

Saving takes effect everywhere

Saving a template takes effect on every node at once. A template is compiled once per version of its text, so a new version never reuses an old compile. A brand new name is found within seconds: a name nobody has created is remembered as missing for 5 seconds, then looked for again.

Store what more than one flow renders

Next steps