文章目录
  1. 1. 特性
  2. 2. 例子
  3. 3. 安装和使用
    1. 3.1. 安装
    2. 3.2. 使用
    3. 3.3. 实例
      1. 3.3.1. 编译整个目录
      2. 3.3.2. 生成 {foo,bar}.html
      3. 3.3.3. 在标准IO下使用jade
      4. 3.3.4. foo, bar 目录渲染到 /tmp
  4. 4. 公开的API
  5. 5. 浏览器支持
  6. 6. 参考

Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持。

  • Produces HTML
  • Supports dynamic code
  • Supports reusability (DRY)

特性

  1. 客户端支持
  2. 代码高可读
  3. 灵活的缩进
  4. 块展开
  5. Mixins
  6. 静态包含
  7. 属性改写
  8. 安全,默认代码是转义的
  9. 运行时和编译时上下文错误报告
  10. 命令行下编译jade模板
  11. HTML5 模式 (使用 !!! 5 doctype html 文档类型)
  12. 在内存中缓存(可选)
  13. 合并动态和静态标签类
  14. 可以通过 filters 修改树
  15. 模板继承
  16. 原生支持 Express JS
  17. 通过 each 枚举对象、数组甚至是不能枚举的对象
  18. 块注释
  19. 没有前缀的标签
  20. AST Filters
  21. 过滤器
  22. Emacs Mode
  23. Vim Syntax
  24. TextMate Bundle
  25. Coda/SubEtha syntax Mode
  26. Screencasts
  27. html2jade converter

例子

.jade文件:

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

编译成.html文件:

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

安装和使用

安装

npm install jade -g

使用

jade [options] [dir|file ...]

实例

编译整个目录

jade templates

生成 {foo,bar}.html

jade {foo,bar}.jade

在标准IO下使用jade

jade < my.jade > my.html

foo, bar 目录渲染到 /tmp

jade foo bar --out /tmp

公开的API

var jade = require('jade');

// Compile a function
var fn = jade.compile('string of jade', options);
fn(locals);

详见jade-lang.com/api

浏览器支持

jade --client --no-debug filename.jade

生成filename.js

比如上面的可以生成如下js文件:

function template(locals) {
var buf = [];
var jade_mixins = {};
var jade_interp;
;var locals_for_with = (locals || {});(function (pageTitle, youAreUsingJade) {
buf.push("<!DOCTYPE html><html lang=\"en\"><head><title>" + (jade.escape(null == (jade_interp = pageTitle) ? "" : jade_interp)) + "</title><script type=\"text/javascript\">if (foo) {\n   bar(1 + 5)\n}</script></head><body><h1>Jade - node template engine</h1><div id=\"container\" class=\"col\">");
if ( youAreUsingJade)
{
buf.push("<p>You are amazing</p>");
}
else
{
buf.push("<p>Get on it!</p>");
}
buf.push("<p>Jade is a terse and simple\ntemplating language with a\nstrong focus on performance\nand powerful features.</p></div></body></html>");}("pageTitle" in locals_for_with?locals_for_with.pageTitle:typeof pageTitle!=="undefined"?pageTitle:undefined,"youAreUsingJade" in locals_for_with?locals_for_with.youAreUsingJade:typeof youAreUsingJade!=="undefined"?youAreUsingJade:undefined));;return buf.join("");
}

这样就可以借助runtime.js和生成的js文件在client使用了。

参考

  1. Github-jade
文章目录
  1. 1. 特性
  2. 2. 例子
  3. 3. 安装和使用
    1. 3.1. 安装
    2. 3.2. 使用
    3. 3.3. 实例
      1. 3.3.1. 编译整个目录
      2. 3.3.2. 生成 {foo,bar}.html
      3. 3.3.3. 在标准IO下使用jade
      4. 3.3.4. foo, bar 目录渲染到 /tmp
  4. 4. 公开的API
  5. 5. 浏览器支持
  6. 6. 参考