Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Liquid template engine writen in javascript.
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
test
.travis.yml
Makefile
README.md
liquid-lite.js
min.js
package.json

README.md

Liquid template engine

This is a not complete port of Liquid template engine. Download compressed (930 bytes, 584 bytes gzipped) or uncompressed source. A complete port is available by darthapo.

Build Status

When to use liquid-lite

  • When you trust your templates

How to use in browser

<script src=liquid-lite.js></script>

<script id=products type="text/liquid">
<ul class="products">
  {% for product in products %}
    <li>
      <h2>{{ product.title | upcase }}</h2>
      Only {{ product.price }}
      <p>{{ product.description }}</p>
    </li>
  {% endfor %}
</ul>
</script>

<div id=page></div>

<script>
var template = liquid( document.getElementById("products").innerHTML )

var data = { products:
  [ { title: "Product A", price: 1.01, description: "Hello a" }
  , { title: "Product B", price: 1.02, description: "Hello b" }
  , { title: "Product C", price: 1.03, description: "Hello c" }
  ]
}

document.getElementById("page").innerHTML = template(data)
</script>

See test.html for more examples

How to use in node.js

npm install liquid-lite

var liquid = require("liquid-lite").liquid

var template = liquid( my_template_string )

var data = { products:
  [ { title: "Product A", price: 1.01, description: "Hello a" }
  , { title: "Product B", price: 1.02, description: "Hello b" }
  , { title: "Product C", price: 1.03, description: "Hello c" }
  ]
}

var output = template(data)

Tags

if / elsif / else

{% if user %}
  Hello {{ user.name }}
{% endif %}
{% if user.name == "bob" %}
  Hello Bob
{% endif %}

for

{% for product in products %}
  {{ product.title }}
{% endfor %}

{% for i = 3; i > 0; i-- %}
  {{ i }}
{% endfor %}

{% for item in ["a", "b", "c"] %}
  {{ item }}
{% endfor %}

The following helper variables are available:

  • loop.key - named key when iterated over Object
  • loop.i - index

Liquid Filters

Standard Filters are not implemented by default but you have access to prototypes. Make as many as you need or use liquid-filters-lite.

  • date - reformat a date syntax reference
    Implemented in date-format-lite

    var item = { "timestamp": 1363770186, "datetime": "2013-03-20T09:03:06Z" }
    {{ timestamp | date:"isoUtcDateTime" }}
    {{ datetime | date:"hh:mm" }}
  • capitalize - capitalize words in the input sentence

    String.prototype.capitalize = function() {
      return this.charAt(0).toUpperCase() + this.slice(1)
    }
  • downcase - convert an input string to lowercase

    String.prototype.downcase = String.prototype.toLowerCase

See liquid-filters-lite for more examples

Notes

  • You can access to properties named by reserved words thru _0 object. javascript {% for val in _0["enum"] %}

Licence

Copyright (c) 2012 Lauri Rooden <lauri@rooden.ee>
The MIT License

Something went wrong with that request. Please try again.