Data and Repeat

Any block setting can come from data instead of being typed in. In the inspector's Content tab, click the database icon next to a setting and pick what it shows. That is how a template shows each page's title, how a navigation bar lists a menu, and how a blog index lists posts.

#Bindings

A block's bind maps a setting to a path:

{ "type": "heading", "props": { "level": "1" }, "bind": { "text": "entry.title" } }
{ "type": "image", "bind": { "image": "entry.cover", "visible": "entry.cover" } }
{ "type": "link", "bind": { "label": "item.label", "url": "item.url", "state:active": "item.active" } }

Text from data is escaped. End a path with |raw to keep its HTML (a rich text field).

#Text with placeholders

Mix words and data with braces:

{ "type": "paragraph", "bind": { "text": "© {site.year} {site.name}" } }
{ "type": "paragraph", "bind": { "text": "Posted {entry.date|date:M j, Y} in {entry.category}" } }

#Filters

#What you can bind to

prev and next follow reading order: depth-first for trees (like these docs), oldest to newest for dated collections.

#Repeat

Repeat renders its children once for every item of a list. Put one card inside, bind it to item.*, and the card repeats:

{
  "type": "repeat",
  "props": { "source": "entries", "collection": "posts", "sort": "-published_at", "limit": 6, "tag": "div" },
  "style": { "base": { "display": "grid", "gridTemplateColumns": "repeat(3, 1fr)", "gap": "token:space.8" }, "mobile": { "gridTemplateColumns": "1fr" } },
  "children": [
    { "type": "box", "props": { "tag": "article" }, "bind": { "link": "item.url" }, "children": [
      { "type": "paragraph", "props": { "tag": "time" }, "bind": { "text": "item.date|date:M j, Y" } },
      { "type": "heading", "props": { "level": "3" }, "bind": { "text": "item.title" } }
    ] }
  ]
}

where narrows entries by any field: a list of {"field": "category", "op": "=", "value": "{entry.category}"}. op is one of =, !=, <, >, <=, >=, like, in, not in, contains, null and not null, and the value may use data as in text.

#Filtering a Repeat

Put a Repeat in a List Filter block and visitors can narrow it down in the page. Set Filter By on the Repeat to the fields its choices use (item.category, item.tags), Search In to the fields search looks through (item.title, item.summary) and Sort By to the fields it can be ordered by (item.title, item.price_minor). Then add:

Choices stay real radio buttons, the result links as ?category=seo&q=image&sort=name, and screen readers hear the count. Without JavaScript the controls go and the whole list shows. Don't use it with paginate: it can only filter the items on the page.

Lettern describes itself with the same sources anyone can use: this documentation and lettern.org have no plugin of their own for their reference pages and facts. Plugins add their own sources — see Plugins.

• Nesting — give the outer Repeat an Item name (as: "link") and an inner Repeat with source: "list", path: "link.children" renders sub-menus.
• Groups — Group by (group_by) names a field of the items. The Repeat then runs once per group, in the order groups first appear, with item.label and item.items; nest a Repeat with source: "list", path: "item.items" for the items. Items without a value share a group with an empty label.
• Sections — in a tree, source: "children", of: "root" lists the section the page is in from any depth, and state:active bound to item.active marks the section or link the reader is in. This documentation's navigation is built that way.
• Empty lists show the When empty text, or nothing.
• Pagination — with paginate on, the static build writes /page/2, /page/3…; bind links after the Repeat to pagination.prev and pagination.next, or load more items in place with Load into.
• Rebuilds — a page records the collections, entries, menus and globals it reads, so publishing a post rebuilds the pages that list it and nothing else.