入门(Getting Started)

¥Getting Started

安装(Installation) ¶

¥Installation

Pug 可通过 npm 获得：

¥Pug is available via npm:

$ npm install pug

概述(Overview) ¶

¥Overview

Pug 的总体渲染过程很简单。pug.compile() 会将 Pug 源代码编译为 JavaScript 函数，该函数采用数据对象（称为“locals”）作为参数。使用你的数据调用该结果函数，瞧！，它将返回一个使用你的数据渲染的 HTML 字符串。

¥The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an argument. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data.

编译后的函数可以重复使用，并可以使用不同的数据集进行调用。

¥The compiled function can be re-used, and called with different sets of data.

//- 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 一起使用，这将自动将编译后的函数存储到内部缓存中。

¥Pug also provides the pug.render() family of functions that combine compiling and rendering into one step. However, the template function will be re-compiled every time render is called, which might impact performance. Alternatively, you can use the cache option with render, which will automatically store the compiled function into an internal cache.

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>"