博客

Jade模板引擎入门教程

  • Post author:
  • Post category:其他





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




功能


  • 客户端支持

  • 超强的可读性

  • 灵活易用的缩进

  • 块扩展

  • 代码默认经过编码处理以增强安全性

  • 编译及运行时的上下文错误报告

  • 命令行编译支持

  • HTML5模式（使用!!!5文档类型）

  • 可选的内存缓存

  • 联合动态和静态标记类

  • 利用过滤器解析树的处理

  • 支持


    Express JS

  • 利用each透明的循环objects,arrays甚至不可枚举对象

  • 块注释

  • 不需要标记前缀

  • AST过滤器

  • 过滤器


  • Vim语法文件

  • TextMate包

  • Screencasts


其它语言实现


安装


通过npm：
 

npm install jade


浏览器支持


可以通过下面命令将jade编译为客户端浏览器兼容的文件：
 

$ make jade.js


或者，如果你已经通过npm安装了uglifyjs（npminstalluglify-js），可以通过下面的命令同时创建两个文件：
 

$ make jade.min.js


公开API

var jade = require('jade');

// 渲染字符串
jade.render('.csser.com 字符串', { options: 'here' });

// 渲染文件
jade.renderFile('path/to/csser.com.jade', { options: 'here' }, function(err, html){
   // 这里的options是可选的
   // 回调函数可以作为第二个参数
});

// 编译一个函数
var fn = jade.compile('string of jade', options);
fn.call(scope, locals);


Options


  • 执行作用域（this）


    scope

  • 本地变量对象


    locals

  • 处理异常及缓存时使用


    filename

  • 通过文件名将Javascript缓存在内存中


    cache

  • 输出生成的标记和函数体


    debug

  • 替换jade默认编译引擎


    compiler


语法


行尾


在解析前会将 CRLF 和 CR 转换为 LF.


标记


标记是一行的第一个单词：
 

html


会被转换为 <html></html>


标记也可以有id：
 

div#container


这将被渲染成<div id=”container”></div>


如何处理类？
 

div.user-details


渲染为: <div class=”user-details”></div>


多个class？并且还有id？
 

div#foo.bar.baz


渲染为：<div id=”foo” class=”bar baz”></div>


总写div确实很烦人，可以省略之：
 

#foo
.bar


输出： <div id=”foo”></div><div class=”bar”></div>


标记文本


只需要将文本内容放在标记后面：
 

p wahoo!


渲染为 <p>wahoo!</p>.


酷，但是如何处理大段文本呢？
 

p
  | foo bar baz
  | rawr rawr
  | super cool
  | go jade go


渲染为 <p>foo bar baz rawr…..</p>


内插法？是的，这两种类型的文本都可以使用内插法，如果我们传入{ locals: { name: ‘一回’, email: ‘xianlihua[at]gmail.com’ }}，可以这样做：
 

#user #{name} &lt;#{email}&gt;


输出：<div id=”user”>一回 &lt;xianlihua[at]gmail.com&gt;</div>


出于某种原因需要输出#{}？转义之：
 

p \#{CSSer, 关注Javascript技术}


这样就得到了：<p>#{CSSer, 关注Javascript技术}</p>


也可以使用反转义变量!{html}，下面的代码将输出script标记：
 

- var html = "<script></script>"
| !{html}


包含文本的嵌套标记也可以使用文本块：
 

label
  | Username:
  input(name='user[name]')


或者直接使用标记文本:
 

label Username:
  input(name='user[name]')


只接受纯文本的标记，如script,style,以及textarea不需要开头的|字符，例如：
 

  html
    head
      title CSSer, 关注Web前端技术
      script
        if (foo) {
          bar();
        } else {
          baz();
        }


再次作为替代方案，我们可以使用点号’.’来表示一个文本块，例如：
 

  p.
    foo asdf
    asdf
     asdfasdfaf
     asdf
    asd.


输出:
 

    <p>foo asdf
    asdf
      asdfasdfaf
      asdf
    asd
    .
    </p>


如果点号’.’与标记之间有空格，Jade解析其会忽略它，将其作为文本处理：
 

p .


输出:
 

<p>.</p>


注释


单行注释当前看起来与Javascript一致，即“//”，单行注释的内容必须放在同一行上：
 

// 一些段落
p foo
p bar


将会输出：
 

<!-- 一些段落 -->
<p>foo</p>
<p>bar</p>


Jade也支持非缓冲注释，只需增加一个横杠：
 

//- 该行注释将不会被输出到解析后的页面中
p foo
p bar


输出：
 

<p>foo</p>
<p>bar</p>


块注释


块注释会依据缩进进行处理：
 

  body
    //
      #content
        h1 CSSer,关注Web前端技术


输出：
 

<body>
  <!--
  <div id="content">
    <h1>CSSer,关注Web前端技术</h1>
  </div>
  -->
</body>


Jade也支持条件注释，例如：
 

body
  /if IE
    a(href='http://www.mozilla.com/en-US/firefox/') Get Firefox


输出:
 

<body>
  <!--[if IE]>
    <a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a>
  <![endif]-->
</body>


嵌套


Jade支持通过嵌套来以自然的方式定义标记：
 

ul
  li.first
    a(href='#') foo
  li
    a(href='#') bar
  li.last
    a(href='#') baz


块扩展


块扩展允许创建单行的简洁嵌套标记，下面的示例与上例输出相同：
 

  ul
    li.first: a(href='#') foo
    li: a(href='#') bar
    li.last: a(href='#') baz


特性


目前Jade支持’(‘和’)’的特性定界符。
 

a(href='/login', title='View login page') Login


另外我们也可以使用冒号（:）来作为分割符：
 

a(href: '/login', title: '注册成为CSSer.com会员') Login


Boolean特性也被支持：
 

input(type="checkbox", checked)


值为变量的Boolean特性只有在值为true时输出：
 

input(type="checkbox", checked: someValue)


分拆在多行也能正常解析：
 

input(type='checkbox',
  name='agreement',
  checked)


文档类型


利用!!!来增加页面的文档类型：
 

!!!


将会输出过渡型文档类型，然而：
 

!!! 5


将会输出HTML5的文档类型，下面是默认定义的文档类型，这也可以很容易的被扩展：
 

var doctypes = exports.doctypes = {
   '5': '<!DOCTYPE html>',
   'xml': '<?xml version="1.0" encoding="utf-8" ?>',
   'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
   'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
   'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
   'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
   '1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
   'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
   'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};


要修改默认值只需改变：
 

jade.doctypes.default = 'whatever you want';


过滤器


过滤器以冒号（:）作为前缀，如 :markdown 将会对文本进行函数处理，（一回注：类似Smarty的变量调节器），本页开始处列出了目前Jade支持的过滤器。
 

body
  :markdown
    Woah! jade _and_ markdown, very **cool**
    we can even link to [CSSer](http://www.csser.com)


渲染后:
 

   <body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://www.csser.com">CSSer</a></p></body>


过滤器也可以处理解析树，通常过滤器可以正常处理文本块，但是通过传入规则的块过滤器可以做任何它能做的。
 

body
  conditionals:
    if role == 'admin'
      p You are amazing
    else
      p Not so amazing


代码


Jade目前支持三种类型的可执行代码，第一种以-为前缀，不会被缓冲：
 

- var foo = 'bar';


这可被用于条件或循环：
 

- for (var key in obj)
  p= obj[key]


由于Jade的缓冲技术，下面的代码是有效的：
 

- if (foo)
  ul
    li yay
    li foo
    li worked
- else
  p oh no! you are not in csser.com


甚至详细的迭代循环：
 

- if (items.length)
  ul
    - items.forEach(function(item){
      li= item
    - })


任何你希望的都可以实现！


接下来我们转义了缓冲代码，用于缓冲返回值，以等号（=）作为前缀：
 

- var foo = 'bar'
= foo
h1= foo


输出： bar<h1>bar</h1>. 被’=’缓冲的代码会默认经过转义以增强安全性，要输出为转义的值需要使用 !=：
 

p!= aVarContainingMoreHTML


一个允许使用”vanilla”Javascript的例外，是 – each 标记，其表现形式为：
 

- each VAL[, KEY] in OBJ


实现循环数组的例子：
 

- var items = ["one", "two", "three"]
- each item in items
  li= item


输出:
 

<li>one</li>
<li>two</li>
<li>three</li>


循环对象的键和值：
 

- var obj = { foo: 'bar' }
- each val, key in obj
  li #{key}: #{val}


这会输出 <li>foo: bar</li>


也可以进行嵌套循环：
 

- each user in users
  - each role in user.roles
    li= role


当一个属性为undefined，Jade会输出空串，例如：
 

textarea= user.signature


近期的Jade版本会输出空字符串而不是undefined：
 

<textarea></textarea>


命令行工具：bin/jade


输出html到标准输出（stdout）：
 

jade examples/*.jade --pipe


生成 examples/*.html ：
 

jade examples/*.jade


传入参数：
 

jade examples/layout.jade --options '{ locals: { title: "CSSer" }}'

转载于:https://www.cnblogs.com/fullhouse/archive/2011/07/18/2109945.html