Templates.

Everything a visitor sees is produced by a template. There is nothing to install and no build step: a template is a row you edit in the admin editor, and the change is live within about a minute. A site's templates are also its filesystem, which is why one template can pull in another by name.

The template record

Every template is the same shape. These are the fields you will work with:

Two of these fields do most of the work: the title, which is how templates find each other, and the permalink, which is how a request finds a template. The rest are covered where they matter, the identifier under type-based layouts and the query fields at the end of this page.

Titles and includes

The title is the name one template uses to include another. A template titled header is pulled in like this:

{% comment %} Both modes: resolve the template titled "header" and render it here {% endcomment %}
{% partial header %}

On a Standard site the native Liquid tags resolve the same way, by title:

{% include 'header' %}
{% render 'header' %}

{% partial %} works in both render modes and is the portable choice. Native {% include %} and {% render %} resolve against your templates on standard sites only; on a Compat site they render nothing, so compat themes compose with {% partial %}. The partials and includes page covers the differences, including why {% render %} runs in an isolated scope. A missing title is never an error: the include renders empty.

Permalinks and routing

The permalink is the path a template answers. When a request arrives, the renderer looks for a template whose permalink matches the request path before it looks anywhere else. An exact match wins; if none matches, the request may still be served by a post through its type-based layout. The full resolution order, site templates, theme templates and posts, is described on the render pipeline page.

A template whose permalink is /index answers the home page; one whose permalink is /about answers /about. Not every template needs a permalink: a header or a footer is included by title and never served directly, so it can leave the permalink empty.

The body is Liquid

The body is rendered with Liquid: the standard tags and filters plus the FleekSite additions. Inside it you have the full render context, the objects such as site and page, the tags and filters, and the {% collection %} tag for reading your own data. A template titled header might read:

{% comment %} A template titled "header" {% endcomment %}
 class="site-header">
   class="brand" href="/">{{ site.name }}>
  {% collection pages, nav, limit: 6, order: title asc %}
  >
    {% for item in nav %}
       href="{{ item.permalink }}">{{ item.title }}>
    {% endfor %}
  >
>

The Liquid overview covers how the body is parsed and rendered, and how the render mode changes a handful of behaviours.

Composing templates

Templates are meant to be small and composed. A page template includes a header and a footer; those in turn include smaller pieces. Because includes resolve by title, assembling a page is largely a matter of naming:

{% comment %} A page template, assembled from named parts {% endcomment %}
{% partial head %}
>
  {% partial header %}
  >
    {{ body }}
  >
  {% partial footer %}
>

There is a cap on how much composition one render may do, so a template that includes itself cannot loop forever. That budget, and the scope each tag runs in, are explained under partials and includes.

Querying templates

Your templates are also queryable data. The {% collection templates %} source returns this site's template records, so a template can list or link to others, which is useful for a style guide, a components index, or an editor aid:

{% comment %} List this site's templates labelled "email" {% endcomment %}
{% collection templates, tpls, label: 'email', order: title asc %}
>
  {% for tpl in tpls %}
    >{{ tpl.title }} serves {{ tpl.permalink }}>
  {% endfor %}
>

You can narrow the results by type, label, identifier and permalink. Each entry is the full template record, its body included, so template source is readable this way. The collection tag reference covers paging, ordering and the result shape, and data sources lists every other source you can read.