Developer docs

match

Usage: {{#match @custom.color_scheme "=" "Dark"}} class="dark-mode"{{/match}}

Description

{{#match}} allows for simple comparisons, and executing different template blocks depending on the outcome.

Like all block helpers, {{#match}} supports adding an {{else}} block or using ^ instead of # for negation - this means that the {{#match}} and {{else}} blocks are reversed if you use {{^match}} and {{else}} instead. In addition, it is possible to do {{else match ...}}, to chain together multiple options like a switch statement.

Operators

Equality

match supports comparing values for equality, which is the default behaviour:

{{#match @custom.color_scheme "=" "Dark"}}...{{else}}...{{/match}}

{{!-- Can be shortened to: --}}
{{#match @custom.color_scheme "Dark"}}...{{else}}...{{/match}}

The equality test can also be negated:

{{#match @custom.color_scheme "!=" "Dark"}}...{{else}}...{{/match}}

Numeric comparisons

The match handler supports >, <, >= and <= operators for numeric comparisons.

{{#match posts.length ">" 1}}...{{else}}...{{/match}}

Evaluation rules

Values passed to match are tested according to their value as well as their type. For example:

{{!-- Returns true/false --}}
{{#match feature_image true}}...{{else}}...{{/match}}

{{!-- Always returns false --}}
{{#match feature_image 'true'}}...{{else}}...{{/match}}

match can also be used to test boolean values similar to if:

{{!-- Default behaviour is to test if a value is truthy --}}
{{#match featured}}...{{else}}...{{/match}}

Example code

The match helper is extremely useful when combined with Custom settings using @custom:

{{!-- Adds the 'font-alt' class when the Typography setting is set to 'Elegant serif' --}}
<body class="{{body_class}} {{#match @custom.typography "Elegant serif"}}font-alt{{/match}}">