JS template engine Jade Use syntax

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