入門指南

安裝

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() 系列的函數，它們把編譯和渲染兩個步驟合二為一。當然，在每次執(zhí)行 render 的時候，這樣一個模板函數都需要被重新編譯一遍，這會在一定程度上影響性能。但同時，您也可以在執(zhí)行 render的時候配合使用 cache 選項，它將會把編譯出來的函數自動存儲到內部緩存中。

const pug = require('pug');

// 編譯并使用一組數據渲染 template.pug
console.log(pug.renderFile('template.pug', {
  name: 'Timothy'
}));
// "<p>Timothy 的 Pug 代碼！</p>"