Skip to content

Syntax.md

Latest commit

 

History

History
119 lines (84 loc) · 2.8 KB

Syntax.md

File metadata and controls

119 lines (84 loc) · 2.8 KB

Syntax

DVE templates are HTML (or any text) with {{ ... }} tags layered on top. There are two core shapes: a {{ ... }} tag that shows a value and a {{#... }} ... {{/... }} tag that wraps a block like a loop or a conditional.

Table of Contents

Variables

A value in double braces is printed and HTML-escaped by default, so user input can never inject markup.

Hello {{ name }}.

Raw Output

Triple braces print the value with no escaping. Use it only for HTML you already trust.

{{{ trustedHtml }}}

Comments

Comments are never rendered.

{{!-- this is removed from the output --}}

Include

Pull another template in with {{> path}}. The path is passed to the engine's resolveInclude option.

{{> partials/header.dve}}

Layouts: Extend, Block, Slot

A page inherits from a layout with {{< path}} ... {{/}}. The layout exposes named placeholders with {{#slot name}}default{{/slot}}, and the child fills them with {{#block name}}...{{/block}}. A slot renders its own default when no block is provided, and a block with no matching slot is rejected as an error.

layouts/main.dve:

<title>{{#slot title}}Untitled{{/slot}}</title>
<main>{{#slot body}}{{/slot}}</main>

page.dve:

{{< layouts/main.dve}}
  {{#block title}}Home{{/block}}
  {{#block body}}<p>Welcome.</p>{{/block}}
{{/}}

Conditionals

{{#if}} renders its body when the condition is truthy. {{else if}} and {{else}} are optional. Every {{#if}} must be closed with {{/if}}.

{{#if user?.isAdmin}}
  ADMIN
{{else if user?.name}}
  USER
{{else}}
  GUEST
{{/if}}

Loops

{{#each}} walks an array. The as name part names the current item, defaulting to item when omitted. An optional {{else}} renders when the array is empty or missing.

{{#each items as item}}
  {{ item }},
{{else}}
  No items.
{{/each}}

Loop Metadata

Inside an {{#each}} block these helpers are available for free:

  • @index - current position, starting at 0 (supports arithmetic, e.g. {{ @index + 1 }})
  • @first - true on the first item
  • @last - true on the last item
  • @length - total number of items
{{#each items as item}}({{ @index + 1 }}/{{ @length }}) {{ item }} {{/each}}

Whitespace Control

A ~ next to the braces trims adjacent whitespace, which keeps generated HTML tidy.

{{#each items as item~}}
  {{ item }}
{{~/each}}

Note

See Expressions for everything that can go inside a {{ ... }} tag.