About Mustache Templates
Mustache works by expanding tags in a template using values provided in a hash or object. In Weebly themes, Mustache is used in partials to provide content. Mustache is "logic-less" because there are only tags that are replaced with a value or a series of values.
In this topic:
A Quick Example
A typical Mustache template:
Mustache Tags
Given the following hash:
Code Editor
Will produce the following:
Tag Types
Tags are indicated by the double mustaches. In the above example, {{name}} is a variable tag that gets replaced by the given content "Chris."
Variables
Variable tags are the most commonly used tags and are replaced with content by finding the key (for example name) in the current context, and if not found, searching in parent contexts recursively. If nothing is found, then nothing is rendered.
You can escape variables using & or triple mustaches. For example, both &name and {{{name}}} can be used to display "name": "<b>Chris</b>" as Chris.
You can escape variables using & or triple mustaches. For example, both &name and {{{name}}} can be used to display "name": "<b>Chris</b>" as Chris.
Sections
Sections can display a block of text one or more times, in other words, can iterate over a list. You use the hash (#) to start a section and a slash (/) to end it. If the key exists and has a non-false value, the HTML between the pound and slash will be rendered once for each item in the list. If the list is empty or false, then whatever is between the # and / is not displayed. If the value is not a list, but a single item, then that single value displays.
For example, in the Archives partial in Weebly themes, the #items section is used on blog pages:
For example, in the Archives partial in Weebly themes, the #items section is used on blog pages:
Mustache Section
It displays a list of monthly blog post titles as links.
You can also display inverted sections, in other words the inverse of the value of the tag. Inverted sections start with a caret (^) and end with a slash (/).
For example, the Archives partial contains an inverted section (#t1) after the #items section to display text if no blog post titles exist:
You can also display inverted sections, in other words the inverse of the value of the tag. Inverted sections start with a caret (^) and end with a slash (/).
For example, the Archives partial contains an inverted section (#t1) after the #items section to display text if no blog post titles exist:
Inverse
Comments
Comments begin with a bang (!). Anything following that is ignored. Many Weebly partials contain comments to describe what the partial is used for:
Code Editor
Partials
Partials can be nested in other partials, using the greater than sign (>). For example, the Main partial used to display products actually calls other partials for the content:
Include Partials