Jade Installation Use sample introduction

Installation

NPM Install Jade
Configuration developed in sublime text

Jade Syntax Highlighting:
Jade code to highlight the need to install the plug-ins are: Jade;

Jade compiled to HTML:
You first need to install the Jade module globally:

NPM Install Jade--global
Then, install the Jade build plug-in with Package control.

When used, in menu Tools > Build System, confirm that Automatic or Jade are selected. Perform the compilation in the. jade file by pressing CTRL+B (MAC:CMD+B). If the compilation succeeds, the. html file is generated in the sibling directory.

Recommended through the Package control installation Sublime on the Save build, refer to Https://sublime.wbond.net/packages/SublimeOnSaveBuild for configuration, add Jade to Fil Ename_filter, so that the compilation can be performed automatically each time you save the file.

Jade Syntax

Label
Jade:

Html
After rendering, it becomes:

Jade:

Div#foo.bar.baz
After rendering, it becomes: <div id= "foo" ></div><div class= "Bar" ></div>.

Text

For small pieces of text, you can put the simple content directly after the label:

P Wahoo!
:<p>wahoo!</p> after rendering.

For large pieces of text, you can precede each line with the words "| “：

P
| Foo Bar Baz
| rawr rawr
| Super Cool
| Go Jade Go
After rendering: <p>foo bar baz rawr rawr super cool go Jade go</p>.

For large pieces of text, you can also choose to ". “：

P.
Foo ASDF
Asdf
Asdfasdfaf
Asdf
Asd
After rendering:

<p>
Foo ASDF
Asdf
Asdfasdfaf
Asdf
Asd
</p>
This is not the same as a '. ' With a space. The "." With a space is ignored by the Jade parser as a plain text:

P.
Render as:<p>.</p>.

Comments

There are three types of single-line comments:

Single-line Comment
<!--single-line annotation-->
-Single-line comments that are not exported
Property

Jade supports the use of "(and") as the property separator.

A (href= '/login ', title= ' View login page ') login
Render as: <a href= "/login" title= "View login Page" >Login</a>.

When a value is undefined or the null attribute is not added. Such as:

Div (something=null)
Render as:<div></div>.

Executable code

Jade currently supports three kinds of executable code. The first is the prefix--this is not going to be output:

-var foo = ' Bar ';
-var items = [1, 2, 3, 4]
-if (items.length)
Ul
-Items.foreach (function (item) {
li= Item
- })
Render as:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
Use = to output escaped code:

-var foo = ' Bar '
= Foo
h1= Foo
Output:bar

Cycle

To traverse an array:

-var items = ["One", "two", "three"]
Each item, I in items
Li #{item}: #{i}
Render as:

<li>one:0</li>
<li>two:1</li>
<li>three:2</li>
Traversing objects:

-var obj = {foo: ' Bar ', Name: ' Hello '}
Each Val, key in obj
Li #{key}: #{val}
Render as:

<li>foo:bar</li>
<li>name:hello</li>
You can also use a For loop:

-var users = {bob: {roles: "1", Custom: "2"}, Jeny: {roles: "2"}}
For user in users
For role in User.roles
li= role
Render as:<li>1</li><li>2</li>.

Conditional judgment

If judgment:
-var users = {bob: {role: ' admin ', Name: ' Bob '}, Jeny: {role: ' Custom ', Name: ' Jeny '}}
For user in users
-if (user.role = = ' admin ')
P #{user.name} is a admin
-Else
p= User.Name
Render as:

<p>bob is an admin</p>
<p>jeny</p>
Case Judgment:
-var friends = 10
Case Friends
When 0
P You have no friends
When 1
P You have a friend
Default
P You have #{friends} friends
Or:

-var friends = 1
Case Friends
When 0:p you have no friends
When 1:p your have a friend
Default:p you have #{friends} friends
are rendered as:

<p>you have friends</p>
Template inheritance

Jade supports template inheritance through the block and extends keywords.

In the parent template, use the block to define the placeholders as follows:

Layout.jade:

Html
Head
H1 my Site-#{title}
Block scripts
Script (src= '/jquery.js ')
Body
Block content
Block foot
#footer
P Some footer content
In a child template, use extends to define its parent template directly. The parent template can optionally be with the. jade extension or not.

Child.jade:

Extends layout

Block scripts
Script (src= '/jquery.js ')
Script (src= '/pets.js ')

Block content
h1= Title
Each pet in Pets
Include Pet
Where the Child.jade rendering is:

<script src= "/jquery.js" ></script>
<script src= "/pets.js" ></script>
<body>
<div id= "Footer" ></div>
<p>some Footer Content</p>
</body>
Contains

Includes allows you to statically include a piece of jade, or something else that is stored in a single file, such as CSS, HTML.

Such as:

Html
Include Head.jade
Body
H1 my Site
P Welcome to my super amazing site.
Include Foot.jade
Mixins

Mixin List
Ul
Li Foo
Li Bar
Li Baz

H2 groceries
+list
+list
Render as:

<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Mixin with parameters:

Mixin Pets (Pets)
Ul.pets
Each pet in Pets
li= Pet

Mixin profile (user)
. user
H2= User.Name
Mixin Pets (User.pets)

-var user = {name: "Bob", Pets: ["Cat", "dog", "Pig"]}
+profile (user)
Render as:

<div class= "User" >
<ul class= "Pets" ></ul>
<li>cat</li>
<li>dog</li>
<li>pig</li>
</div>
Variable call

There are 3 different ways to jade variable calls:

{expression}

= expression//will escape the character
The!= expression//does not escape the character
-var s = ' Hello World '//define variable in service-side space
P #{s}
p= s
Render as:

<p>hello world</p>
<p>hello world</p>