跳到主要内容
Pug logo

Pug 是一个用 JavaScript 实现的高性能的模板引擎，支持 Node.js 和浏览器运行环境，其灵感来自 Haml 项目。

曾用名 "Jade"​

本项目曾用名叫 “Jade”。然而，我们发现 “Jade” 是一个已经被注册的商标，因此需要给项目起一个新名字。经过项目维护团队的讨论，我们将名字改为了 “Pug”。从版本 2 开始，"pug" 成为了官方软件包的名称。

如果你的软件包或应用程序正在使用 jade 命名的软件包，别担心，尽管所有后续版本将以 pug 名称发布，但是我们仍然保有 jade 作为软件包名称的权限。

在更名之前，“Jade 2.0.0” 的开发工作就已经开始了。因此，更名为 Pug 时恰逢主版本的升级。所以，从 Jade 变更为 Pug 的过程将与升级任何软件包的主版本号的升级流程一样。

与以前版本相比，Pug 的语法有几处修改、弃用和删除。这些改变请见 #2305。

Pug 的网站和文档仍在更新中。但是，如果你是 Pug 新手的话，你将直接使用上新语法，并从 npm 上安装的是名为 Pug 的软件包。

安装​

软件包​

在 JavaScript 项目中使用 Pug：

$ npm install pug

命令行​

首先安装最新版本的 Node.js，然后安装 pug-cli：

$ npm install pug-cli -g

然后执行以下命令：

$ pug --help

语法​

Pug 具有简洁、对空格敏感的语法，用于输出 HTML。以下是一个简单的示例：

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5);
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

Pug 将上面的代码转换为：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5);
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>
        Pug is a terse and simple templating language with a strong focus on
        performance and powerful features.
      </p>
    </div>
  </body>
</html>

API​

如需查看完整的 API，请进入 语法手册。

var pug = require('pug');

// compile
var fn = pug.compile('string of pug', options);
var html = fn(locals);

// render
var html = pug.render('string of pug', merge(options, locals));

// renderFile
var html = pug.renderFile('filename.pug', merge(options, locals));

支持的浏览器​

Pug 最新版本可以 独立加载到浏览器中。不过，只支持最新的浏览器，而且文件太大。建议将 pug 模板预编译为 JavaScript 代码再在浏览器中使用。

在命令行中编译模板并在浏览器中使用，操作如下：

$ pug --client --no-debug filename.pug

上述命令将生成 filename.js 文件，该文件包含了编译后的模板。

其他编程语言的实现​

移植到其它编程语言​

移植到其它编程语言，并具有几乎一致的语法：

其他编程语言的类似实现​

其他编程语言实现的模板引擎，虽然语法不同，但具有相似的理念：

在框架中的实现或适配​

嵌入到框架中的视图引擎（view engines）：

内容管理系统（CMS）插件​

更多有用的资源​