Template language
Templates are written in familiar HTML syntax with dynamic tags.
They're just like shortcodes: easy to learn, and the basics should give you super powers!
The following describes how a tag and its attributes are formed.
Tag
A tag is the basic building block of HTML documents.
It is distinct from normal text, and formed with angle brackets around the tag name, like <tag>.
We'll call HTML tags like div and img as static tags.
Tags provided by the template system, like Loop, are dynamic. They perform some action, usually on the server side, to generate the output. The result is standard HTML for the browser.
Tag name
Dynamic tags are capitalized, like Loop and Field.
This is in contrast to static HTML tags, which are in lowercase, like div and span.
You might see a resemblance to React JSX, which has a similar syntax.
Closed tag
An example of a closed tag is <Field />.
It can have attributes, but not inner content.
Closed tags always end with />.
Open tag
An open tag, for example <Loop>, has inner content which can be other tags.
Open tags are closed like </Loop>.
Attribute
Tag attributes are placed between the tag name and the closing angle bracket.
They pass additional information to the tag, for example, image URL, or field name.
Key and value
An attribute is usually a pair of "key" and "value".
<Field name="title" />Here, name is the key, and title is the value.
Quoted value
Note how the value is surrounded by " double quotes ".
The quotes are not necessary if the value contains only alphanumeric characters, - dash, and _ underscore.
Use quotes when a value has a space, or special characters like / and angle brackets.
If a value includes double quotes, you can use ' single quotes ' around it.
Key with no value
An attribute key can be by itself.
<Field title />With dynamic tags, this is usually a quick way to pass the name attribute, or the most commonly used attribute for that tag. The above example is equivalent to:
<Field name="title" />Tag in attribute
To use tags inside an attribute value, replace <> with curly braces {}.
This is useful for passing the result of a dynamic tag to another tag.
For example, to create a link from a post URL:
<a href="{Field url}" alt="{Field title}">
<Field title />
</a>Make sure to quote such attributes, as they usually contain a space.
Closed tags like Field don't need the slash / to close itself inside an attribute.