Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

jade

Package Overview
Dependencies
Maintainers
2
Versions
131
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jade - npm Package Compare versions

Comparing version 0.31.2 to 0.32.0

2

component.json

@@ -5,3 +5,3 @@ {

"description": "Jade template runtime",
"version": "0.31.2",
"version": "0.32.0",
"keywords": [

@@ -8,0 +8,0 @@ "template"

35

lib/compiler.js

@@ -18,2 +18,4 @@ /*!

, parseJSExpression = require('character-parser').parseMax
, isConstant = require('constantinople')
, toConstant = require('constantinople').toConstant

@@ -139,2 +141,5 @@

bufferExpression: function (src) {
if (isConstant(src)) {
return this.buffer(toConstant(src), false)
}
if (this.lastBufferedIdx == this.buf.length) {

@@ -600,4 +605,3 @@ if (this.lastBufferedType === 'text') this.lastBuffered += '"';

} else if (val.constant) {
eval('var buf={' + val.buf + '};');
this.buffer(runtime.attrs(buf, JSON.parse(val.escaped)));
this.buffer(runtime.attrs(toConstant('{' + val.buf + '}'), JSON.parse(val.escaped)));
} else {

@@ -643,27 +647,2 @@ this.bufferExpression("jade.attrs({ " + val.buf + " }, " + val.escaped + ")");

}
};
/**
* Check if expression can be evaluated to a constant
*
* @param {String} expression
* @return {Boolean}
* @api private
*/
function isConstant(val){
// Check strings/literals
if (/^ *("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)'|true|false|null|undefined) *$/i.test(val))
return true;
// Check numbers
if (!isNaN(Number(val)))
return true;
// Check arrays
var matches;
if (matches = /^ *\[(.*)\] *$/.exec(val))
return matches[1].split(',').every(isConstant);
return false;
}
};

6

lib/jade.js

@@ -19,8 +19,2 @@ /*!

/**
* Library version.
*/
exports.version = '0.30.0';
/**
* Expose self closing tags.

@@ -27,0 +21,0 @@ */

3

lib/parser.js

@@ -401,3 +401,3 @@ /*!

if (path[0] === '/' && !this.options.basedir)
if (path[0] === '/' && !this.options.basedir)
throw new Error('the "basedir" option is required to use "' + purpose + '" with "absolute" paths');

@@ -701,2 +701,3 @@

if (!dot) {
console.warn(this.filename + ', line ' + this.peek().line + ':')
console.warn('Implicit textOnly for `script` and `style` is deprecated. Use `script.` or `style.` instead.');

@@ -703,0 +704,0 @@ }

13

package.json
{
"name": "jade",
"description": "Jade template engine",
"version": "0.31.2",
"version": "0.32.0",
"author": "TJ Holowaychuk <tj@vision-media.ca>",

@@ -13,3 +13,3 @@ "repository": "git://github.com/visionmedia/jade",

"dependencies": {
"commander": "1.1.1",
"commander": "1.2.0",
"mkdirp": "0.3.x",

@@ -19,3 +19,4 @@ "transformers": "2.0.1",

"monocle": "0.1.48",
"with": "1.0.4"
"with": "~1.1.0",
"constantinople": "~1.0.1"
},

@@ -32,3 +33,3 @@ "devDependencies": {

"browserify": "*",
"win-spawn": "*"
"linify": "*"
},

@@ -42,3 +43,3 @@ "component": {

"test": "mocha -R spec",
"prepublish": "npm prune && cd bin && win-line-endings && cd ..",
"prepublish": "npm prune && linify transform bin",
"build": "npm run compile",

@@ -52,2 +53,2 @@ "compile": "npm run compile-full && npm run compile-runtime",

}
}
}

1019

Readme_zh-cn.md
# Jade - 模板引擎
Jade 是一个高性能的模板引擎，它深受[Haml](http://haml-lang.com)影响，它是用javascript实现的,并且可以供[node](http://nodejs.org)使用.
Jade 是一个高性能的模板引擎，它深受 [Haml](http://haml-lang.com) 影响，它是用 JavaScript 实现的, 并且可以供 [Node](http://nodejs.org) 使用.
翻译:[草依山](http://jser.me) &nbsp; [翻译反馈](http://weibo.com/1826461472/z9jriDdmB#pl_profile_nav) &nbsp;[Fork me](https://github.com/jserme/jade/)
翻译: [草依山](http://jser.me)
## 声明
从 Jade `v0.31.0` 开始放弃了对于 `<script>` 和 `<style>` 标签的平文本支持. 这个问题你可以在 `<script> <style>` 标签后加上 `.` 来解决.
希望这一点能让 Jade 对新手更友好, 同时也不影响到 Jade 本身的能力或者导致过度冗长.
如果你有大量的文件需要转换你可以用下 [fix-jade](https://github.com/ForbesLindesay/fix-jade) 尝试自动完成这个过程.
## Test drive
你可以在网上[试玩 Jade](http://naltatis.github.com/jade-syntax-docs).
## README 目录
- [特性](#a1)
- [其它实现](#a2)
- [安装](#a3)
- [浏览器支持](#a4)
- [公开 API](#a5)
- [语法](#a6)
- [行结束标志](#a6-1)
- [标签](#a6-2)
- [标签文本](#a6-3)
- [注释](#a6-4)
- [块注释](#a6-5)
- [内联](#a6-6)
- [块展开](#a6-7)
- [Case](#a6-8)
- [属性](#a6-9)
- [HTML](#a6-10)
- [Doctypes](#a6-11)
- [过滤器](#a7)
- [代码](#a8)
- [循环](#a9)
- [条件语句](#a10)
- [模板继承](#a11)
- [Block append/prepend](#a12)
- [包含](#a13)
- [Mixins](#a14)
- [产生输出](#a15)
- [Makefile 的一个例子](#a16)
- [命令行的 Jade](#a17)
- [教程](#a18)
- [License](#a19)
<a name="a1"/>
## 特性

@@ -13,3 +59,3 @@

- 块展开
- 混合
- Mixins
- 静态包含

@@ -20,6 +66,6 @@ - 属性改写

- 命令行下编译jade模板
- html 5 模式 (使用 _!!! 5_ 文档类型)
- HTML5 模式 (使用 `!!! 5` 文档类型)
- 在内存中缓存(可选)
- 合并动态和静态标签类
- 可以通过 _filters_ 修改树
- 可以通过 `filters` 修改树
- 模板继承

@@ -30,14 +76,17 @@ - 原生支持 [Express JS](http://expressjs.com)

- 没有前缀的标签
- AST filters
- 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/)
- `:stylus` 必须已经安装 [stylus](http://github.com/LearnBoost/stylus)
- `: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/)
- [Emacs Mode](https://github.com/brianc/jade-mode)
- [Vim Syntax](https://github.com/digitaltoad/vim-jade)
- [TextMate Bundle](http://github.com/miksago/jade-tmbundle)
- [Coda/SubEtha syntax Mode](https://github.com/aaronmccall/jade.mode)
- [Screencasts](http://tjholowaychuk.com/post/1004255394/jade-screencast-template-engine-for-nodejs)
- [html2jade](https://github.com/donpark/html2jade) 转换器
- [html2jade](https://github.com/donpark/html2jade) converter
<a name="a2"/>
## 其它实现

@@ -47,28 +96,40 @@

- [scala](http://scalate.fusesource.org/versions/snapshot/documentation/scaml-reference.html)
- [ruby](http://github.com/stonean/slim)
- [ruby](https://github.com/slim-template/slim)
- [python](https://github.com/SyrusAkbary/pyjade)
- [java](https://github.com/neuland/jade4j)
<a name="a3"/>
## 安装
通过 npm:
通过 NPM:
npm install jade
```bash
npm install jade
```
<a name="a4"/>
## 浏览器支持
把jade编译为一个可供浏览器使用的单文件，只需要简单的执行:
$ make jade.js
把 Jade 编译为一个可供浏览器使用的单文件，只需要简单的执行:
如果你已经安装了uglifyjs (`npm install uglify-js`)，你可以执行下面的命令它会生成所有的文件。其实每一个正式版本里都帮你做了这事。
```bash
$ make jade.js
```
如果你已经安装了 uglifyjs (`npm install uglify-js`)，你可以执行下面的命令它会生成所有的文件。其实每一个正式版本里都帮你做了这事。
$ make jade.min.js
```bash
$ make jade.min.js
```
默认情况下，为了方便调试Jade会把模板组织成带有形如 `__.lineno = 3` 的行号的形式。
在浏览器里使用的时候，你可以通过传递一个选项`{ compileDebug: false }`来去掉这个。
下面的模板
p Hello #{name}
默认情况下，为了方便调试Jade会把模板组织成带有形如 `__.lineno = 3` 的行号的形式。
在浏览器里使用的时候，你可以通过传递一个选项 `{ compileDebug: false }` 来去掉这个。
下面的模板
会被翻译成下面的函数：
```bash
p Hello #{name}
```
会被翻译成下面的函数：
```js

@@ -85,3 +146,3 @@ function anonymous(locals, attrs, escape, rethrow) {

通过使用Jade的 `./runtime.js`你可以在浏览器使用这些预编译的模板而不需要使用Jade, 你只需要使用runtime.js里的工具函数, 它们会放在`jade.attrs`, `jade.escape` 这些里。 把选项 `{ client: true }` 传递给 `jade.compile()`, Jade 会把这些帮助函数的引用放在`jade.attrs`, `jade.escape`.
通过使用 Jade 的 `./runtime.js`你可以在浏览器使用这些预编译的模板而不需要使用 Jade, 你只需要使用 `runtime.js` 里的工具函数, 它们会放在 `jade.attrs`, `jade.escape` 这些里。 把选项 `{ client: true }` 传递给 `jade.compile()`, Jade 会把这些帮助函数的引用放在`jade.attrs`, `jade.escape`.

@@ -100,10 +161,11 @@ ```js

## 公开API
<a name="a5"/>
## 公开 API
```javascript
var jade = require('jade');
var jade = require('jade');
// Compile a function
var fn = jade.compile('string of jade', options);
fn(locals);
// Compile a function
var fn = jade.compile('string of jade', options);
fn(locals);
```

@@ -113,11 +175,14 @@

- `self` 使用`self` 命名空间来持有本地变量. _默认为false_
- `self` 使用 `self` 命名空间来持有本地变量. _(默认为 `false`)_
- `locals` 本地变量对象
- `filename` 异常发生时使用，includes时必需
- `debug` 输出token和翻译后的函数体
- `compiler` 替换掉jade默认的编译器
- `filename` 异常发生时使用，includes 时必需
- `debug` 输出 token 和翻译后的函数体
- `compiler` 替换掉 jade 默认的编译器
- `compileDebug` `false`的时候调试的结构不会被输出
- `pretty` 为输出加上了漂亮的空格缩进 _(默认为 `false`)_
<a name="a6"/>
## 语法
<a name="a6-1"/>
### 行结束标志

@@ -127,2 +192,3 @@

<a name="a6-2"/>
### 标签

@@ -132,19 +198,25 @@

html
```jade
html
```
它会被转换为 `<html></html>`
标签也是可以有id的:
标签也是可以有 id 的:
div#container
```jade
div#container
```
它会被转换为 `<div id="container"></div>`
怎么加类呢？
怎么加 class 呢？
div.user-details
```jade
div.user-details
```
转换为 `<div class="user-details"></div>`
多个类? 和id? 也是可以搞定的:
多个 class 和 id? 也是可以搞定的:

@@ -155,11 +227,16 @@ div#foo.bar.baz

不停的div div div 很讨厌啊 , 可以这样:
不停的 `div div div` 很讨厌啊 , 可以这样:
#foo
.bar
```jade
#foo
.bar
```
这个算是我们的语法糖，它已经被很好的支持了，上面的会输出：
`<div id="foo"></div><div class="bar"></div>`
```html
<div id="foo"></div><div class="bar"></div>
```
<a name="a6-3"/>
### 标签文本

@@ -169,3 +246,5 @@

p wahoo!
```jade
p wahoo!
```

@@ -176,228 +255,328 @@ 它会被渲染为 `<p>wahoo!</p>`.

p
| foo bar baz
| rawr rawr
| super cool
| go jade go
```jade
p
| foo bar baz
| rawr rawr
| super cool
| go jade go
```
渲染为 `<p>foo bar baz rawr.....</p>`
怎么和数据结合起来？ 所有类型的文本展示都可以和数据结合起来，如果我们把`{ name: 'tj', email: 'tj@vision-media.ca' }` 传给编译函数，下面是模板上的写法:
怎么和数据结合起来？ 所有类型的文本展示都可以和数据结合起来，如果我们把 `{ name: 'tj', email: 'tj@vision-media.ca' }` 传给编译函数，下面是模板上的写法:
#user #{name} &lt;#{email}&gt;
```jade
#user #{name} &lt;#{email}&gt;
```
它会被渲染为 `<div id="user">tj &lt;tj@vision-media.ca&gt;</div>`
当就是要输出`#{}` 的时候怎么办? 转义一下!
当就是要输出 `#{}` 的时候怎么办? 转义一下!
p \#{something}
它会输出`<p>#{something}</p>`
它会输出 `<p>#{something}</p>`
同样可以使用非转义的变量`!{html}`, 下面的模板将直接输出一个script标签
同样可以使用非转义的变量 `!{html}`, 下面的模板将直接输出一个 `<script>` 标签:
- var html = "<script></script>"
| !{html}
```jade
- var html = "<script></script>"
| !{html}
```
内联标签同样可以使用文本块来包含文本：
label
| Username:
input(name='user[name]')
```jade
label
| Username:
input(name='user[name]')
```
或者直接使用标签文本:
label Username:
input(name='user[name]')
```jade
label Username:
input(name='user[name]')
```
_只_包含文本的标签，比如`script`, `style`, 和 `textarea` 不需要前缀`|` 字符, 比如:
_只_ 包含文本的标签，比如 `<script>`, `<style>`, 和 `<textarea>` 不需要前缀 `|` 字符, 比如:
html
head
title Example
script
if (foo) {
bar();
} else {
baz();
}
```jade
html
head
title Example
script
if (foo) {
bar();
} else {
baz();
}
```
这里还有一种选择，可以使用'.' 来开始一段文本块，比如：
这里还有一种选择，可以使用 `.` 来开始一段文本块，比如：
p.
foo asdf
asdf
asdfasdfaf
asdf
asd.
```jade
p.
foo asdf
asdf
asdfasdfaf
asdf
asd.
```
会被渲染为:
<p>foo asdf
asdf
asdfasdfaf
asdf
asd
.
</p>
```jade
<p>foo asdf
asdf
asdfasdfaf
asdf
asd
.
</p>
```
这和带一个空格的 '.' 是不一样的, 带空格的会被Jade的解析器忽略，当作一个普通的文字:
这和带一个空格的 `.` 是不一样的, 带空格的会被 Jade 的解析器忽略，当作一个普通的文字:
p .
```jade
p .
```
渲染为:
<p>.</p>
```jade
<p>.</p>
```
需要注意的是文本块需要两次转义。比如想要输出下面的文本：
</p>foo\bar</p>
```jade
</p>foo\bar</p>
```
使用:
p.
foo\\bar
```jade
p.
foo\\bar
```
<a name="a6-4"/>
### 注释
单行注释和JavaScript里是一样的，通过"//"来开始，并且必须单独一行：
单行注释和 JavaScript 里是一样的，通过 `//` 来开始，并且必须单独一行：
// just some paragraphs
p foo
p bar
```jade
// just some paragraphs
p foo
p bar
```
渲染为：
<!-- just some paragraphs -->
<p>foo</p>
<p>bar</p>
```html
<!-- just some paragraphs -->
<p>foo</p>
<p>bar</p>
```
Jade 同样支持不输出的注释，加一个短横线就行了：
//- will not output within markup
p foo
p bar
```jade
//- will not output within markup
p foo
p bar
```
渲染为：
<p>foo</p>
<p>bar</p>
```html
<p>foo</p>
<p>bar</p>
```
<a name="a6-5"/>
### 块注释
块注释也是支持的：
块注释也是支持的：
body
//
#content
h1 Example
```jade
body
//
#content
h1 Example
```
渲染为：
<body>
<!--
<div id="content">
<h1>Example</h1>
</div>
-->
</body>
```html
<body>
<!--
<div id="content">
<h1>Example</h1>
</div>
-->
</body>
```
Jade 同样很好的支持了条件注释：
body
//if IE
a(href='http://www.mozilla.com/en-US/firefox/') Get Firefox
```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>
```html
<body>
<!--[if IE]>
<a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a>
<![endif]-->
</body>
```
<a name="a6-6"/>
### 内联
Jade 支持以自然的方式定义标签嵌套:
Jade 支持以自然的方式定义标签嵌套:
ul
li.first
a(href='#') foo
li
a(href='#') bar
li.last
a(href='#') baz
```jade
ul
li.first
a(href='#') foo
li
a(href='#') bar
li.last
a(href='#') baz
```
<a name="a6-7"/>
### 块展开
块展开可以帮助你在一行内创建嵌套的标签，下面的例子和上面的是一样的：
块展开可以帮助你在一行内创建嵌套的标签，下面的例子和上面的是一样的：
ul
li.first: a(href='#') foo
li: a(href='#') bar
li.last: a(href='#') baz
```jade
ul
li.first: a(href='#') foo
li: a(href='#') bar
li.last: a(href='#') baz
```
<a name="a6-8"/>
### Case
`case` 表达式按下面这样的形式写:
```jade
html
body
friends = 10
case friends
when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends
```
块展开在这里也可以使用:
```jade
friends = 5
html
body
case friends
when 0: p you have no friends
when 1: p you have a friend
default: p you have #{friends} friends
```
<a name="a6-9"/>
### 属性
Jade 现在支持使用'(' 和 ')' 作为属性分隔符
Jade 现在支持使用 `(` 和 `)` 作为属性分隔符
a(href='/login', title='View login page') Login
```jade
a(href='/login', title='View login page') Login
```
当一个值是 `undefined` 或者 `null` 属性_不_会被加上,
当一个值是 `undefined` 或者 `null` 属性 _不_ 会被加上,
所以呢，它不会编译出 'something="null"'.
div(something=null)
```jade
div(something=null)
```
Boolean 属性也是支持的:
input(type="checkbox", checked)
```jade
input(type="checkbox", checked)
```
使用代码的Boolean 属性只有当属性为`true`时才会输出：
使用代码的 Boolean 属性只有当属性为 `true` 时才会输出：
input(type="checkbox", checked=someValue)
```jade
input(type="checkbox", checked=someValue)
```
多行同样也是可用的：
input(type='checkbox',
name='agreement',
checked)
```jade
input(type='checkbox',
name='agreement',
checked)
```
多行的时候可以不加逗号：
input(type='checkbox'
name='agreement'
checked)
```jade
input(type='checkbox'
name='agreement'
checked)
```
加点空格，格式好看一点？同样支持
input(
type='checkbox'
name='agreement'
checked)
```jade
input(
type='checkbox'
name='agreement'
checked)
```
冒号也是支持的:
rss(xmlns:atom="atom")
```jade
rss(xmlns:atom="atom")
```
假如我有一个`user` 对象 `{ id: 12, name: 'tobi' }`
我们希望创建一个指向"/user/12"的链接 `href`, 我们可以使用普通的javascript字符串连接，如下:
假如我有一个 `user` 对象 `{ id: 12, name: 'tobi' }`
我们希望创建一个指向 `/user/12` 的链接 `href`, 我们可以使用普通的 JavaScript 字符串连接，如下:
a(href='/user/' + user.id)= user.name
```jade
a(href='/user/' + user.id)= user.name
```
或者我们使用jade的修改方式,这个我想很多使用Ruby或者 CoffeeScript的人会看起来像普通的js..:
或者我们使用 Jade 的修改方式, 这个我想很多使用 Ruby 或者 CoffeeScript 的人会看起来像普通的 JS..:
a(href='/user/#{user.id}')= user.name
```jade
a(href='/user/#{user.id}')= user.name
```
`class`属性是一个特殊的属性，你可以直接传递一个数组，比如`bodyClasses = ['user', 'authenticated']` :
`class` 属性是一个特殊的属性，你可以直接传递一个数组，比如 `bodyClasses = ['user', 'authenticated']` :
body(class=bodyClasses)
```jade
body(class=bodyClasses)
```
<a name="a6-10"/>
### HTML
内联的html是可以的，我们可以使用管道定义一段文本 :
内联的 HTML 是可以的，我们可以使用管道定义一段文本 :
```
```jade
html

@@ -409,5 +588,5 @@ body

或者我们可以使用`.` 来告诉Jade我们需要一段文本：
或者我们可以使用 `.` 来告诉 Jade 我们需要一段文本：
```
```jade
html

@@ -419,5 +598,5 @@ body.

上面的两个例子都会渲染成相同的结果：
上面的两个例子都会渲染成相同的结果：
```
```jade
<html><body><h1>Title</h1>

@@ -428,3 +607,3 @@ <p>foo bar baz</p>

这条规则适应于在jade里的任何文本：
这条规则适应于在 Jade 里的任何文本：

@@ -437,2 +616,3 @@ ```

<a name="a6-11"/>
### Doctypes

@@ -442,43 +622,57 @@

!!!
```jade
!!!
```
会渲染出 _transitional_ 文档类型, 或者:
!!! 5
```jade
!!! 5
```
or
!!! html
```jade
!!! html
```
or
doctype html
```jade
doctype html
```
doctypes 是大小写不敏感的, 所以下面两个是一样的:
Doctype 是大小写不敏感的, 所以下面两个是一样的:
doctype Basic
doctype basic
```jade
doctype Basic
doctype basic
```
当然也是可以直接传递一段文档类型的文本：
doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
```jade
doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
```
渲染后:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">
```
会输出 _html 5_ 文档类型. 下面的默认的文档类型，可以很简单的扩展：
会输出 _HTML5_ 文档类型. 下面的默认的文档类型，可以很简单的扩展：
```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">'
};
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">'
};
```

@@ -492,2 +686,3 @@

<a name="a7"/>
## 过滤器

@@ -497,31 +692,42 @@

body
:markdown
Woah! jade _and_ markdown, very **cool**
we can even link to [stuff](http://google.com)
```jade
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>
```html
<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>
```
<a name="a8"/>
## 代码
Jade目前支持三种类型的可执行代码。第一种是前缀`-`， 这是不会被输出的：
Jade 目前支持三种类型的可执行代码。第一种是前缀 `-`， 这是不会被输出的：
- var foo = 'bar';
```jade
- var foo = 'bar';
```
这可以用在条件语句或者循环中：
- for (var key in obj)
p= obj[key]
```jade
- for (var key in obj)
p= obj[key]
```
由于Jade的缓存技术，下面的代码也是可以的：
由于 Jade 的缓存技术，下面的代码也是可以的：
- if (foo)
ul
li yay
li foo
li worked
- else
p oh no! didnt work
```jade
- if (foo)
ul
li yay
li foo
li worked
- else
p oh no! didnt work
```

@@ -538,112 +744,144 @@ 哈哈，甚至是很长的循环也是可以的：

下一步我们要_转义_输出的代码，比如我们返回一个值，只要前缀一个`=`：
下一步我们要 _转义_ 输出的代码，比如我们返回一个值，只要前缀一个 `=`：
- var foo = 'bar'
= foo
h1= foo
```jade
- var foo = 'bar'
= foo
h1= foo
```
它会渲染为`bar<h1>bar</h1>`. 为了安全起见，使用`=`输出的代码默认是转义的,如果想直接输出不转义的值可以使用`!=`：
它会渲染为 `bar<h1>bar</h1>`. 为了安全起见，使用 `=` 输出的代码默认是转义的,如果想直接输出不转义的值可以使用 `!=`：
p!= aVarContainingMoreHTML
```jade
p!= aVarContainingMoreHTML
```
Jade 同样是设计师友好的，它可以使javascript更直接更富表现力。比如下面的赋值语句是相等的，同时表达式还是通常的javascript：
- var foo = 'foo ' + 'bar'
foo = 'foo ' + 'bar'
Jade 同样是设计师友好的，它可以使 JavaScript 更直接更富表现力。比如下面的赋值语句是相等的，同时表达式还是通常的 JavaScript：
Jade会把 `if`, `else if`, `else`, `until`, `while`, `unless`同别的优先对待, 但是你得记住它们还是普通的javascript：
```jade
- var foo = 'foo ' + 'bar'
foo = 'foo ' + 'bar'
```
if foo == 'bar'
ul
li yay
li foo
li worked
else
p oh no! didnt work
Jade 会把 `if`, `else if`, `else`, `until`, `while`, `unless` 同别的优先对待, 但是你得记住它们还是普通的 JavaScript：
```jade
if foo == 'bar'
ul
li yay
li foo
li worked
else
p oh no! didnt work
```
<a name="a9"/>
## 循环
尽管已经支持JavaScript原生代码，Jade还是支持了一些特殊的标签，它们可以让模板更加易于理解，其中之一就是`each`, 这种形式：
尽管已经支持 JavaScript 原生代码，Jade 还是支持了一些特殊的标签，它们可以让模板更加易于理解，其中之一就是 `each`, 这种形式：
each VAL[, KEY] in OBJ
```jade
each VAL[, KEY] in OBJ
```
一个遍历数组的例子 ：
- var items = ["one", "two", "three"]
each item in items
li= item
```jade
- var items = ["one", "two", "three"]
each item in items
li= item
```
渲染为:
<li>one</li>
<li>two</li>
<li>three</li>
```html
<li>one</li>
<li>two</li>
<li>three</li>
```
遍历一个数组同时带上索引：
items = ["one", "two", "three"]
each item, i in items
li #{item}: #{i}
```jade
items = ["one", "two", "three"]
each item, i in items
li #{item}: #{i}
```
渲染为:
<li>one: 0</li>
<li>two: 1</li>
<li>three: 2</li>
```html
<li>one: 0</li>
<li>two: 1</li>
<li>three: 2</li>
```
遍历一个数组的键值：
obj = { foo: 'bar' }
each val, key in obj
li #{key}: #{val}
```jade
obj = { foo: 'bar' }
each val, key in obj
li #{key}: #{val}
```
将会渲染为：`<li>foo: bar</li>`
Jade在内部会把这些语句转换成原生的JavaScript语句，就像使用 `users.forEach(function(user){`,
词法作用域和嵌套会像在普通的JavaScript中一样：
Jade 在内部会把这些语句转换成原生的 JavaScript 语句，就像使用 `users.forEach(function(user){`, 词法作用域和嵌套会像在普通的 JavaScript 中一样：
each user in users
each role in user.roles
li= role
```jade
each user in users
each role in user.roles
li= role
```
如果你喜欢，也可以使用`for` ：
for user in users
for role in user.roles
li= role
如果你喜欢，也可以使用 `for` ：
```jade
for user in users
for role in user.roles
li= role
```
<a name="a10"/>
## 条件语句
Jade 条件语句和使用了(`-`) 前缀的JavaScript语句是一致的,然后它允许你不使用圆括号，这样会看上去对设计师更友好一点，
同时要在心里记住这个表达式渲染出的是_常规_Javascript：
Jade 条件语句和使用了(`-`) 前缀的 JavaScript 语句是一致的,然后它允许你不使用圆括号，这样会看上去对设计师更友好一点，
同时要在心里记住这个表达式渲染出的是 _常规_ JavaScript：
for user in users
if user.role == 'admin'
p #{user.name} is an admin
else
p= user.name
```jade
for user in users
if user.role == 'admin'
p #{user.name} is an admin
else
p= user.name
```
和下面的使用了常规JavaScript的代码是相等的：
和下面的使用了常规 JavaScript 的代码是相等的：
for user in users
- if (user.role == 'admin')
p #{user.name} is an admin
- else
p= user.name
```jade
for user in users
- if (user.role == 'admin')
p #{user.name} is an admin
- else
p= user.name
```
Jade 同时支持`unless`, 这和`if (!(expr))`是等价的：
Jade 同时支持 `unless`, 这和 `if (!(expr))` 是等价的：
for user in users
unless user.isAnonymous
p
| Click to view
a(href='/users/' + user.id)= user.name
```jade
for user in users
unless user.isAnonymous
p
| Click to view
a(href='/users/' + user.id)= user.name
```
<a name="a11"/>
## 模板继承
Jade 支持通过 `block` 和 `extends` 关键字来实现模板继承。 一个块就是一个Jade的"block" ，它将在子模板中实现，同时是支持递归的。
Jade 支持通过 `block` 和 `extends` 关键字来实现模板继承。 一个块就是一个 Jade 的 block ，它将在子模板中实现，同时是支持递归的。
Jade 块如果没有内容，Jade会添加默认内容，下面的代码默认会输出`block scripts`, `block content`, 和 `block foot`.
Jade 块如果没有内容，Jade 会添加默认内容，下面的代码默认会输出 `block scripts`, `block content`, 和 `block foot`.
```
```jade
html

@@ -661,5 +899,5 @@ head

现在我们来继承这个布局，简单创建一个新文件，像下面那样直接使用`extends`，给定路径（可以选择带.jade扩展名或者不带）. 你可以定义一个或者更多的块来覆盖父级块内容, 注意到这里的`foot`块_没有_定义，所以它还会输出父级的"some footer content"。
现在我们来继承这个布局，简单创建一个新文件，像下面那样直接使用 `extends`，给定路径（可以选择带 `.jade` 扩展名或者不带）. 你可以定义一个或者更多的块来覆盖父级块内容, 注意到这里的 `foot` 块 _没有_ 定义，所以它还会输出父级的 "some footer content"。
```
```jade
extends extend-layout

@@ -677,5 +915,5 @@

同样可以在一个子块里添加块，就像下面实现的块`content`里又定义了两个可以被实现的块`sidebar`和`primary`，或者子模板直接实现`content`。
同样可以在一个子块里添加块，就像下面实现的块 `content` 里又定义了两个可以被实现的块 `sidebar` 和 `primary`，或者子模板直接实现 `content`。
```
```jade
extends regular-layout

@@ -692,21 +930,61 @@

<a name="a12"/>
## Block append / prepend
Jade allows you to _replace_ (default), _prepend_, or _append_ blocks. Suppose for example you have default scripts in a "head" block that you wish to utilize on _every_ page, you might do this:
```jade
html
head
block head
script(src='/vendor/jquery.js')
script(src='/vendor/caustic.js')
body
block content
```
Now suppose you have a page of your application for a JavaScript game, you want some game related scripts as well as these defaults, you can simply `append` the block:
```jade
extends layout
block append head
script(src='/vendor/three.js')
script(src='/game.js')
```
使用 `block append` 或 `block prepend` 时 `block` 是可选的:
```jade
extends layout
append head
script(src='/vendor/three.js')
script(src='/game.js')
```
<a name="a13"/>
## 包含
Includes 允许你静态包含一段Jade, 或者别的存放在单个文件中的东西比如css, html。 非常常见的例子是包含头部和页脚。 假设我们有一个下面目录结构的文件夹：
Includes 允许你静态包含一段 Jade, 或者别的存放在单个文件中的东西比如 CSS, HTML 非常常见的例子是包含头部和页脚。 假设我们有一个下面目录结构的文件夹：
./layout.jade
./includes/
./head.jade
./tail.jade
```
./layout.jade
./includes/
./head.jade
./tail.jade
```
下面是 _layout.jade_ 的内容:
下面是 `layout.jade` 的内容:
html
include includes/head
body
h1 My Site
p Welcome to my super amazing site.
include includes/foot
```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 会解析这些文件，并且插入到已经生成的语法树中，然后渲染为你期待的内容：
这两个包含 `includes/head` 和 `includes/foot` 都会读取相对于给 `layout.jade` 参数`filename` 的路径的文件, 这是一个绝对路径，不用担心Express帮你搞定这些了。Include 会解析这些文件，并且插入到已经生成的语法树中，然后渲染为你期待的内容：

@@ -730,14 +1008,22 @@ ```html

前面已经提到，`include` 可以包含比如html或者css这样的内容。给定一个扩展名后，Jade不会把这个文件当作一个Jade源代码，并且会把它当作一个普通文本包含进来：
前面已经提到，`include` 可以包含比如 HTML 或者 CSS 这样的内容。给定一个扩展名后，Jade 不会把这个文件当作一个 Jade 源代码，并且会把它当作一个普通文本包含进来：
```
html
head
//- css and js have simple filters that wrap them in
<style> and <script> tags, respectively
include stylesheet.css
include script.js
body
//- "markdown" files will use the "markdown" filter
to convert Markdown to HTML
include introduction.markdown
//- html files have no filter and are included verbatim
include content.html
```
Include 也可以接受块内容，给定的块将会附加到包含文件 _最后_ 的块里。 举个例子，`head.jade` 包含下面的内容：
Include 也可以接受块内容，给定的块将会附加到包含文件 _最后_ 的块里。 举个例子，`head.jade` 包含下面的内容：
```
```jade
head

@@ -759,31 +1045,83 @@ script(src='/jquery.js')

You may also `yield` within an included template, allowing you to explicitly mark where the block given to `include` will be placed. Suppose for example you wish to prepend scripts rather than append, you might do the following:
```jade
head
yield
script(src='/jquery.js')
script(src='/jquery.ui.js')
```
Since included Jade is parsed and literally merges the AST, lexically scoped variables function as if the included Jade was written right in the same file. This means `include` may be used as sort of partial, for example suppose we have `user.jade` which utilizes a `user` variable.
```jade
h1= user.name
p= user.occupation
```
We could then simply `include user` while iterating users, and since the `user` variable is already defined within the loop the included template will have access to it.
```jade
users = [{ name: 'Tobi', occupation: 'Ferret' }]
each user in users
.user
include user
```
yielding:
```html
<div class="user">
<h1>Tobi</h1>
<p>Ferret</p>
</div>
```
If we wanted to expose a different variable name as `user` since `user.jade` references that name, we could simply define a new variable as shown here with `user = person`:
```jade
each person in users
.user
user = person
include user
```
<a name="a14"/>
## Mixins
Mixins在编译的模板里会被Jade转换为普通的JavaScript函数。 Mixins 可以还参数，但不是必需的：
Mixins 在编译的模板里会被 Jade 转换为普通的 JavaScript 函数。 Mixins 可以还参数，但不是必需的：
mixin list
ul
li foo
li bar
li baz
```jade
mixin list
ul
li foo
li bar
li baz
```
使用不带参数的mixin看上去非常简单，在一个块外：
h2 Groceries
mixin list
使用不带参数的 mixin 看上去非常简单，在一个块外：
Mixins 也可以带一个或者多个参数，参数就是普通的javascripts表达式，比如下面的例子：
```jade
h2 Groceries
mixin list
```
mixin pets(pets)
ul.pets
- each pet in pets
li= pet
Mixins 也可以带一个或者多个参数，参数就是普通的 JavaScript 表达式，比如下面的例子：
mixin profile(user)
.user
h2= user.name
mixin pets(user.pets)
```jade
mixin pets(pets)
ul.pets
- each pet in pets
li= pet
会输出像下面的html：
mixin profile(user)
.user
h2= user.name
mixin pets(user.pets)
```
会输出像下面的 HTML:
```html

@@ -801,7 +1139,8 @@ <div class="user">

<a name="a15"/>
## 产生输出
假设我们有下面的Jade源码：
假设我们有下面的 Jade 源码：
```
```jade
- var title = 'yay'

@@ -812,3 +1151,3 @@ h1.title #{title}

当 `compileDebug` 选项不是`false`, Jade 会编译时会把函数里加上 `__.lineno = n;`, 这个参数会在编译出错时传递给`rethrow()`, 而这个函数会在Jade初始输出时给出一个有用的错误信息。
当 `compileDebug` 选项不是 `false`, Jade 会编译时会把函数里加上 `__.lineno = n;`, 这个参数会在编译出错时传递给 `rethrow()`, 而这个函数会在 Jade 初始输出时给出一个有用的错误信息。

@@ -844,3 +1183,3 @@ ```js

当`compileDebug` 参数是`false`, 这个参数会被去掉，这样对于轻量级的浏览器端模板是非常有用的。结合Jade的参数和当前源码库里的 `./runtime.js` 文件，你可以通过toString()来编译模板而不需要在浏览器端运行整个Jade库，这样可以提高性能，也可以减少载入的JavaScript数量。
当 `compileDebug` 参数是 `false`, 这个参数会被去掉，这样对于轻量级的浏览器端模板是非常有用的。结合 Jade 的参数和当前源码库里的 `./runtime.js` 文件，你可以通过 `toString()` 来编译模板而不需要在浏览器端运行整个 Jade 库，这样可以提高性能，也可以减少载入的 JavaScript 数量。

@@ -867,5 +1206,6 @@ ```js

## Makefile的一个例子
<a name="a16"/>
## Makefile 的一个例子
通过执行`make`， 下面的Makefile例子可以把 _pages/*.jade_ 编译为 _pages/*.html_ 。
通过执行 `make`， 下面的 Makefile 例子可以把 `pages/*.jade` 编译为 `pages/*.html` 。

@@ -887,7 +1227,10 @@ ```make

这个可以和`watch(1)` 命令起来产生像下面的行为：
这个可以和 `watch(1)` 命令起来产生像下面的行为：
$ watch make
```bash
$ watch make
```
## 命令行的jade(1)
<a name="a17"/>
## 命令行的 Jade

@@ -902,5 +1245,9 @@ ```

-v, --version 输出版本号
-o, --obj <str> javascript选项
-O, --out <dir> 输出编译后的html到<dir>
-p, --path <path> 在处理stdio时，查找包含文件时的查找路径
-o, --out <dir> 输出编译后的 HTML 到 <dir>
-O, --obj <str> JavaScript 选项
-p, --path <path> 在处理 stdio 时，查找包含文件时的查找路径
-P, --pretty 格式化 HTML 输出
-c, --client 编译浏览器端可用的 runtime.js
-D, --no-debug 关闭编译的调试选项(函数会更小)
-w, --watch 监视文件改变自动刷新编译结果

@@ -929,2 +1276,12 @@ Examples:

*注意: 从 `v0.31.0` 的 `-o` 选项已经指向 `--out`, `-O` 相应做了交换*
<a name="a18"/>
## 教程
- cssdeck interactive [Jade syntax tutorial](http://cssdeck.com/labs/learning-the-jade-templating-engine-syntax)
- cssdeck interactive [Jade logic tutorial](http://cssdeck.com/labs/jade-templating-tutorial-codecast-part-2)
- in [Japanese](http://blog.craftgear.net/4f501e97c1347ec934000001/title/10%E5%88%86%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8Bjade%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3)
<a name="a19"/>
## License

@@ -931,0 +1288,0 @@

8

Readme.md
# Jade - template engine
[![Build Status](https://secure.travis-ci.org/visionmedia/jade.png)](http://travis-ci.org/visionmedia/jade)
[![Build Status](https://travis-ci.org/visionmedia/jade.png?branch=master)](https://travis-ci.org/visionmedia/jade)
[![Dependency Status](https://gemnasium.com/visionmedia/jade.png)](https://gemnasium.com/visionmedia/jade)

@@ -881,3 +881,3 @@ [![NPM version](https://badge.fury.io/js/jade.png)](http://badge.fury.io/js/jade)

head
h1 My Site - #{title}
title My Site - #{title}
block scripts

@@ -1251,4 +1251,4 @@ script(src='/jquery.js')

-V, --version output the version number
-o, --out <dir> output the compiled html to <dir>
-O, --obj <str> javascript options object
-o, --out <dir> output the compiled html to <dir>
-p, --path <path> filename used to resolve includes

@@ -1279,2 +1279,4 @@ -P, --pretty compile pretty html output

*Notice: since `v0.31.0`, `-o` is preferred for `--out` where we used `-O` before.*
<a name="a18"/>

@@ -1281,0 +1283,0 @@ ## Tutorials

bin/jade

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc