标签：git www forum admin pad one 异常 ever 入参
通过npm：
|
1
2
|
<span style="font-size: 13px;">npm install jade</span> |
可以通过下面命令将jade编译为客户端浏览器兼容的文件：
|
1
2
|
<span style="font-size: 13px;">$ make jade.js</span> |
或者，如果你已经通过npm安装了uglifyjs（npminstalluglify-js），可以通过下面的命令同时创建两个文件：
|
1
2
|
<span style="font-size: 13px;">$ make jade.min.js</span> |
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);
在解析前会将 CRLF 和 CR 转换为 LF.
标记是一行的第一个单词：
|
1
2
|
<span style="font-size: 13px;">html</span> |
会被转换为 <html></html>
标记也可以有id：
|
1
2
|
<span style="font-size: 13px;">div#container</span> |
这将被渲染成<div id=”container”></div>
如何处理类？
|
1
2
|
<span style="font-size: 13px;">div.user-details</span> |
渲染为: <div class=”user-details”></div>
多个class？并且还有id？
|
1
2
|
<span style="font-size: 13px;">div#foo.bar.baz</span> |
渲染为：<div id=”foo” class=”bar baz”></div>
总写div确实很烦人，可以省略之：
|
1
2
3
|
<span style="font-size: 13px;">#foo.bar</span> |
输出： <div id=”foo”></div><div class=”bar”></div>
只需要将文本内容放在标记后面：
|
1
2
|
<span style="font-size: 13px;">p wahoo!</span> |
渲染为 <p>wahoo!</p>.
酷，但是如何处理大段文本呢？
|
1
2
3
4
5
6
|
<span style="font-size: 13px;">p | foo bar baz | rawr rawr | super cool | go jade go</span> |
渲染为 <p>foo bar baz rawr…..</p>
内插法？是的，这两种类型的文本都可以使用内插法，如果我们传入{ locals: { name: ‘一回’, email: ‘xianlihua[at]gmail.com’ }}，可以这样做：
|
1
2
|
<span style="font-size: 13px;">#user #{name} <#{email}></span> |
输出：<div id=”user”>一回 <xianlihua[at]gmail.com></div>
出于某种原因需要输出#{}？转义之：
|
1
2
|
<span style="font-size: 13px;">p \#{CSSer, 关注Javascript技术}</span> |
这样就得到了：<p>#{CSSer, 关注Javascript技术}</p>
也可以使用反转义变量!{html}，下面的代码将输出script标记：
|
1
2
3
|
<span style="font-size: 13px;">- var html = "<script></script>"| !{html}</span> |
包含文本的嵌套标记也可以使用文本块：
|
1
2
3
4
|
<span style="font-size: 13px;">label | Username: input(name=‘user[name]‘)</span> |
或者直接使用标记文本:
|
1
2
3
|
<span style="font-size: 13px;">label Username: input(name=‘user[name]‘)</span> |
只接受纯文本的标记，如script,style,以及textarea不需要开头的|字符，例如：
|
1
2
3
4
5
6
7
8
9
10
|
<span style="font-size: 13px;"> html head title CSSer, 关注Web前端技术 script if (foo) { bar(); } else { baz(); }</span> |
再次作为替代方案，我们可以使用点号’.‘来表示一个文本块，例如：
|
1
2
3
4
5
6
7
|
<span style="font-size: 13px;"> p. foo asdf asdf asdfasdfaf asdf asd.</span> |
输出:
|
1
2
3
4
5
6
7
8
|
<span style="font-size: 13px;"> <p>foo asdf asdf asdfasdfaf asdf asd . </p></span> |
如果点号’.‘与标记之间有空格，Jade解析其会忽略它，将其作为文本处理：
|
1
2
|
<span style="font-size: 13px;">p .</span> |
输出:
|
1
2
|
<span style="font-size: 13px;"><p>.</p></span> |
单行注释当前看起来与Javascript一致，即“//”，单行注释的内容必须放在同一行上：
|
1
2
3
4
|
<span style="font-size: 13px;">// 一些段落p foop bar</span> |
将会输出：
|
1
2
3
4
|
<span style="font-size: 13px;"><!-- 一些段落 --><p>foo</p><p>bar</p></span> |
Jade也支持非缓冲注释，只需增加一个横杠：
|
1
2
3
4
|
<span style="font-size: 13px;">//- 该行注释将不会被输出到解析后的页面中p foop bar</span> |
输出：
|
1
2
3
|
<span style="font-size: 13px;"><p>foo</p><p>bar</p></span> |
块注释会依据缩进进行处理：
|
1
2
3
4
5
|
<span style="font-size: 13px;"> body // #content h1 CSSer,关注Web前端技术</span> |
输出：
|
1
2
3
4
5
6
7
8
|
<span style="font-size: 13px;"><body> <!-- <div id="content"> <h1>CSSer,关注Web前端技术</h1> </div> --></body></span> |
Jade也支持条件注释，例如：
|
1
2
3
4
|
<span style="font-size: 13px;">body /if IE a(href=‘http://www.mozilla.com/en-US/firefox/‘) Get Firefox</span> |
输出:
|
1
2
3
4
5
6
|
<span style="font-size: 13px;"><body> <!--[if IE]> <a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a> <![endif]--></body></span> |
Jade支持通过嵌套来以自然的方式定义标记：
|
1
2
3
4
5
6
7
8
|
<span style="font-size: 13px;">ul li.first a(href=‘#‘) foo li a(href=‘#‘) bar li.last a(href=‘#‘) baz</span> |
块扩展允许创建单行的简洁嵌套标记，下面的示例与上例输出相同：
|
1
2
3
4
5
|
<span style="font-size: 13px;"> ul li.first: a(href=‘#‘) foo li: a(href=‘#‘) bar li.last: a(href=‘#‘) baz</span> |
目前Jade支持’(‘和’)‘的特性定界符。
|
1
2
|
<span style="font-size: 13px;">a(href=‘/login‘, title=‘View login page‘) Login</span> |
另外我们也可以使用冒号（:）来作为分割符：
|
1
2
|
<span style="font-size: 13px;">a(href: ‘/login‘, title: ‘注册成为CSSer.com会员‘) Login</span> |
Boolean特性也被支持：
|
1
2
|
<span style="font-size: 13px;">input(type="checkbox", checked)</span> |
值为变量的Boolean特性只有在值为true时输出：
|
1
2
|
<span style="font-size: 13px;">input(type="checkbox", checked: someValue)</span> |
分拆在多行也能正常解析：
|
1
2
3
4
|
<span style="font-size: 13px;">input(type=‘checkbox‘, name=‘agreement‘, checked)</span> |
利用!!!来增加页面的文档类型：
|
1
2
|
<span style="font-size: 13px;">!!!</span> |
将会输出过渡型文档类型，然而：
|
1
2
|
<span style="font-size: 13px;">!!! 5</span> |
将会输出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">‘
};
要修改默认值只需改变：
|
1
2
|
<span style="font-size: 13px;">jade.doctypes.default = ‘whatever you want‘;</span> |
过滤器以冒号（:）作为前缀，如 :markdown 将会对文本进行函数处理，（一回注：类似Smarty的变量调节器），本页开始处列出了目前Jade支持的过滤器。
|
1
2
3
4
5
|
<span style="font-size: 13px;">body :markdown Woah! jade _and_ markdown, very **cool** we can even link to [CSSer](http://www.csser.com)</span> |
渲染后:
|
1
2
|
<span style="font-size: 13px;"> <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></span> |
过滤器也可以处理解析树，通常过滤器可以正常处理文本块，但是通过传入规则的块过滤器可以做任何它能做的。
|
1
2
3
4
5
6
7
|
<span style="font-size: 13px;">body conditionals: if role == ‘admin‘ p You are amazing else p Not so amazing</span> |
Jade目前支持三种类型的可执行代码，第一种以-为前缀，不会被缓冲：
|
1
2
|
<span style="font-size: 13px;">- var foo = ‘bar‘;</span> |
这可被用于条件或循环：
|
1
2
3
|
<span style="font-size: 13px;">- for (var key in obj) p= obj[key]</span> |
由于Jade的缓冲技术，下面的代码是有效的：
|
1
2
3
4
5
6
7
8
|
<span style="font-size: 13px;">- if (foo) ul li yay li foo li worked- else p oh no! you are not in csser.com</span> |
甚至详细的迭代循环：
|
1
2
3
4
5
6
|
<span style="font-size: 13px;">- if (items.length) ul - items.forEach(function(item){ li= item - })</span> |
任何你希望的都可以实现！
接下来我们转义了缓冲代码，用于缓冲返回值，以等号（=）作为前缀：
|
1
2
3
4
|
<span style="font-size: 13px;">- var foo = ‘bar‘= fooh1= foo</span> |
输出： bar<h1>bar</h1>. 被’=‘缓冲的代码会默认经过转义以增强安全性，要输出为转义的值需要使用 !=：
|
1
2
|
<span style="font-size: 13px;">p!= aVarContainingMoreHTML</span> |
一个允许使用”vanilla”Javascript的例外，是 – each 标记，其表现形式为：
|
1
2
|
<span style="font-size: 13px;">- each VAL[, KEY] in OBJ</span> |
实现循环数组的例子：
|
1
2
3
4
|
<span style="font-size: 13px;">- var items = ["one", "two", "three"]- each item in items li= item</span> |
输出:
|
1
2
3
4
|
<span style="font-size: 13px;"><li>one</li><li>two</li><li>three</li></span> |
循环对象的键和值：
|
1
2
3
4
|
<span style="font-size: 13px;">- var obj = { foo: ‘bar‘ }- each val, key in obj li #{key}: #{val}</span> |
这会输出 <li>foo: bar</li>
也可以进行嵌套循环：
|
1
2
3
4
|
<span style="font-size: 13px;">- each user in users - each role in user.roles li= role</span> |
当一个属性为undefined，Jade会输出空串，例如：
|
1
2
|
<span style="font-size: 13px;">textarea= user.signature</span> |
近期的Jade版本会输出空字符串而不是undefined：
|
1
2
|
<span style="font-size: 13px;"><textarea></textarea></span> |
输出html到标准输出（stdout）：
|
1
2
|
<span style="font-size: 13px;">jade examples/*.jade --pipe</span> |
生成 examples/*.html ：
|
1
2
|
<span style="font-size: 13px;">jade examples/*.jade</span> |
传入参数：
|
1
2
|
<span style="font-size: 13px;">jade examples/layout.jade --options ‘{ locals: { title: "CSSer" }}‘</span> |
标签：git www forum admin pad one 异常 ever 入参
原文地址：http://www.cnblogs.com/zhaolizhe/p/6936903.html
