Skip to content

tuzhu008/gitbook-pug_cn

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pug

完整的文档在 pugjs.org

Pug是一个高性能的模板引擎,深受 Haml 的影响,并为 Node.js 实现了浏览器 JavaScript。对于bug报告、特性请求和问题,请打开一个问题。讨论请加入聊天室

你可以在这里试驾 Pug。

Build Status Coverage Status Dependency Status devDependencies Status NPM version Join Gitter Chat OpenCollective OpenCollective

重命名自 "Jade"

这个项目以前被称为“Jade”。然而,它已经向我们透露,“Jade”是一个注册商标,因此需要重命名。在维护人员之间进行了一些讨论之后,“Pug” 被选为这个项目的新名称。下一个主要版本将把“pug” 作为包名。

如果您的包或应用程序目前使用的是 jade,请不要担心:我们已经获得了继续使用这个包名的权限,尽管所有的新版本都将在 pug 下发布。

在重命名之前,我们已经开始研究一个不兼容的 Jade 2.0.0。我们这样做了,所以这个新的主要版本 bump 将与重命名为 Pug 一致。因此,从 Jade 升级到 Pug,将与升级任何其他带有主要版本的包的过程一样。目前,Pug 2.0.0 还处于测试阶段,我们已经弃用了一些语法差异。这些差异在 #2305 被记录下来。

Pug的网站和文档还在更新中,但是如果你是 Pug 的新手,你应该开始使用新的语法,并在 npm 上安装 Pug 包。

安装

via npm:

$ npm install pug

命令行

�在安装了最新版本的 Node.js 后,使用以下指令安装命令行�接口:

$ 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.

对应的 HTML:

<!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,请参见 API英文文档。 。也可以查看 Pug API 中文文档

var pug = require('pug');

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

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

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

选项

  • filename 用于异常信息以及(使用相对路径的)包含(include)和扩展(extends)操作。
  • compileDebug �当设置为 false 时,源代码不会被包含在编译出来的模板函数中,
  • pretty 在输出中添加空白缩进 (默认为:false)

浏览器支持

最新版本的 pug 可以从这里下载到浏览器中。它只支持最新的浏览器,而且是一个大文件。建议您预编译您的 pug 模板到JavaScript。

�要在客户端上使用命令行编译模板,这样做:

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

这�将生成一个包含被�编译模板的 filename.js 文件。

额外的资源

教程:

在其他语言中实现:

其他:

支持者

每月的捐款支持我们,并帮助我们继续我们的活动。 称为支持者]

赞助商

成为一个赞助商,并在 Github 的 README 中看到你的标志,链接到你的网站上。 [称为赞助商]

License

MIT

About

pug 模板引擎中文指南

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages