入门指南

安装

Pug 可以通过 npm 获得:

$ npm install pug

概要

Pug 的渲染操作一般来说是相当简单的。 pug.compile() 会把 Pug 代码编译成一个 JavaScript 函数,并且这个函数有一个参数可用于传入数据(局部变量,locals)。调用这个编译出来的函数,并且传入您的数据,很好! 这时返回的就是用您提供的数据渲染的 HTML 字符串了。

这个编译出来的函数可以被重复使用,也可以传入不同的数据。

//- template.pug
p #{name}的 Pug 代码!
const pug = require('pug');

// 编译这份代码
const compiledFunction = pug.compileFile('template.pug');

// 渲染一组数据
console.log(compiledFunction({
  name: '李莉'
}));
// "<p>李莉的 Pug 代码!</p>"

// 渲染另外一组数据
console.log(compiledFunction({
  name: '张伟'
}));
// "<p>张伟的 Pug 代码!</p>"

Pug 也提供了 pug.render() 系列的函数,它们把编译和渲染两个步骤合二为一。当然,在每次执行 render 的时候,这样一个模板函数都需要被重新编译一遍,这会在一定程度上影响性能。但同时,您也可以在执行 render 的时候配合使用 cache 选项,它将会把编译出来的函数自动存储到内部缓存中。

const pug = require('pug');

// 编译并使用一组数据渲染 template.pug
console.log(pug.renderFile('template.pug', {
  name: 'Timothy'
}));
// "<p>Timothy 的 Pug 代码!</p>"