Liquid.js tutorial

Liquid.js 教程展示了如何在 JavaScript 应用程序中使用 Liquid 模板引擎。

液体

Liquid 是一个 JavaScript 模板引擎。它是由 Shopify.Liquid 文件创建的，扩展名为.liquid；它们混合了静态数据，例如 HTML 和 Liquid 结构。

Liquid 使用双大括号分隔符{{ }} 用于输出，使用大括号百分比分隔符{% %} 用于逻辑。

{% if user != null %}
  Hello {{ user.name }}
{% endif %}

此代码是示例 Liquid 语法。

模板引擎

模板引擎或模板处理器是一个库，旨在将模板与数据模型结合起来以生成文档。模板引擎通常用于生成大量电子邮件、源代码预处理或生成动态 HTML 页面。

我们创建了一个模板引擎，我们在其中定义了静态部分和动态部分。动态部分稍后将替换为数据。渲染功能随后将模板与数据结合起来。

设置 Liquid.js

首先，我们安装 Liquid.js。

$ npm init -y

我们启动一个新的 Node 应用程序。

$ npm i liquidjs

我们用liquidjs安装nmp i liquidjs模块。

从字符串渲染液体

我们从一个从字符串呈现的非常简单的示例开始。

const Liquid = require('liquidjs');
const engine = new Liquid();

engine
    .parseAndRender('{{name | capitalize}}', {name: 'lucy'})
    .then(console.log);

该示例显示了字符串模板的输出。它还使用过滤器。

const Liquid = require('liquidjs');
const engine = new Liquid();

我们加载Liquid.js模块并启动引擎。

engine
  .parseAndRender('{{name | capitalize}}', {name: 'lucy'})
  .then(console.log);

parseAndRender 函数采用模板字符串和上下文数据。在模板字符串中，我们有一个 name 变量，它被传递给 capitalize 过滤器。过滤器在输出前修改数据。

$ node simple.js
Lucy

液体排序过滤器

sort 是可用的数组过滤器之一。

const Liquid = require('liquidjs');
const engine = new Liquid();

nums = [5, 3, 2, 4, 1]
ctx = { data: nums}

engine
    .parseAndRender('Sorted data: {{ data | sort }}', ctx)
    .then(console.log);

该示例对传递给模板字符串的数据进行排序。

$ node sort_filter.js
Sorted data: [1,2,3,4,5]

文件中的液体渲染

要呈现文件的输出，我们使用renderFile 函数。

$ mkdir views

我们创建了一个存放模板文件的目录。

const Liquid = require('liquidjs');
const path = require('path');

const engine = new Liquid({
    root: path.resolve(__dirname, 'views/'),
    extname: '.liquid'
});

engine
    .renderFile('hello', { name: 'Peter' })
    .then(console.log)

该示例从文本文件生成输出。

const engine = new Liquid({
    root: path.resolve(__dirname, 'views/'),
    extname: '.liquid'
});

在Liquid 构造函数中，我们提供了模板目录位置和扩展名称。扩展名通常是.liquid。

engine
  .renderFile('hello', { name: 'Peter' })
  .then(console.log)

renderFile 的第一个参数是模板名称。第二个参数是上下文数据。

Hello {{ name }}!

在模板文件中，我们使用{{}}输出上下文变量。

$ node from_file.js
Hello Peter!

标签液体

Liquid for 是一个重复执行代码块的迭代标签。

const Liquid = require('liquidjs');
const path = require('path');

const engine = new Liquid({
    root: path.resolve(__dirname, 'views/'),
    extname: '.liquid'
});

ctx = { users: [{ name: "Peter", age: 24 }, { name: "Lucy", age: 34 }] };

engine
    .renderFile("users", ctx)
    .then(console.log);

在示例中，我们定义了一个用户数组。该数组在模板中使用for 循环。

There are {{ users | size }} users

{% for user in users -%}
{{ user.name }} is {{ user.age }} years old
{% endfor -%}

模板文件输出使用sizefilter 的用户数量和来自上下文变量的所有用户。

{% for user in users -%}
{{ user.name }} is {{ user.age }} years old
{% endfor -%}

我们遍历用户数组并打印属性。空格输出可以用破折号控制。

$ node users.js
There are 2 users

Peter is 24 years old
Lucy is 34 years old

液体部分

部分是包含在其他模板中的可重用模板。部分用于重复的内容，例如页脚或页眉。

使用include 指令插入部分。

const Liquid = require('liquidjs');
const path = require('path');

const engine = new Liquid({
    root: path.resolve(__dirname, 'views/'),
    extname: '.liquid'
});

ctx = { name: 'Peter' };

engine
    .renderFile("home", ctx)
    .then(console.log);

此示例显示了home.liquid 模板的输出，其中包括一个 Liquid 部分。

{{ "now" | date: "%Y-%m-%d %H:%M" }}, ZetCode 2007 - 2022

这是页脚的一部分。在 date 过滤器的帮助下，它显示当前日期和时间。

Hello {{ name }}!

{% include 'footer' %}

footer 部分包含在include 指令中。

$ node partials.js
Hello Peter!

2019-02-13 22:52, ZetCode 2007 - 2022

流动性继承

Liquid 支持模板继承。模板继承是一项强大的功能，可减少代码重复并改进代码组织。我们定义了一个基本模板，我们在其他模板文件中继承了它。这些模板文件覆盖基本模板文件的特定块。

const Liquid = require('liquidjs');
const path = require('path');

const engine = new Liquid({
    root: path.resolve(__dirname, 'views/'),
    extname: '.liquid'
});

engine
    .renderFile("derived", { content: 'Some content' })
    .then(console.log)

该示例使用继承技术从 derived.liquid 模板生成输出。

Header
{% block content %}My default content{% endblock %}
Footer

这是其他模板继承的base.liquid 文件。block/endblock 指令用于声明在子模板中替换的内容块。

{% layout "base" %}
{% block content %} {{ content }} {% endblock %}

这是子模板。使用layout 指令，我们继承自base.liquid 模板。我们使用block/endblock 指令定义内容。

$ node inheritance.js
Header
 Some content
Footer

液体快递示例

在下面的示例中，我们在 Express 应用程序中使用 Liquid。

$ npm i express

我们安装了 Express 网络框架。

const express = require("express");
const path = require("path");
const Liquid = require('liquidjs');
const engine = new Liquid();

const app = express();

app.engine('liquid', engine.express());
app.set('views', path.resolve(__dirname, "views"));
app.set('view engine', 'liquid');

app.get("/today", (req, res) => {

    let today = new Date();
    res.render("show_date", {now: today});
});

app.use((req, res) => {
    res.statusCode = 404;
    res.end("404 - page not found");
});

app.listen(3000, () => {

    console.log("Application started on port 3000");
})

该示例是一个使用 Express 创建的简单 Web 应用程序。它显示当前日期。

app.engine('liquid', engine.express());
app.set('views', path.resolve(__dirname, "views"));
app.set('view engine', 'liquid');

我们将 Liquid 集成到 Express 应用程序中。

app.get("/today", (req, res) => {

    let today = new Date();
    res.render("show_date", {now: today});
});

对于/today 路径，我们显示当前日期。 show_date.liquid 生成输出。我们将 nowcontext 变量传递给模板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show date</title>
</head>
<body>

    <p>
        Today is {{ now }}
    </p>

</body>
</html>

show_date.liquid 生成 HTML 输出。它使用 {{}} 将当前日期添加到内容中。

$ node express-demo.js
Application started on port 3000

我们启动应用程序。

$ curl localhost:3000/today
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show date</title>
</head>
<body>

    <p>
        Today is Wed Feb 13 2019 23:19:07 GMT+0100 (Central European Standard Time)
    </p>

</body>
</html>

我们使用 curl 工具创建对应用程序的请求。

在本文中，我们使用 Liquid.js 从 Liquid 模板和数据生成文档。我们介绍了 Liquid 标签、过滤器、部分和继承。

列出所有 JavaScript 教程。