[![Build Status](https://secure.travis-ci.org/visionmedia/jade.png)](http://travis-ci.org/visionmedia/jade)
# Jade - template engine
Jade is a high performance template engine heavily influenced by [Haml](http://haml-lang.com)
and implemented with JavaScript for [node](http://nodejs.org).
## Features
- client-side support
- great readability
- flexible indentation
- block-expansion
- mixins
- static includes
- attribute interpolation
- code is escaped by default for security
- contextual error reporting at compile & run time
- executable for compiling jade templates via the command line
- html 5 mode (using the _!!! 5_ doctype)
- optional memory caching
- combine dynamic and static tag classes
- parse tree manipulation via _filters_
- template inheritance
- block append / prepend
- supports [Express JS](http://expressjs.com) out of the box
- transparent iteration over objects, arrays, and even non-enumerables via `each`
- block comments
- no tag prefix
- AST filters
- filters
- :stylus must have [stylus](http://github.com/LearnBoost/stylus) installed
- :sass must have [sass.js](http://github.com/visionmedia/sass.js) installed
- :less must have [less.js](http://github.com/cloudhead/less.js) installed
- :markdown must have [markdown-js](http://github.com/evilstreak/markdown-js) installed or [node-discount](http://github.com/visionmedia/node-discount)
- :cdata
- :coffeescript must have [coffee-script](http://jashkenas.github.com/coffee-script/) installed
- [Emacs Mode](https://github.com/brianc/jade-mode)
- [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) converter
## Implementations
- [php](http://github.com/everzet/jade.php)
- [scala](http://scalate.fusesource.org/versions/snapshot/documentation/scaml-reference.html)
- [ruby](http://github.com/stonean/slim)
- [python](https://github.com/SyrusAkbary/pyjade)
## Installation
via npm:
npm install jade
## Browser Support
To compile jade to a single file compatible for client-side use simply execute:
$ make jade.js
Alternatively, if uglifyjs is installed via npm (`npm install uglify-js`) you may execute the following which will create both files. However each release builds these for you.
$ make jade.min.js
By default Jade instruments templates with line number statements such as `__.lineno = 3` for debugging purposes. When used in a browser it's useful to minimize this boiler plate, you can do so by passing the option `{ compileDebug: false }`. The following template
p Hello #{name}
Can then be as small as the following generated function:
```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("");
}
```
Through the use of Jade's `./runtime.js` you may utilize these pre-compiled templates on the client-side _without_ Jade itself, all you need is the associated utility functions (in runtime.js), which are then available as `jade.attrs`, `jade.escape` etc. To enable this you should pass `{ client: true }` to `jade.compile()` to tell Jade to reference the helper functions
via `jade.attrs`, `jade.escape` etc.
```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("");
}
```
## Public API
```javascript
var jade = require('jade');
// Compile a function
var fn = jade.compile('string of jade', options);
fn(locals);
```
### Options
- `self` Use a `self` namespace to hold the locals. _false by default_
- `locals` Local variable object
- `filename` Used in exceptions, and required when using includes
- `debug` Outputs tokens and function body generated
- `compiler` Compiler to replace jade's default
- `compileDebug` When `false` no debug instrumentation is compiled
## Syntax
### Line Endings
**CRLF** and **CR** are converted to **LF** before parsing.
### Tags
A tag is simply a leading word:
html
for example is converted to `<html></html>`
tags can also have ids:
div#container
which would render `<div id="container"></div>`
how about some classes?
div.user-details
renders `<div class="user-details"></div>`
multiple classes? _and_ an id? sure:
div#foo.bar.baz
renders `<div id="foo" class="bar baz"></div>`
div div div sure is annoying, how about:
#foo
.bar
which is syntactic sugar for what we have already been doing, and outputs:
`<div id="foo"></div><div class="bar"></div>`
### Tag Text
Simply place some content after the tag:
p wahoo!
renders `<p>wahoo!</p>`.
well cool, but how about large bodies of text:
p
| foo bar baz
| rawr rawr
| super cool
| go jade go
renders `<p>foo bar baz rawr.....</p>`
interpolation? yup! both types of text can utilize interpolation,
if we passed `{ name: 'tj', email: 'tj@vision-media.ca' }` to the compiled function we can do the following:
#user #{name} <#{email}>
outputs `<div id="user">tj <tj@vision-media.ca></div>`
Actually want `#{}` for some reason? escape it!
p \#{something}
now we have `<p>#{something}</p>`
We can also utilize the unescaped variant `!{html}`, so the following
will result in a literal script tag:
- var html = "<script></script>"
| !{html}
Nested tags that also contain text can optionally use a text block:
label
| Username:
input(name='user[name]')
or immediate tag text:
label Username:
input(name='user[name]')
Tags that accept _only_ text such as `script` and `style` do not
need the leading `|` character, for example:
html
head
title Example
script
if (foo) {
bar();
} else {
baz();
}
Once again as an alternative, we may use a trailing '.' to indicate a text block, for example:
p.
foo asdf
asdf
asdfasdfaf
asdf
asd.
outputs:
<p>foo asdf
asdf
asdfasdfaf
asdf
asd.
</p>
This however differs from a trailing '.' followed by a space, which although is ignored by the Jade parser, tells Jade that this period is a literal:
p .
outputs:
<p>.</p>
It should be noted that text blocks should be doubled escaped. For example if you desire the following output.
</p>foo\bar</p>
use:
p.
foo\\bar
### Comments
Single line comments currently look the same as JavaScript comments,
aka "//" and must be placed on their own line:
// just some paragraphs
p foo
p bar
would output
<!-- just some paragraphs -->
<p>foo</p>
<p>bar</p>
Jade also supports unbuffered comments, by simply adding a hyphen:
//- will not output within markup
p foo
p bar
outputting
<p>foo</p>
<p>bar</p>
### Block Comments
A block comment is legal as well:
body
//
#content
h1 Example
outputting
<body>
<!--
<div id="content">
<h1>Example</h1>
</div>
-->
</body>
Jade supports conditional-comments as well, for example:
head
//if lt IE 8
script(src='/ie-sucks.js')
outputs:
<body>
<!--[if lt IE 8]>
<script src="/ie-sucks.js"></script>
<![endif]-->
</body>
### Nesting
Jade supports nesting to define the tags in a natural way:
ul
li.first
a(href
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
nodejs聊天室 (648个子文件)
libmysql_password.c 4KB
style.css 3KB
style.css 3KB
style.css 2KB
.empty 0B
.empty 0B
express 8KB
express 22B
.gitmodules 723B
.gitmodules 207B
.gitmodules 207B
directory.html 2KB
directory.html 2KB
chat.html 1KB
runtime.html 872B
login.html 331B
error.html 238B
error.html 238B
favicon.ico 1KB
favicon.ico 1KB
jade 3KB
chat.jade 578B
layout.jade 346B
test.jade 45B
jade 16B
something.jade 13B
socket.js 71KB
jade.js 63KB
jquery1.3.2.js 56KB
jade.min.js 33KB
constants.js 32KB
commander.js 21KB
parser.js 19KB
test-incoming-form.js 18KB
test-incoming-form.js 18KB
lexer.js 14KB
parser.js 13KB
test-parser.js 12KB
http.js 12KB
compiler.js 11KB
response.js 11KB
view.js 11KB
client.js 10KB
session.js 9KB
session.js 9KB
utils.js 9KB
utils.js 9KB
router.js 8KB
router.js 8KB
incoming_form.js 8KB
incoming_form.js 8KB
index.js 8KB
request.js 8KB
multipart_parser.js 8KB
multipart_parser.js 8KB
index.js 7KB
hash.js 7KB
index.js 7KB
logger.js 7KB
logger.js 7KB
mutability.js 6KB
static.js 6KB
static.js 6KB
querystring.js 5KB
querystring.js 5KB
equal.js 5KB
directory.js 5KB
directory.js 5KB
http.js 5KB
http.js 5KB
chat.js 5KB
parse.js 5KB
parse.js 5KB
jade.js 5KB
bodyParser.js 4KB
bodyParser.js 4KB
view.js 4KB
staticCache.js 4KB
staticCache.js 4KB
auth.js 4KB
index.js 4KB
query.js 4KB
compiler.js 4KB
compiler.js 4KB
test-outgoing-packet.js 3KB
stringify.js 3KB
stringify.js 3KB
test-auth.js 3KB
utils.js 3KB
circular.js 3KB
errorHandler.js 3KB
errorHandler.js 3KB
test-client.js 3KB
session.js 3KB
session.js 3KB
csrf.js 3KB
csrf.js 3KB
deep_equal.js 3KB
runtime.js 2KB
outgoing_packet.js 2KB
共 648 条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
danhuang
- 粉丝: 177
- 资源: 9
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
- 4
- 5
- 6
前往页