Jade is a high-performance, easy-to-understand template engine, and Jade is a haml JavaScript implementation, supported on both the server side (NodeJS) and the client.
Function
· Client Support
· Ultra-strong readability
· Flexible and easy-to-use indentation
· Block extension
· Code is encoded by default for enhanced security
· Compile and run-time context error Reporting
· Command-line compilation support
· HTML5 Mode (Use!!! 5 Document Type)
· Optional Memory cache
· Federated dynamic and static tag classes
· Processing of parse tree using filter
· Support Express JS
· Use each transparent loop objects,arrays even non-enumerable objects
· Block annotations
· No tag prefixes required
· AST Filter
· Filter filters
O:sass need to install sass.js
O:less need to install less.js
O:markdown need to install Markdown-js or node-discount
O:cdata
O:coffeescript need to install Coffee-script
· Vim Grammar file
· TextMate Bag
· screencasts
Other language implementations
· PHP
· Scala
· Ruby
Installation
Via NPM:
NPM Install Jade
Browser support
You can compile jade as a client browser-compatible file by using the following command:
$ make Jade.js
Alternatively, if you have installed Uglifyjs (NPMINSTALLUGLIFY-JS) with NPM, you can create two files simultaneously by using the following command:
$ make Jade.min.js
Exposing APIs
var jade = require (' Jade ');
Render string
Jade.render ('. csser.com string ', {options: ' here '});
Render file
Jade.renderfile (' Path/to/csser.com.jade ', {options: ' here '}, function (err, HTML) {
The options here are optional.
The callback function can be used as a second argument
});
Compiling a function
var fn = jade.compile (' String of Jade ', options);
Fn.call (scope, locals);
Options
· Scope Execution scope (this)
· locals local variable Object
· filename handles exceptions and caches when used
· Cache is cached in memory by file name JavaScript
· The markup and function body generated by the debug output
· compiler replacing the jade default compilation engine
Grammar
End of Line
CRLF and CR are converted to LF before parsing.
Mark
The tag is the first word in a row:
Html
will be converted to
Tags can also have IDs:
Div#container
This will be rendered as <div id= "container" ></div>
How do I handle classes?
Div.user-details
Render as: <div class= "User-details" ></div>
Multiple class? And there's an ID?
Div#foo.bar.baz
Render as: <div id= "foo" class= "bar Baz" ></div>
The total write div is really annoying and can be omitted:
#foo
. Bar
Output: <div id= "foo" ></div><div class= "Bar" ></div>
Tag text
Just place the text content behind the tag:
P Wahoo!
Render as <p>wahoo!</p>.
Cool, but how do you deal with large pieces of text?
P
| Foo Bar Baz
| rawr rawr
| Super Cool
| Go Jade Go
Rendered as <p>foo bar Baz rawr.....</p>
Interpolation method? Yes, both types of text can be interpolated, if we pass in {locals: {name: ' One back ', email: ' xianlihua[at]gmail.com '}, you can do this:
#user #{name} <#{email}>
Output: <div id= "User" > One back <xianlihua[at]gmail.com></div>
Need to output #{} for some reason? Escaped:
P \#{csser, focus on javascript technology}
This is achieved by: <p>#{csser, attention to JavaScript technology}</p>
You can also use the invert semantics variable! {html}, the following code will output the script tag:
-var html = "<script></script>"
| ! {html}
Nested tags that contain text can also use text blocks:
Label
| Username:
Input (name= ' user[name] ')
or use tag text directly:
Label Username:
Input (name= ' user[name] ')
Accept only plain text tokens, such as Script,style, and textarea do not need to start with the | character, for example:
Html
Head
Title Csser, focus on web front-end technology
Script
if (foo) {
Bar ();
} else {
Baz ();
}
Again as an alternative, we can use the dot '. ' To represent a block of text, for example:
P.
Foo ASDF
Asdf
Asdfasdfaf
Asdf
Asd.
Output:
<p>foo ASDF
Asdf
Asdfasdfaf
Asdf
Asd
.
</p>
If the dot number '. ' There is a space between the tag, and Jade parses it and ignores it as text processing:
P.
Output:
<p>.</p>
Comments
A single-line comment currently appears to be consistent with JavaScript, i.e. "//" and the contents of a single-line comment must be on the same line:
Some paragraphs
P Foo
P Bar
The output will be:
<!--some paragraphs--
<p>foo</p>
<p>bar</p>
Jade also supports non-buffered annotations by simply adding a horizontal bar:
-The line comment will not be output to the parsed page
P Foo
P Bar
Output:
<p>foo</p>
<p>bar</p>
Block annotations
Block annotations are processed according to indentation:
Body
//
#content
H1 Csser, focus on web front-end technology
Output:
<body>
<!--
<div id= "Content" >
</div>
-
</body>
Jade also supports conditional annotations, such as:
Body
/if IE
A (href= ' http://www.mozilla.com/en-US/firefox/') Get Firefox
Output:
<body>
<!--[If ie]>
<a href= "http://www.mozilla.com/en-US/firefox/" >get firefox</a>
<! [endif]-->
</body>
Nesting
Jade supports nesting to define tags in a natural way:
Ul
Li.first
A (href= ' # ') foo
Li
A (href= ' # ') bar
Li.last
A (href= ' # ') Baz
Block extension
Block extensions allow you to create a simple nested tag of a single line, the following example is the same as the output from the previous example:
Ul
Li.first:a (href= ' # ') foo
Li:a (href= ' # ') bar
Li.last:a (href= ' # ') Baz
Characteristics
Currently Jade supports the ' (' and ') ' character delimiters.
A (href= '/login ', title= ' View login page ') login
Alternatively, we can use a colon (:) as a separator:
A (href: '/login ', title: ' Register as a csser.com member ') login
The Boolean attribute is also supported:
Input (type= "checkbox", checked)
The Boolean attribute with a value of variable is output only when the value is true:
Input (type= "checkbox", Checked:somevalue)
Splits can also be parsed in multiple rows:
Input (type= ' checkbox ',
Name= ' agreement ',
Checked
Document type
Use!!! To increase the document type of the page:
!!!
The transition document type will be output, however:
!!! 5
The HTML5 document type will be output, and the following is the default defined document type, which can also be easily extended:
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 ">"
};
To modify the default values simply change:
Jade.doctypes.default = ' Whatever you want ';
Filter filters
The filter is prefixed with a colon (:), such as: Markdown will function on the text (one note: A variable regulator similar to Smarty), and the current jade-supported filter is listed at the beginning of this page.
Body
: markdown
woah! Jade _and_ markdown, very **cool**
We can even link to [Csser] (http://www.csser.com)
After rendering:
<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>
Filters can also handle parse trees, and usually filters can handle text blocks normally, but the block filters that pass through the rules can do whatever it can.
Body
Conditionals:
if role = = ' admin '
P You is amazing
Else
P Not so amazing
Code
Jade currently supports three types of executable code, the first of which is prefixed with--and will not be buffered:
-var foo = ' Bar ';
This can be used for conditions or loops:
-For (var key in obj)
p= Obj[key]
Due to the technique of jade buffering, the following code is valid:
-If (foo)
Ul
Li Yay
Li Foo
Li worked
-Else
P Oh no! You aren't in csser.com
Even a detailed iteration loop:
-if (items.length)
Ul
-Items.foreach (function (item) {
li= Item
- })
Anything you want can be achieved!
We then escaped the buffer code to buffer the return value, prefixed by an equal sign (=):
-var foo = ' Bar '
= Foo
h1= Foo
Output: Bar
-Each Val, key in obj
Li #{key}: #{val}
This will output <li>foo:bar</li>
Nested loops can also be made:
-Each user in users
-Each role in User.roles
li= role
When a property is Undefined,jade, an empty string is output, for example:
Textarea= user.signature
The recent version of Jade will output an empty string instead of undefined:
<textarea></textarea>
Command-line tools: Bin/jade
Output HTML to standard output (stdout):
Jade Examples/*.jade--pipe
Generate examples/*.html:
Jade Examples/*.jade
Incoming parameters:
Jade Examples/layout.jade--options ' {locals: {title: ' Csser '}} '
Finish
JS template engine Jade Use syntax