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 教程。
