ed15a52c26
* docs: polish theme, playground, and reference pages Improve readability of the docs site with updated light/dark tokens, shared code-block styling, and playground editors that follow system color scheme. Skip CookieHub on localhost, serve the browser bundle from theme source, and use backtick titles on filter/tag reference pages for consistent navigation. Co-authored-by: Cursor <[email protected]> * docs: highlight npx in bash blocks and polish English copy Use Prism insertBefore for CLI commands like npx, tighten tutorial and reference wording, and keep YAML titles free of backticks so sidebar and page headings stay correct. Co-authored-by: Cursor <[email protected]> * docs: restore lowercase filter and tag titles Titles should match actual filter/tag identifiers (e.g. abs, append), not capitalized English labels. Co-authored-by: Cursor <[email protected]> --------- Co-authored-by: Cursor <[email protected]>
2.2 KiB
title, describe
| title | describe |
|---|---|
| The Liquid Template Language | A short introduction to the Liquid template language and some simple demos. |
LiquidJS is a simple, expressive and safe Shopify / GitHub Pages compatible template engine in pure JavaScript. The purpose of this repo is to provide a standard Liquid implementation for the JavaScript community. Liquid is originally implemented in Ruby and used by GitHub Pages, Jekyll and Shopify, see Differences with Shopify/liquid.
LiquidJS syntax is relatively simple. There are 2 types of markups in LiquidJS:
- Tags. A tag consists of a tag name and optional arguments wrapped between
{%raw%}{%{%endraw%}and%}. - Outputs. An output consists of a value and a list of filters, which is optional, wrapped between
{%raw%}{{{%endraw%}and}}.
{% note info Live Demo %} Before going into the details, here's a live demo to play around: https://liquidjs.com/playground.html. {% endnote %}
Outputs
Outputs are used to output variables, which can be transformed by filters, into HTML. The following template will insert the value of username into the input's value:
<input type="text" name="user" value="{{username}}">
Values in output can be transformed by filters before output. To append a string after the variable:
{{ username | append: ", welcome to LiquidJS!" }}
Filters can be chained:
{{ username | append: ", welcome to LiquidJS!" | capitalize }}
A complete list of filters supported by LiquidJS can be found here.
Tags
Tags are used to control the template rendering process, manipulating template variables, interacting with other templates, etc. For example assign can be used to define a variable that can be later used in the template:
{% assign foo = "FOO" %}
Typically tags appear in pairs with a start tag and a corresponding end tag. For example:
{% if foo == "FOO" %}
Variable `foo` equals "FOO"
{% else %}
Variable `foo` does not equal "FOO"
{% endif %}
A complete list of tags supported by LiquidJS can be found here.