入門

安裝 ¶

Pug 可透過 npm 取得

$ npm install pug

概觀 ¶

Pug 的一般渲染程序很簡單。pug.compile() 會將 Pug 原始碼編譯成一個 JavaScript 函數，該函數會將資料物件（稱為「locals」）作為參數。使用資料呼叫結果函數，瞧！，它會傳回使用資料渲染的 HTML 字串。

編譯的函數可以重複使用，並使用不同的資料集呼叫。

//- template.pug
p #{name}'s Pug source code!

const pug = require('pug');

// Compile the source code
const compiledFunction = pug.compileFile('template.pug');

// Render a set of data
console.log(compiledFunction({
  name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"

// Render another set of data
console.log(compiledFunction({
  name: 'Forbes'
}));
// "<p>Forbes's Pug source code!</p>"

Pug 也提供 pug.render() 函數系列，將編譯和渲染合併成一個步驟。不過，每次呼叫 render 時，都會重新編譯範本函數，這可能會影響效能。或者，你可以將 cache 選項與 render 搭配使用，它會自動將編譯的函數儲存在內部快取中。

const pug = require('pug');

// Compile template.pug, and render a set of data
console.log(pug.renderFile('template.pug', {
  name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"