Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add Chinaese translate #834

Merged
merged 13 commits into from

2 participants

Commits on Dec 6, 2012
  1. 翻译一点点

    胡伯 authored
  2. @jserme

    再翻

    jserme authored
  3. @jserme

    特性部分

    jserme authored
Commits on Dec 7, 2012
  1. @jserme

    中文翻译单独放

    jserme authored
Commits on Dec 9, 2012
  1. @jserme

    翻译一部分

    jserme authored
  2. @jserme

    到过滤器翻译完毕

    jserme authored
  3. @jserme

    i

    jserme authored
Commits on Dec 10, 2012
  1. @jserme

    头晕,翻译一点点

    jserme authored
Commits on Dec 11, 2012
  1. @jserme

    接受大鸟的建议

    jserme authored
  2. @jserme

    初稿,翻译完

    jserme authored
  3. @jserme

    联系

    jserme authored
  4. @jserme

    样式

    jserme authored
  5. @jserme

    反馈地址

    jserme authored
This page is out of date. Refresh to see the latest.
Showing with 921 additions and 0 deletions.
  1. +921 −0 Readme_zh-cn.md
View
921 Readme_zh-cn.md
@@ -0,0 +1,921 @@
+# Jade - 模板引擎
+
+ Jade 是一个高性能的模板引擎,它深受[Haml](http://haml-lang.com)影响,它是用javascript实现的,并且可以供[node](http://nodejs.org)使用.
+
+ 翻译:[草依山](http://jser.me)   [翻译反馈](http://weibo.com/1826461472/z9jriDdmB#pl_profile_nav)  [Fork me](https://github.com/jserme/jade/)
+
+## 特性
+
+ - 客户端支持
+ - 代码高可读
+ - 灵活的缩进
+ - 块展开
+ - 混合
+ - 静态包含
+ - 属性改写
+ - 安全,默认代码是转义的
+ - 运行时和编译时上下文错误报告
+ - 命令行下编译jade模板
+ - html 5 模式 (使用 _!!! 5_ 文档类型)
+ - 在内存中缓存(可选)
+ - 合并动态和静态标签类
+ - 可以通过 _filters_ 修改树
+ - 模板继承
+ - 原生支持 [Express JS](http://expressjs.com)
+ - 通过 `each` 枚举对象、数组甚至是不能枚举的对象
+ - 块注释
+ - 没有前缀的标签
+ - AST filters
+ - 过滤器
+ - :sass 必须已经安装[sass.js](http://github.com/visionmedia/sass.js)
+ - :less 必须已经安装[less.js](http://github.com/cloudhead/less.js)
+ - :markdown 必须已经安装[markdown-js](http://github.com/evilstreak/markdown-js) 或者[node-discount](http://github.com/visionmedia/node-discount)
+ - :cdata
+ - :coffeescript 必须已经安装[coffee-script](http://jashkenas.github.com/coffee-script/)
+ - [Vim Syntax](https://github.com/digitaltoad/vim-jade)
+ - [TextMate Bundle](http://github.com/miksago/jade-tmbundle)
+ - [Screencasts](http://tjholowaychuk.com/post/1004255394/jade-screencast-template-engine-for-nodejs)
+ - [html2jade](https://github.com/donpark/html2jade) 转换器
+
+## 其它实现
+
+ - [php](http://github.com/everzet/jade.php)
+ - [scala](http://scalate.fusesource.org/versions/snapshot/documentation/scaml-reference.html)
+ - [ruby](http://github.com/stonean/slim)
+
+## 安装
+
+通过 npm:
+
+ npm install jade
+
+## 浏览器支持
+
+ 把jade编译为一个可供浏览器使用的单文件,只需要简单的执行:
+
+ $ make jade.js
+
+ 如果你已经安装了uglifyjs (`npm install uglify-js`),你可以执行下面的命令它会生成所有的文件。其实每一个正式版本里都帮你做了这事。
+
+ $ make jade.min.js
+
+ 默认情况下,为了方便调试Jade会把模板组织成带有形如 `__.lineno = 3` 的行号的形式。
+ 在浏览器里使用的时候,你可以通过传递一个选项`{ compileDebug: false }`来去掉这个。
+ 下面的模板
+
+ p Hello #{name}
+
+ 会被翻译成下面的函数:
+
+```js
+function anonymous(locals, attrs, escape, rethrow) {
+ var buf = [];
+ with (locals || {}) {
+ var interp;
+ buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>');
+ }
+ return buf.join("");
+}
+```
+
+ 通过使用Jade的 `./runtime.js`你可以在浏览器使用这些预编译的模板而不需要使用Jade, 你只需要使用runtime.js里的工具函数, 它们会放在`jade.attrs`, `jade.escape` 这些里。 把选项 `{ client: true }` 传递给 `jade.compile()`, Jade 会把这些帮助函数的引用放在`jade.attrs`, `jade.escape`.
+
+```js
+function anonymous(locals, attrs, escape, rethrow) {
+ var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow;
+ var buf = [];
+ with (locals || {}) {
+ var interp;
+ buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>');
+ }
+ return buf.join("");
+}
+```
+
+## 公开API
+
+```javascript
+ var jade = require('jade');
+
+ // Compile a function
+ var fn = jade.compile('string of jade', options);
+ fn(locals);
+```
+
+### 选项
+
+ - `self` 使用`self` 命名空间来持有本地变量. _默认为false_
+ - `locals` 本地变量对象
+ - `filename` 异常发生时使用,includes时必需
+ - `debug` 输出token和翻译后的函数体
+ - `compiler` 替换掉jade默认的编译器
+ - `compileDebug` `false`的时候调试的结构不会被输出
+
+## 语法
+
+### 行结束标志
+
+**CRLF****CR** 会在编译之前被转换为 **LF**
+
+### 标签
+
+标签就是一个简单的单词:
+
+ html
+
+它会被转换为 `<html></html>`
+
+标签也是可以有id的:
+
+ div#container
+
+它会被转换为 `<div id="container"></div>`
+
+怎么加类呢?
+
+ div.user-details
+
+转换为 `<div class="user-details"></div>`
+
+多个类? 和id? 也是可以搞定的:
+
+ div#foo.bar.baz
+
+转换为 `<div id="foo" class="bar baz"></div>`
+
+不停的div 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>`
+
+怎么和数据结合起来? 所有类型的文本展示都可以和数据结合起来,如果我们把`{ name: 'tj', email: 'tj@vision-media.ca' }` 传给编译函数,下面是模板上的写法:
+
+ #user #{name} &lt;#{email}&gt;
+
+它会被渲染为 `<div id="user">tj &lt;tj@vision-media.ca&gt;</div>`
+
+当就是要输出`#{}` 的时候怎么办? 转义一下!
+
+ p \#{something}
+
+它会输出`<p>#{something}</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 Example
+ 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>
+
+
+需要注意的是广西块需要两次转义。比如想要输出下面的文本:
+
+ </p>foo\bar</p>
+
+使用:
+
+ p.
+ foo\\bar
+
+### 注释
+
+单行注释和JavaScript里是一样的,通过"//"来开始,并且必须单独一行:
+
+ // just some paragraphs
+ p foo
+ p bar
+
+渲染为:
+
+ <!-- just some paragraphs -->
+ <p>foo</p>
+ <p>bar</p>
+
+Jade 同样支持不输出的注释,加一个短横线就行了:
+
+ //- will not output within markup
+ p foo
+ p bar
+
+渲染为:
+
+ <p>foo</p>
+ <p>bar</p>
+
+### 块注释
+
+ 块注释也是支持的:
+
+ body
+ //
+ #content
+ h1 Example
+
+渲染为:
+
+ <body>
+ <!--
+ <div id="content">
+ <h1>Example</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
+
+当一个值是 `undefined` 或者 `null` 属性_不_会被加上,
+所以呢,它不会编译出 'something="null"'.
+
+ div(something=null)
+
+Boolean 属性也是支持的:
+
+ input(type="checkbox", checked)
+
+使用代码的Boolean 属性只有当属性为`true`时才会输出:
+
+ input(type="checkbox", checked=someValue)
+
+多行同样也是可用的:
+
+ input(type='checkbox',
+ name='agreement',
+ checked)
+
+多行的时候可以不加逗号:
+
+ input(type='checkbox'
+ name='agreement'
+ checked)
+
+加点空格,格式好看一点?同样支持
+
+ input(
+ type='checkbox'
+ name='agreement'
+ checked)
+
+冒号也是支持的:
+
+ rss(xmlns:atom="atom")
+
+假如我有一个`user` 对象 `{ id: 12, name: 'tobi' }`
+我们希望创建一个指向"/user/12"的链接 `href`, 我们可以使用普通的javascript字符串连接,如下:
+
+ a(href='/user/' + user.id)= user.name
+
+或者我们使用jade的修改方式,这个我想很多使用Ruby或者 CoffeeScript的人会看起来像普通的js..:
+
+ a(href='/user/#{user.id}')= user.name
+
+`class`属性是一个特殊的属性,你可以直接传递一个数组,比如`bodyClasses = ['user', 'authenticated']` :
+
+ body(class=bodyClasses)
+
+### HTML
+
+ 内联的html是可以的,我们可以使用管道定义一段文本 :
+
+```
+html
+ body
+ | <h1>Title</h1>
+ | <p>foo bar baz</p>
+```
+
+ 或者我们可以使用`.` 来告诉Jade我们需要一段文本:
+
+```
+html
+ body.
+ <h1>Title</h1>
+ <p>foo bar baz</p>
+```
+
+ 上面的两个例子都会渲染成相同的结果:
+
+```
+<html><body><h1>Title</h1>
+<p>foo bar baz</p>
+</body></html>
+```
+
+ 这条规则适应于在jade里的任何文本:
+
+```
+html
+ body
+ h1 User <em>#{name}</em>
+```
+
+### Doctypes
+
+添加文档类型只需要简单的使用 `!!!`, 或者 `doctype` 跟上下面的可选项:
+
+ !!!
+
+会渲染出 _transitional_ 文档类型, 或者:
+
+ !!! 5
+
+or
+
+ !!! html
+
+or
+
+ doctype html
+
+doctypes 是大小写不敏感的, 所以下面两个是一样的:
+
+ doctype Basic
+ doctype basic
+
+当然也是可以直接传递一段文档类型的文本:
+
+ doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN
+
+渲染后:
+
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN>
+
+会输出 _html 5_ 文档类型. 下面的默认的文档类型,可以很简单的扩展:
+
+```javascript
+ 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">'
+ };
+```
+
+通过下面的代码可以很简单的改变默认的文档类型:
+
+```javascript
+ jade.doctypes.default = 'whatever you want';
+```
+
+## 过滤器
+
+过滤器前缀 `:`, 比如 `:markdown` 会把下面块里的文本交给专门的函数进行处理。查看顶部 _特性_ 里有哪些可用的过滤器。
+
+ body
+ :markdown
+ Woah! jade _and_ markdown, very **cool**
+ we can even link to [stuff](http://google.com)
+
+渲染为:
+
+ <body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://google.com">stuff</a></p></body>
+
+## 代码
+
+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! didnt work
+
+哈哈,甚至是很长的循环也是可以的:
+
+ - if (items.length)
+ ul
+ - items.forEach(function(item){
+ li= item
+ - })
+
+所以你想要的!
+
+下一步我们要_转义_输出的代码,比如我们返回一个值,只要前缀一个`=`
+
+ - var foo = 'bar'
+ = foo
+ h1= foo
+
+它会渲染为`bar<h1>bar</h1>`. 为了安全起见,使用`=`输出的代码默认是转义的,如果想直接输出不转义的值可以使用`!=`
+
+ p!= aVarContainingMoreHTML
+
+Jade 同样是设计师友好的,它可以使javascript更直接更富表现力。比如下面的赋值语句是相等的,同时表达式还是通常的javascript:
+
+ - var foo = 'foo ' + 'bar'
+ foo = 'foo ' + 'bar'
+
+Jade会把 `if`, `else if`, `else`, `until`, `while`, `unless`同别的优先对待, 但是你得记住它们还是普通的javascript:
+
+ if foo == 'bar'
+ ul
+ li yay
+ li foo
+ li worked
+ else
+ p oh no! didnt work
+
+## 循环
+
+尽管已经支持JavaScript原生代码,Jade还是支持了一些特殊的标签,它们可以让模板更加易于理解,其中之一就是`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>
+
+遍历一个数组同时带上索引:
+
+ items = ["one", "two", "three"]
+ each item, i in items
+ li #{item}: #{i}
+
+渲染为:
+
+ <li>one: 0</li>
+ <li>two: 1</li>
+ <li>three: 2</li>
+
+遍历一个数组的键值:
+
+ obj = { foo: 'bar' }
+ each val, key in obj
+ li #{key}: #{val}
+
+将会渲染为:`<li>foo: bar</li>`
+
+Jade在内部会把这些语句转换成原生的JavaScript语句,就像使用 `users.forEach(function(user){`,
+词法作用域和嵌套会像在普通的JavaScript中一样:
+
+ each user in users
+ each role in user.roles
+ li= role
+
+如果你喜欢,也可以使用`for`
+
+ for user in users
+ for role in user.roles
+ li= role
+
+## 条件语句
+
+Jade 条件语句和使用了(`-`) 前缀的JavaScript语句是一致的,然后它允许你不使用圆括号,这样会看上去对设计师更友好一点,
+同时要在心里记住这个表达式渲染出的是_常规_Javascript:
+
+ for user in users
+ if user.role == 'admin'
+ p #{user.name} is an admin
+ else
+ p= user.name
+
+和下面的使用了常规JavaScript的代码是相等的:
+
+ for user in users
+ - if (user.role == 'admin')
+ p #{user.name} is an admin
+ - else
+ p= user.name
+
+Jade 同时支持`unless`, 这和`if (!(expr))`是等价的:
+
+ for user in users
+ unless user.isAnonymous
+ p
+ | Click to view
+ a(href='/users/' + user.id)= user.name
+
+## 模板继承
+
+ Jade 支持通过 `block` 和 `extends` 关键字来实现模板继承。 一个块就是一个Jade的"block" ,它将在子模板中实现,同时是支持递归的。
+
+ Jade 块如果没有内容,Jade会添加默认内容,下面的代码默认会输出`block scripts`, `block content`, 和 `block foot`.
+
+```
+html
+ head
+ h1 My Site - #{title}
+ block scripts
+ script(src='/jquery.js')
+ body
+ block content
+ block foot
+ #footer
+ p some footer content
+```
+
+ 现在我们来继承这个布局,简单创建一个新文件,像下面那样直接使用`extends`,给定路径(可以选择带.jade扩展名或者不带). 你可以定义一个或者更多的块来覆盖父级块内容, 注意到这里的`foot`块_没有_定义,所以它还会输出父级的"some footer content"。
+
+```
+extends extend-layout
+
+block scripts
+ script(src='/jquery.js')
+ script(src='/pets.js')
+
+block content
+ h1= title
+ each pet in pets
+ include pet
+```
+
+ 同样可以在一个子块里添加块,就像下面实现的块`content`里又定义了两个可以被实现的块`sidebar`和`primary`,或者子模板直接实现`content`。
+
+```
+extends regular-layout
+
+block content
+ .sidebar
+ block sidebar
+ p nothing
+ .primary
+ block primary
+ p nothing
+```
+
+## 包含
+
+ Includes 允许你静态包含一段Jade, 或者别的存放在单个文件中的东西比如css, html。 非常常见的例子是包含头部和页脚。 假设我们有一个下面目录结构的文件夹:
+
+ ./layout.jade
+ ./includes/
+ ./head.jade
+ ./tail.jade
+
+下面是 _layout.jade_ 的内容:
+
+ html
+ include includes/head
+ body
+ h1 My Site
+ p Welcome to my super amazing site.
+ include includes/foot
+
+这两个包含 _includes/head__includes/foot_ 都会读取相对于给 _layout.jade_ 参数`filename` 的路径的文件, 这是一个绝对路径,不用担心Express帮你搞定这些了。Include 会解析这些文件,并且插入到已经生成的语法树中,然后渲染为你期待的内容:
+
+```html
+<html>
+ <head>
+ <title>My Site</title>
+ <script src="/javascripts/jquery.js">
+ </script><script src="/javascripts/app.js"></script>
+ </head>
+ <body>
+ <h1>My Site</h1>
+ <p>Welcome to my super lame site.</p>
+ <div id="footer">
+ <p>Copyright>(c) foobar</p>
+ </div>
+ </body>
+</html>
+```
+
+ 前面已经提到,`include` 可以包含比如html或者css这样的内容。给定一个扩展名后,Jade不会把这个文件当作一个Jade源代码,并且会把它当作一个普通文本包含进来:
+
+```
+html
+ body
+ include content.html
+```
+
+ Include 也可以接受块内容,给定的块将会附加到包含文件 _最后_ 的块里。 举个例子,`head.jade` 包含下面的内容:
+
+
+ ```
+head
+ script(src='/jquery.js')
+```
+
+ 我们可以像下面给`include head`添加内容, 这里是添加两个脚本.
+
+```
+html
+ include head
+ script(src='/foo.js')
+ script(src='/bar.js')
+ body
+ h1 test
+```
+
+
+## Mixins
+
+ Mixins在编译的模板里会被Jade转换为普通的JavaScript函数。 Mixins 可以还参数,但不是必需的:
+
+ mixin list
+ ul
+ li foo
+ li bar
+ li baz
+
+ 使用不带参数的mixin看上去非常简单,在一个块外:
+
+ h2 Groceries
+ mixin list
+
+ Mixins 也可以带一个或者多个参数,参数就是普通的javascripts表达式,比如下面的例子:
+
+ mixin pets(pets)
+ ul.pets
+ - each pet in pets
+ li= pet
+
+ mixin profile(user)
+ .user
+ h2= user.name
+ mixin pets(user.pets)
+
+ 会输出像下面的html:
+
+```html
+<div class="user">
+ <h2>tj</h2>
+ <ul class="pets">
+ <li>tobi</li>
+ <li>loki</li>
+ <li>jane</li>
+ <li>manny</li>
+ </ul>
+</div>
+```
+
+## 产生输出
+
+ 假设我们有下面的Jade源码:
+
+```
+- var title = 'yay'
+h1.title #{title}
+p Just an example
+```
+
+ 当 `compileDebug` 选项不是`false`, Jade 会编译时会把函数里加上 `__.lineno = n;`, 这个参数会在编译出错时传递给`rethrow()`, 而这个函数会在Jade初始输出时给出一个有用的错误信息。
+
+```js
+function anonymous(locals) {
+ var __ = { lineno: 1, input: "- var title = 'yay'\nh1.title #{title}\np Just an example", filename: "testing/test.js" };
+ var rethrow = jade.rethrow;
+ try {
+ var attrs = jade.attrs, escape = jade.escape;
+ var buf = [];
+ with (locals || {}) {
+ var interp;
+ __.lineno = 1;
+ var title = 'yay'
+ __.lineno = 2;
+ buf.push('<h1');
+ buf.push(attrs({ "class": ('title') }));
+ buf.push('>');
+ buf.push('' + escape((interp = title) == null ? '' : interp) + '');
+ buf.push('</h1>');
+ __.lineno = 3;
+ buf.push('<p>');
+ buf.push('Just an example');
+ buf.push('</p>');
+ }
+ return buf.join("");
+ } catch (err) {
+ rethrow(err, __.input, __.filename, __.lineno);
+ }
+}
+```
+
+当`compileDebug` 参数是`false`, 这个参数会被去掉,这样对于轻量级的浏览器端模板是非常有用的。结合Jade的参数和当前源码库里的 `./runtime.js` 文件,你可以通过toString()来编译模板而不需要在浏览器端运行整个Jade库,这样可以提高性能,也可以减少载入的JavaScript数量。
+
+```js
+function anonymous(locals) {
+ var attrs = jade.attrs, escape = jade.escape;
+ var buf = [];
+ with (locals || {}) {
+ var interp;
+ var title = 'yay'
+ buf.push('<h1');
+ buf.push(attrs({ "class": ('title') }));
+ buf.push('>');
+ buf.push('' + escape((interp = title) == null ? '' : interp) + '');
+ buf.push('</h1>');
+ buf.push('<p>');
+ buf.push('Just an example');
+ buf.push('</p>');
+ }
+ return buf.join("");
+}
+```
+
+## Makefile的一个例子
+
+ 通过执行`make`, 下面的Makefile例子可以把 _pages/*.jade_ 编译为 _pages/*.html_
+
+```make
+JADE = $(shell find pages/*.jade)
+HTML = $(JADE:.jade=.html)
+
+all: $(HTML)
+
+%.html: %.jade
+ jade < $< --path $< > $@
+
+clean:
+ rm -f $(HTML)
+
+.PHONY: clean
+```
+
+这个可以和`watch(1)` 命令起来产生像下面的行为:
+
+ $ watch make
+
+## 命令行的jade(1)
+
+```
+
+使用: jade [options] [dir|file ...]
+
+选项:
+
+ -h, --help 输出帮助信息
+ -v, --version 输出版本号
+ -o, --obj <str> javascript选项
+ -O, --out <dir> 输出编译后的html到<dir>
+ -p, --path <path> 在处理stdio时,查找包含文件时的查找路径
+
+Examples:
+
+ # 编译整个目录
+ $ jade templates
+
+ # 生成 {foo,bar}.html
+ $ jade {foo,bar}.jade
+
+ # 在标准IO下使用jade
+ $ jade < my.jade > my.html
+
+ # 在标准IO下使用jade, 同时指定用于查找包含的文件
+ $ jade < my.jade -p my.jade > my.html
+
+ # 在标准IO下使用jade
+ $ echo "h1 Jade!" | jade
+
+ # foo, bar 目录渲染到 /tmp
+ $ jade foo bar --out /tmp
+
+```
+
+## License
+
+(The MIT License)
+
+Copyright (c) 2009-2010 TJ Holowaychuk &lt;tj@vision-media.ca&gt;
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Something went wrong with that request. Please try again.