{% raw %}

Liquid.js 教程

原文： http://zetcode.com/javascript/liquidjs/

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

Liquid.js

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

Liquid 使用双花括号定界符{{ }}作为输出，并使用大括号百分比定界符{% %}作为逻辑。

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

此代码是示例 Liquid 语法。

模板引擎

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

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

安装 Liquid.js

首先，我们安装 Liquid.js。

$ node -v
v11.5.0

我们使用 Node 版本 11.5.0。

$ npm init -y

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

$ npm i liquidjs

我们将liquidjs模块与nmp i liquidjs一起安装。

Liquid.js 字符串渲染

我们从一个非常简单的示例开始，该示例从字符串进行渲染。

simple.js

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()函数采用模板字符串和上下文数据。 在模板字符串中，我们有一个名称变量，该变量传递给capitalize过滤器。 过滤器在输出之前修改数据。

$ node simple.js
Lucy

这是输出。

Liquid.js 排序过滤器

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

sort_filter.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);

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

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

这是输出。

Liquid.js 从文件进行渲染

要渲染文件的输出，我们使用renderFile()函数。

$ mkdir views

我们创建一个目录，在其中放置模板文件。

from_file.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)  

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

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

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

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

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

views/hello.liquid

Hello {{ name }}!

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

$ node from_file.js
Hello Peter!

这是输出。

Liquid.js 标签

液体for是一个反复执行代码块的迭代标签。

users.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

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.js 部分

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

使用include指令插入部分。

partials.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

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

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

views/home.liquid

Hello {{ name }}!

{% include 'footer' %}

include伪指令包含footer部分。

$ node partials.js
Hello Peter!

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

这是输出。

Liquid.js 继承

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

inheritance.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

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

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

views/derived.liquid

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

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

$ node inheritance.js
Header
 Some content
Footer

这是输出。

Liquid.js Express 示例

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

$ npm i express

我们安装 Express Web 框架。

express-demo.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 应用。 它显示当前日期。

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上下文变量传递给模板。

views/show_date.liquid

<!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 标签，过滤器，局部变量和继承。

您可能也对以下相关教程感兴趣： Moment.js 教程， Axios 教程， Faker.js 教程， JSONServer 教程 ， Node Sass 教程， Node.js 教程， Lodash 教程。

{% endraw %}

---

我们一直在努力

apachecn/AiLearning

---