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 %}