Supported Liquid Tags

View as Markdown

TailStatic uses Liquid as its primary templating engine. Liquid allows you to build dynamic pages using a combination of HTML and logical tags.

Standard Liquid Tags

TailStatic supports all common Liquid tags for control flow, iteration, and variable management.

Control Flow

  • {% if %}, {% else %}, {% elsif %}, {% endif %}: Standard conditional logic.
  • {% unless %}, {% endunless %}: Opposite of if.
  • {% case %}, {% when %}, {% endcase %}: Switch-case logic.

Iteration

  • {% for %}, {% endfor %}: Loop through collections or arrays.
  • {% cycle %}: Alternate between values in a loop.

Variables

  • {% assign %}: Create or update a variable.
  • {% capture %}, {% endcapture %}: Store a block of text into a variable.
  • {% increment %}: Create a counter and increase it each time it is called.
  • {% decrement %}: Create a counter and decrease it each time it is called.

Template Helpers

  • {% comment %}, {% endcomment %}: Add non-rendering comments to your code.
  • {% raw %}, {% endraw %}: Prevent Liquid from processing a block of code.
  • {% include %}: Include a partial template from the /components directory.

Custom TailStatic Tags

In addition to standard Liquid, TailStatic provides several custom tags to handle site-specific features like layouts, asset management, and UI components.

layout

Defines which layout file to use for the current page.

  • Syntax: {% layout "path/to/layout" %}
  • Example: {% layout "_layout" %} looks for /components/_layout.liquid.

body_content

Used inside a layout file to mark where the page content should be rendered.

  • Syntax: {% body_content %}

json

Parses a JSON block and assigns it to a variable for use in the template.

  • Syntax: {% json variableName [layout=true] %} ... {% endjson %}
  • Example:
    {% json myData %}
{
  "title": "Welcome",
  "items": [1, 2, 3]
}
{% endjson %}
<p>{{ myData.title }}</p>
  • Set layout=true if you want this JSON object to be available in the layout scope as well.

css

Includes one or more CSS files.

  • Syntax: {% css "css_path" [bundle="name"] %}
  • Example: {% css "/assets/style.css" bundle="main" %}
  • If a bundle name is provided, the files are registered to that bundle but not rendered immediately if bundling is enabled.

js

Includes one or more JavaScript files.

  • Syntax: {% js "js_path" [bundle="name"] %}
  • Example: {% js "/assets/app.js" bundle="main" %}

bundle

Renders the HTML tags for a previously declared CSS or JS bundle.

  • Syntax: {% bundle type="css|js" name="bundleName" [gz="true"] %}
  • Example: {% bundle type="css" name="main" %}
  • Use gz="true" to request the compressed (.gz) version of the bundle.

page_section_navigation

Renders a navigation component based on the sections found on the a collection's post page.

  • Syntax: {% page_section_navigation %}

captcha

Renders tags and scripts required for captcha validation. This should usually be put inside form tag.

  • Syntax: {% captcha %}

Renders a search box specifically designed for filtering posts within a collection.

  • Syntax: {% collection_search_box collection="name" %}
  • Example: {% collection_search_box collection="docs" %}

See Also