Liquid.js 教程
最后修改于 2023 年 10 月 18 日
在本文中，我们将展示如何在 JavaScript 应用程序中使用 Liquid 模板引擎。
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
我们使用 nmp i liquidjs 安装 liquidjs 模块。
从字符串渲染 Liquid
我们从一个非常简单的示例开始，该示例从字符串渲染。
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
Liquid 排序过滤器
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]
从文件渲染 Liquid
要从文件渲染输出，我们使用 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 标签
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 -%}
模板文件使用 size 过滤器和上下文变量中的所有用户输出用户数量。
{% 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
Liquid 局部
局部是可重用的模板，它们包含在其他模板中。局部用于重复的内容，例如页脚或页眉。
局部使用 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 继承
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
Liquid Express 示例
在下面的示例中，我们在 Express 应用程序中使用 Liquid。
$ npm i express
我们安装 Express Web 框架。
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 生成输出。我们将 now 上下文变量传递给模板。
<!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 标签、过滤器、局部和继承。