Fill in HTML code with Mustache

Do not be scared by this page. Pack creation will create default values for this, that you can use as such for your cards. This is only for people wanting more customization for their cards.

The Mustache syntax is a popular templating system used to create HTML, config files, or any other text output. It is based on a logic-less template syntax, meaning it focuses on presentation without embedding programming logic. Templates and data are processed together to produce output. Mustache templates are distinctive for their double curly braces, {{ }}, which mark the insertion points for data. This simplicity and portability make Mustache an attractive option for our clean, clear, and maintainable code templates.

Basic Syntax

In your HTML code, you replace the values coming from your entries with the tag {{FIELD_NAME}}. Replace FIELD_NAME with the name of the field that contains the values you want, respecting uppercase and lowercase (case-sensitive).
It is easy to test your HTML+Mustache code if you have already some entries in your pack, by clicking the preview button ( ), on the bottom left of the template editing page.

The Question side must contain one and only one tag starting with a question mark, e.g. {{?Term}}. This will tell the template generator not only to display the value of the Question field "Term" from the entry, but it will use this field as the condition to create the cards. This means that all entries having a value in the field "Term" will have a card from this template, but not those with an empty value. The Answer side cannot have any tag with a question mark.

If the Question field is declared as a list, only the array items that are not empty will create cards.

Question and Answer sides can then include tags to display other values from all field values of the entry. If the Question field is a list, the value taken will have the same index as the one of the question for a field that is a list too, or just the unique value when not a list. If the Question field is not a list, then the other fields cannot be lists, except by using a FOR_EACH tag (see below).

Added Logic

IF / IF_NOT tags

The display of a section of the HTML code can be made conditional by using:

{{#FIELD_NAME}} HTML code displayed if the value in FIELD_NAME is NOT EMPTY {{/FIELD_NAME}}

{{^FIELD_NAME}} HTML code displayed if the value in FIELD_NAME is EMPTY {{/FIELD_NAME}}

If the Question field is a list, the value checked will have the same index as the one of the question for the IF or IF_NOT field that is a list too, or just the unique value when not a list. If the Question field is not a list, the IF or IF_NOT field cannot be a list.

FOR_EACH tag

You can loop the display of a section of the HTML code by using:

{{$FIELD_NAME}} HTML code displayed as many times as each value in FIELD_NAME list is NOT EMPTY {{/FIELD_NAME}}

The loop depends on the values for the FOR_EACH field, without consideration to the Question field. Tags inside the FOR_EACH that starts with a "@" (e.g. {{@FIELD_NAME_2}}) will have the same array index as the FOR_EACH field, otherwise (e.g. {{FIELD_NAME_3}}) will follow the default behavior (they will depend on the Question field).