TailStatic uses [Liquid](https://shopify.github.io/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**:
  ```liquid
  {% 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 %}`

#### collection_search_box
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

* [Site Directory Layout](/docs/site-directory-layout)