Liquid.js 教程 · ZetCode 中文系列教程

{% raw %} # Liquid.js 教程 > 原文： [http://zetcode.com/javascript/liquidjs/](http://zetcode.com/javascript/liquidjs/) Liquid.js 教程展示了如何在 JavaScript 应用中使用 Liquid 模板引擎。 ## Liquid.js Liquid.js 是 JavaScript 模板引擎。它由 Shopify 创建。临时文件的扩展名为`.liquid`；它们混合了静态数据，例如 HTML 和 Liquid 结构。 Liquid 使用双花括号定界符`{{ }}`作为输出，并使用大括号百分比定界符`{% %}`作为逻辑。 ```js {% if user != null %} Hello {{ user.name }} {% endif %} ``` 此代码是示例 Liquid 语法。 ## 模板引擎模板引擎或模板处理器是一个旨在将模板与数据模型结合以生成文档的库。模板引擎通常用于在源代码预处理中生成大量电子邮件，或生成动态 HTML 页面。我们创建一个模板引擎，在其中定义静态零件和动态零件。动态部分随后将替换为数据。渲染功能随后将模板与数据结合在一起。 ## 安装 Liquid.js 首先，我们安装 Liquid.js。 ```js $ node -v v11.5.0 ``` 我们使用 Node 版本 11.5.0。 ```js $ npm init -y ``` 我们启动一个新的 Node 应用。 ```js $ npm i liquidjs ``` 我们将`liquidjs`模块与`nmp i liquidjs`一起安装。 ## Liquid.js 字符串渲染我们从一个非常简单的示例开始，该示例从字符串进行渲染。 `simple.js` ```js const Liquid = require('liquidjs'); const engine = new Liquid(); engine .parseAndRender('{{name | capitalize}}', {name: 'lucy'}) .then(console.log); ``` 该示例显示了字符串模板的输出。它还使用过滤器。 ```js const Liquid = require('liquidjs'); const engine = new Liquid(); ``` 我们加载`Liquid.js`模块并启动引擎。 ```js engine .parseAndRender('{{name | capitalize}}', {name: 'lucy'}) .then(console.log); ``` `parseAndRender()`函数采用模板字符串和上下文数据。在模板字符串中，我们有一个名称变量，该变量传递给`capitalize`过滤器。过滤器在输出之前修改数据。 ```js $ node simple.js Lucy ``` 这是输出。 ## Liquid.js 排序过滤器 `sort`是可用的数组过滤器之一。 `sort_filter.js` ```js 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); ``` 该示例对传递给模板字符串的数据进行排序。 ```js $ node sort_filter.js Sorted data: [1,2,3,4,5] ``` 这是输出。 ## Liquid.js 从文件进行渲染要渲染文件的输出，我们使用`renderFile()`函数。 ```js $ mkdir views ``` 我们创建一个目录，在其中放置模板文件。 `from_file.js` ```js 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) ``` 该示例从文本文件生成输出。 ```js const engine = new Liquid({ root: path.resolve(__dirname, 'views/'), extname: '.liquid' }); ``` 在`Liquid`构造器中，我们提供模板目录位置和扩展名。扩展名通常是`.liquid`。 ```js engine .renderFile('hello', { name: 'Peter' }) .then(console.log) ``` `renderFile()`的第一个参数是模板名称。第二个参数是上下文数据。 `views/hello.liquid` ```js Hello {{ name }}! ``` 在模板文件中，我们使用`{{}}`输出上下文变量。 ```js $ node from_file.js Hello Peter! ``` 这是输出。 ## Liquid.js 标签液体`for`是一个反复执行代码块的迭代标签。 `users.js` ```js 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`在模板中循环。 `views/users.liquid` ```js There are {{ users | size }} users {% for user in users -%} {{ user.name }} is {{ user.age }} years old {% endfor -%} ``` 模板文件输出使用`size`过滤器的用户数以及上下文变量中的所有用户。 ```js {% for user in users -%} {{ user.name }} is {{ user.age }} years old {% endfor -%} ``` 我们遍历用户数组并打印属性。空格输出可以用破折号字符控制。 ```js $ node users.js There are 2 users Peter is 24 years old Lucy is 34 years old ``` 这是输出。 ## Liquid.js 部分部分是可重用的模板，包含在其他模板中。部分用于重复的内容，例如页脚或页眉。使用`include`指令插入部分。 `partials.js` ```js 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`模板的输出，该模板包括液体部分。 `views/footer.liquid` ```js {{ "now" | date: "%Y-%m-%d %H:%M" }}, ZetCode 2007 - 2019 ``` 这是页脚的一部分。借助`date`过滤器，它可以显示当前日期和时间。 `views/home.liquid` ```js Hello {{ name }}! {% include 'footer' %} ``` `include`伪指令包含`footer`部分。 ```js $ node partials.js Hello Peter! 2019-02-13 22:52, ZetCode 2007 - 2019 ``` 这是输出。 ## Liquid.js 继承 Liquid 支持模板继承。模板继承是一项强大的功能，可减少代码重复并改善代码组织。我们定义了一个基本模板，其他模板文件也从中继承。这些模板文件将覆盖基本模板文件的特定块。 `inheritance.js` ```js 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`模板生成输出，该模板使用继承技术。 `views/base.liquid` ```js Header {% block content %}My default content{% endblock %} Footer ``` 这是其他模板继承的`base.liquid`文件。 `block/endblock`指令用于声明一个内容块，该内容块将在子模板中替换。 `views/derived.liquid` ```js {% layout "base" %} {% block content %} {{ content }} {% endblock %} ``` 这是子模板。使用`layout`指令，我们继承自`base.liquid`模板。我们使用`block/endblock`指令定义内容。 ```js $ node inheritance.js Header Some content Footer ``` 这是输出。 ## Liquid.js Express 示例在下面的示例中，我们在 Express 应用中使用 Liquid。 ```js $ npm i express ``` 我们安装 Express Web 框架。 `express-demo.js` ```js 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 应用。它显示当前日期。 ```js app.engine('liquid', engine.express()); app.set('views', path.resolve(__dirname, "views")); app.set('view engine', 'liquid'); ``` 我们将 Liquid 集成到 Express 应用中。 ```js app.get("/today", (req, res) => { let today = new Date(); res.render("show_date", {now: today}); }); ``` 对于`/today`路径，我们显示当前日期。 `show_date.liquid`生成输出。我们将`now`上下文变量传递给模板。 `views/show_date.liquid` ```js <!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 输出。它使用`{{}}`将当前日期添加到内容中。 ```js $ node express-demo.js Application started on port 3000 ``` 我们启动该应用。 ```js $ 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 标签，过滤器，局部变量和继承。您可能也对以下相关教程感兴趣： [Moment.js 教程](/javascript/momentjs/)， [Axios 教程](/javascript/axios/)， [Faker.js 教程](/javascript/faker)， [JSONServer 教程](/javascript/jsonserver/) ， [Node Sass 教程](/javascript/nodesass/)， [Node.js 教程](/javascript/nodejs/)， [Lodash 教程](/javascript/lodash/)。 {% endraw %}