WebRTC Demo（亲测可用）

[](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). For discussion join the [Google Group](http://groups.google.com/group/jadejs). ## Test drive You can test drive Jade online [here](http://naltatis.github.com/jade-syntax-docs). ## README Contents - [Features](#a1) - [Implementations](#a2) - [Installation](#a3) - [Browser Support](#a4) - [Public API](#a5) - [Syntax](#a6) - [Line Endings](#a6-1) - [Tags](#a6-2) - [Tag Text](#a6-3) - [Comments](#a6-4) - [Block Comments](#a6-5) - [Nesting](#a6-6) - [Block Expansion](#a6-7) - [Case](#a6-8) - [Attributes](#a6-9) - [HTML](#a6-10) - [Doctypes](#a6-11) - [Filters](#a7) - [Code](#a8) - [Iteration](#a9) - [Conditionals](#a10) - [Template inheritance](#a11) - [Block append / prepend](#a12) - [Includes](#a13) - [Mixins](#a14) - [Generated Output](#a15) - [Example Makefile](#a16) - [jade(1)](#a17) - [Tutorials](#a18) - [License](#a19) <a name="a1"/> ## 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 &amp; run time - executable for compiling jade templates via the command line - html 5 mode (the default 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 - :less must have [less.js](http://github.com/cloudhead/less.js) installed - :markdown must have [markdown-js](http://github.com/evilstreak/markdown-js), [node-discount](http://github.com/visionmedia/node-discount), or [marked](http://github.com/chjj/marked) installed - :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) - [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) converter <a name="a2"/> ## 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) - [java](https://github.com/neuland/jade4j) <a name="a3"/> ## Installation via npm: ```bash $ npm install jade ``` <a name="a4"/> ## Browser Support To compile jade to a single file compatible for client-side use simply execute: ```bash $ 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. ```bash $ 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 ```jade 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(""); } ``` <a name="a5"/> ## Public API ```js 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 - `pretty` Add pretty-indentation whitespace to output _(false by default)_ <a name="a6"/> ## Syntax <a name="a6-1"/> ### Line Endings **CRLF** and **CR** are converted to **LF** before parsing. <a name="a6-2"/> ### Tags A tag is simply a leading word: ```jade html ``` for example is converted to `<html></html>` tags can also have ids: ```jade div#container ``` which would render `<div id="container"></div>` how about some classes? ```jade div.user-details ``` renders `<div class="user-details"></div>` multiple classes? _and_ an id? sure: ```jade div#foo.bar.baz ``` renders `<div id="foo" class="bar baz"></div>` div div div sure is annoying, how about: ```jade #foo .bar ``` which is syntactic sugar for what we have already been doing, and outputs: ```html <div id="foo"></div><div class="bar"></div> ``` <a name="a6-3"/> ### Tag Text Simply place some content after the tag: ```jade p wahoo! ``` renders `<p>wahoo!</p>`. well cool, but how about large bodies of text: ```jade 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: '[email protected]' }` to the compiled function we can do the following: ```jade #user #{name} &lt;#{email}&gt; ``` outputs `<div id="user">tj &lt;[email protected]&gt;</div>` Actually want `#{}` for some reason? escape it! ```jade 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: ```jade - var html = "<script></script>" | !{html} ``` Nested tags that also contain text can optionally use a text block: ```jade label | Username: input(name='user[name]') ``` or immediate tag text: ```jade label Username: input(name='user[name]') ``` Tags that accept _only_ text such as `script` and `style` do not need the leading `|` character, for example: ```jade 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: ```jade p. foo asdf asdf asdfasdfaf asdf asd. ``` outputs: ```html <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: ```jade p . ``` outputs: ```html <p>.</p> ``` It should be noted that text