pug.js 教程介绍了 Pug 模板引擎。
哈巴狗
Pug 是一个 JavaScript 模板引擎。它是一个高性能的模板引擎，深受 Haml 的影响，并使用 JavaScript 为 Node.js 和浏览器实现。 Pug 的前身是 calle Jade。
模板引擎
模板引擎或模板处理器是一个库，旨在将模板与数据模型结合起来以生成文档。模板引擎通常用于生成大量电子邮件、源代码预处理或生成动态 HTML 页面。
我们创建了一个模板引擎，我们在其中定义了静态部分和动态部分。动态部分稍后将替换为数据。渲染函数随后将模板与数据结合起来。
设置 Pug.js
首先，我们安装 Pug.js。
$ npm init -y
我们启动一个新的 Node 应用程序。
$ npm i pug
我们用pug安装nmp i pug模块。
Pug.js 从字符串渲染
我们从一个从字符串呈现的非常简单的示例开始。
import { render } from 'pug';
const template = 'p #{name} is a #{occupation}';
const data = { 'name': 'John Doe', 'occupation': 'gardener' };
const output = render(template, data);
console.log(output);
该示例显示了字符串模板的输出。
import { render } from 'pug';
我们从 pug 模块加载 render 函数。
const template = 'p #{name} is a #{occupation}';
这是我们简单的字符串模板。第一个值是要渲染的标签。此外，我们添加两个变量：name 和occupation。要输出我们使用#{} 语法的变量。
const data = { 'name': 'John doe', 'occupation': 'gardener' };
这是我们传递给模板引擎的数据。
const output = render(template, data);
render 函数采用模板字符串和上下文数据。它将两者都编译成最终的字符串输出。
$ node app.js <p>John Doe is a gardener</p>
Pug.js 编译文件
compileFile 函数将 Pug 模板从文件编译为函数，该函数可以使用不同的局部变量多次呈现。
p Hello #{name}!
这是模板文件；它有一个 .pug 扩展名。
import { compileFile } from 'pug';
const cfn = compileFile('template.pug');
const res = cfn({'name': 'John Doe'});
console.log(res);
const res2 = cfn({'name': 'Roger Roe'});
console.log(res2);
我们将模板编译为一个函数，并使用两个不同的本地数据调用该函数。
$ node app.js <p>Hello John Doe!</p> <p>Hello Roger Roe!</p>
Pug.js 渲染文件
renderFile 函数从文件编译 Pug 模板，并将其与局部变量一起呈现为 HTML 字符串。
doctype html
html
body
ul
li Name: #{name}
li Occupation: #{occupation}
在模板中，我们有一个带有无序列表的小型 HTML 文档。我们有两个变量。
import { renderFile } from 'pug';
const options = { 'pretty': true }
const locals = { 'name': 'John doe', 'occupation': 'gardener', };
const res = renderFile('template.pug', Object.assign(locals, options));
console.log(res);
我们用Object.assign合并局部变量和选项；
const options = { 'pretty': true }
在选项图中，我们设置漂亮的打印。 （请注意，此选项已弃用。）
$ node app.js
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Name: John doe</li>
<li>Occupation: gardener</li>
</ul>
</body>
</html>
Pug.js 传递数据列表
在下面的示例中，我们将数据列表传递给模板引擎并对其进行处理。
doctype html
html
body
ul
each e in names
li= e
在模板中，我们使用each 形式遍历传递给模板的数据列表。
import { renderFile } from 'pug';
const names = ['John Doe', 'Roger Roe', 'Paul Smith', 'Rebecca Jordan'];
const res = renderFile('template.pug', { 'names': names });
console.log(res);
我们定义了一个名字列表。该列表通过 names 选项传递给选项中的模板引擎。
Pug.js 条件
条件是使用if/else 关键字创建的。
doctype html
html
head
style.
.emp { background: lightGreen }
body
if emp
p.emp Today is #{today}
else
p Today is #{today}
在模板中，我们根据 emp 选项显示强调的段落。
style.
使用点语法，我们可以将一段文本传递给标签。
import { renderFile } from 'pug';
import { writeFileSync } from 'fs';
const today = new Date().toLocaleDateString()
const emp = false;
const output = renderFile('template.pug', {'today': today, 'emp': emp});
writeFileSync('index.html', output);
我们获取当前数据并将其沿emp 变量传递给模板引擎。 emp 确定输出是否被强调。生成的输出将写入带有writeFileSync 的文件。
Pug.js 表
在下面的示例中，我们从 CSV 文件中读取数据并将其呈现在 HTML 表中。
$ npm i csv
我们使用csv模块来处理CSV数据。
id,name,price 1,Audi,52642 2,Mercedes,57127 3,Skoda,9000 4,Volvo,29000 5,Bentley,350000 6,Citroen,21000 7,Hummer,41400 8,Volkswagen,21600 9,Toyota,26700
此 CSV 数据呈现在 HTML 表格中。
doctype html
html
body
table
thead
tr
each header in headers
th= header
tbody
each field in fields
tr
td= field.id
td= field.name
td= field.price
数据显示在 HTML 表格中。
td= field.id
td= 语法插入字段。
import { renderFile } from 'pug';
import { readFileSync, writeFileSync } from 'fs';
import pkg from 'csv';
const { parse } = pkg;
const csvData = readFileSync('cars.csv').toString();
parse(csvData, { columns: true }, (e, records) => {
const headers = Object.keys(records[0]);
const template = 'template.pug';
const options = { 'fields': records, 'headers': headers };
const res = renderFile(template, options);
writeFileSync('index.html', res);
});
我们读取并解析 CSV 数据。我们将 CSV 数据分成标题和记录。
Pug.js 与 Express.js
在下一个示例中，我们将 Pug.js 与 Express.js 网络框架集成。
html
body
p Today is #{today}
模板放在views目录下。
import express from "express";
const app = express();
app.set('view engine', 'pug');
app.get("/today", (req, res) => {
let today = new Date();
res.render("index", {today: today});
});
app.use((req, res) => {
res.statusCode = 404;
res.end("404 - page not found");
});
app.listen(3000, () => {
console.log("Application started on port 3000");
});
该示例是一个显示当前日期的小型 Web 应用程序。
app.set('view engine', 'pug');
我们告诉 Express 使用 Pug。
app.get("/today", (req, res) => {
let today = new Date();
res.render("index", {today: today});
});
我们为index 路由渲染/today 模板。
在本文中，我们使用 Pug.js 从 Pug 模板和数据生成 HTML 文档。
列出所有 JavaScript 教程。
