入门指南 ~~ Getting Started

安装 ~~ Installation

Pug 可以通过 npm 获得:

  1. $ npm install pug

概要 ~~ Overview

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

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

  1. //- template.pug
  2. p #{name}的 Pug 代码！
  1. const pug = require('pug');
  3. // 编译这份代码
  4. const compiledFunction = pug.compileFile('template.pug');
  6. // 渲染一组数据
  7. console.log(compiledFunction({
  8.   name: '李莉'
  9. }));
  10. // "<p>李莉的 Pug 代码！</p>"
  12. // 渲染另外一组数据
  13. console.log(compiledFunction({
  14.   name: '张伟'
  15. }));
  16. // "<p>张伟的 Pug 代码！</p>"

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

  1. const pug = require('pug');
  3. // 编译并使用一组数据渲染 template.pug
  4. console.log(pug.renderFile('template.pug', {
  5.   name: 'Timothy'
  6. }));
  7. // "<p>Timothy 的 Pug 代码！</p>"