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 -%}
模板文件输出使用size
filter 的用户数量和来自上下文变量的所有用户。
{% 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
生成输出。我们将 now
context 变量传递给模板。
<!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 教程。