jade玉石入门


备注

Pug (以前称为jade)是一个受Haml影响很大的高性能模板引擎,用Node.js和浏览器的JavaScript实现。

  1. 生成HTML
  2. 支持动态代码
  3. 支持可重用性(DRY)

主页

GitHub上的存储库

版本

发布日期
0.0.2 2010-07-03
1.0.0 2013年12月22日
1.11.0 2015年6月12日

安装或设置

在开始使用Pug进行编码之前,您需要有一些先决条件。

您需要安装:

安装NodeJS后,您可以在终端中检查正确的安装:

$ node -v
 

如果成功,它将打印Node的版本号。

要将Pug安装到您的项目中,首选且简单的方法是通过NPM(节点包管理器)。如果您熟悉它,只需在终端中执行以下代码:

$ npm install pug
 

如果要全局安装,可以键入:

$ npm install pug-cli -g
 

并运行

$ pug --help
 

句法

Pug(旧名称是Jade)是一种用于编写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>
 

以下是将Pug呈现为HTML代码的规则:

  1. 通过缩进文本,将构建HTML树。缩进可以与空格或制表符一起使用。这不能混!
  2. HTML标记是在没有<> 情况下编写的。属性是圆括号之间的位置。
  3. 可以使用//<!-- --> 。带有//- 注释在呈现的HTML中不可见。
  4. 使用#{ } 将生成提供的模型: #{header} #{user.username}
  5. 没有大括号的# (hashtag)将使用文本作为ID创建div 元素。示例#myID 将呈现为<div id="myID"></div>
  6. 有了. (point)将使用class属性生成div 。示例: .myClass 将呈现为<div class="myClass"></div>
  7. 使用= (等号后跟空格),将检索变量。 Exaple: h1= title
  8. A != (不等于)在没有转义的情况下检索变量。
  9. A - (连字符)允许您编写JavaScript。示例: - console.log("foo");
  10. 链接到外部文件可以如下: script(src="/js/chat.js")
  11. 内联脚本可以使用此script.
  12. 添加基本​​布局的指令: extends ../layout
  13. layout.pug 发生使用block content 插入
  14. 部分的使用可以有两种方式:
    1. by partial: != partial(template file name/options)
    2. 通过包括: include ../includes/footer
  15. include的倒数是extend 。这允许从页面“html block 部件”发送到布局页面,例如: extend layout
  16. 连接发生在+ (加号)或## 标签)字符处。该加号用于JavaScript代码。 HTML中的#标签并呈现内容:`p名称为:#{myName}

使用与Node.js的哈巴狗

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));
 

选项

  • filename用于例外,在使用includes时需要
  • compileDebug如果为false,则不编译调试工具
  • 相当添加漂移缩进空格输出(默认为false)