Ultimate Guide to LiquidJS
LiquidJS is a simple, powerful, and flexible templating engine for JavaScript. Whether you are working on Node.js or in the browser, LiquidJS can help you render dynamic content with ease. In this guide, we will introduce LiquidJS and explore dozens of useful API methods with code snippets, and provide a comprehensive application example to demonstrate their use.
Introduction to LiquidJS
Liquid was originally created by Shopify as a free and open-source template language in Ruby. LiquidJS is the JavaScript implementation of Liquid, allowing developers to take advantage of this powerful template language in their JavaScript applications.
Basic Usage
const Liquid = require('liquidjs');
const engine = new Liquid();
const template = 'Hello, {{name}}!';
const data = { name: 'World' };
engine
.parseAndRender(template, data)
.then(result => console.log(result));
// Output: Hello, World!
Advanced Filters
LiquidJS provides a variety of filters to transform data within your templates.
const template = 'Welcome to {{ site_name | capitalize }}!';
const data = { site_name: 'my site' };
engine
.parseAndRender(template, data)
.then(result => console.log(result));
// Output: Welcome to My Site!
Loops and Conditionals
LiquidJS supports loops and conditionals to control the flow of your templates.
const template = `
-
{% for product in products %}
- {{ product.name }} - {{ product.price }} {% endfor %}
-
//
- Product 1 - $10 //
- Product 2 - $20 //
Custom Filters
You can also create custom filters to extend the capabilities of LiquidJS.
engine.registerFilter('reverse', val => val.split('').reverse().join(''));
const template = 'Reversed: {{ "hello" | reverse }}';
engine
.parseAndRender(template)
.then(result => console.log(result));
// Output: Reversed: olleh
Full Application Example
Let’s create a simple web application using LiquidJS.
const express = require('express');
const Liquid = require('liquidjs');
const app = express();
const engine = new Liquid();
app.engine('liquid', engine.express());
app.set('views', './views'); // specify the views directory
app.set('view engine', 'liquid'); // set the view engine to liquid
app.get('/', (req, res) => {
const products = [
{ name: 'Product 1', price: '$10' },
{ name: 'Product 2', price: '$20' },
];
res.render('index', { products });
});
app.listen(3000, () => console.log('Server is running on port 3000'));
index.liquid
<!DOCTYPE html>
<html>
<head>
<title>Product List</title>
</head>
<body>
<h1>Product List</h1>
<ul>
{% for product in products %}
<li>{{ product.name }} - {{ product.price }}</li>
{% endfor %}
</ul>
</body>
</html>
In this example, we create a simple Express server that uses LiquidJS as the templating engine. The server renders a list of products on the homepage.
With LiquidJS, you can quickly and easily generate dynamic content in your web applications. Whether you need to create reusable templates, apply filters, or control the flow of your content, LiquidJS provides the tools you need to get the job done.
Hash: 7482054a3bb21e7ef10dd3c329e1bf0b30285500d42d72676090b7c330027715
