Pug 入門指南

入門指南

安裝

Pug 可以通過(guò) npm 獲得:

$ npm install pug

概要

Pug 的渲染操作一般來(lái)說(shuō)是相當(dāng)簡(jiǎn)單的。 pug.compile() 會(huì)把 Pug 代碼編譯成一個(gè) JavaScript 函數(shù)，并且這個(gè)函數(shù)有一個(gè)參數(shù)可用于傳入數(shù)據(jù)（局部變量，locals）。調(diào)用這個(gè)編譯出來(lái)的函數(shù)，并且傳入您的數(shù)據(jù)，很好！ 這時(shí)返回的就是用您提供的數(shù)據(jù)渲染的 HTML 字符串了。

這個(gè)編譯出來(lái)的函數(shù)可以被重復(fù)使用，也可以傳入不同的數(shù)據(jù)。

//- template.pug
p #{name}的 Pug 代碼！

const pug = require('pug');

// 編譯這份代碼
const compiledFunction = pug.compileFile('template.pug');

// 渲染一組數(shù)據(jù)
console.log(compiledFunction({
  name: '李莉'
}));
// "<p>李莉的 Pug 代碼！</p>"

// 渲染另外一組數(shù)據(jù)
console.log(compiledFunction({
  name: '張偉'
}));
// "<p>張偉的 Pug 代碼！</p>"

Pug 也提供了 pug.render() 系列的函數(shù)，它們把編譯和渲染兩個(gè)步驟合二為一。當(dāng)然，在每次執(zhí)行 render 的時(shí)候，這樣一個(gè)模板函數(shù)都需要被重新編譯一遍，這會(huì)在一定程度上影響性能。但同時(shí)，您也可以在執(zhí)行 render的時(shí)候配合使用 cache 選項(xiàng)，它將會(huì)把編譯出來(lái)的函數(shù)自動(dòng)存儲(chǔ)到內(nèi)部緩存中。

const pug = require('pug');

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