This article mainly introduces the detailed introduction to the Node.js template engine Jade. Jade is a template engine for Node.js. Now I will share it with you and give you a reference.

Jade is a template engine for Node.js. It draws on many aspects of Haml, so its syntax is similar to Haml. Moreover, Jade also supports spaces.

1. Tags

In Jade, any text at the beginning of a line is interpreted as an HTML tag by default. And you only need to write the opening tag-note: no need to add "a8093152e673feb7aba1828c43532094". Because Jade will render the closing and opening tags for us. For example:

body 
  p 
    h1 Jade是Node.js的一个模板引擎
    p  它借鉴了Haml的很多地方，所以语法上和Haml比较相近。
  p 
    footer © Pandora

The HTML code finally rendered by the Jade template above is:

  

    
 Jade是Node.js的一个模板引擎
    
它借鉴了Haml的很多地方，所以语法上和Haml比较相近。
  

  

    
  

Note: If no tag name is written, the default is the p tag.

2. Variables/data

The data passed to the Jade template is called locals. Use the equal sign "=" to output the value of a variable.

(locals):

{
  title: "Express.js Guide",
  body: "The Comprehensive Book on Express.js"
}

Jade code:

h1= title
p= body

Rendered output HTML:

Express.js Guide
The Comprehensive Book on Express.js

3. Read variables

Reading the value of a variable in Jade is achieved through #{name}. For example:

- var title = "Node"

p I love #{title}

The value of the variable is processed when the template is compiled, so do not use it in executable JavaScript(-).

4. Attributes

The attributes follow the label and are enclosed by "()", and multiple attributes are separated by ",". For example: body (name1 = “value1”, name2 = “value2”).

p(id="content", class='main')
  a(href='http://csdn.net', title='csdn主页'， target='_blank') CSDN:中国软件联盟
  form(action="/login")
    button(type="submit", value="提交")

Output:

   CSDN:中国软件联盟
  

    
  

Dynamic attributes:

Dynamic attributes means that the value of the attribute is dynamic, that is, a variable is used to represent the value of the attribute. . The symbol "|" can write HTML node content in a new line. For example:

a(href=url, data-active=isActive)
label
  input(type="checkbox", checked=isChecked)
  | yes / no

The data provided to the above template:

{
  url: "/logout",
  isActive: true,
  isChecked: false
}

The HTML output after final rendering:

  yes / no

Note: The attribute value of false is used when outputting HTML code will be ignored; when no attribute value is passed in, it will default to true.

5. Literal

To save trouble, you can write the class directly after the tag name name and ID name. For example:

p#content
  p.lead.center
    | Pandora_galen
    #side-bar.pull-right // 没有标签名，默认为“p”
    span.contact.span4
      a(href="//m.sbmmt.com/contact" rel="external nofollow" rel="external nofollow" ) contact me

Rendered output HTML:

  

  Pandora_galen
  

  
     contact me 
  

6, text

Use the "|" symbol to output the original text.

p 
  | 我两年前开始学习前端
  | 在此之间，我学过了html, jQuery, JavaScript, Python， Css3, HTML5, Bootstrap, D3.js, SVG...而现在我在学Node。并且我已经深深的爱上了前端。

7. Script and Style blocks

Use the "." symbol to create in HTML

script.
  console.log("Hello world!");
  setTiemout(function() {
    window.location.href = "http://csdn.net"
  }, 1000);

  console.log("Good bye!");

Generated code:

Similarly, style. generates c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927.

8. JavaScript code

Use -, = or! =These three symbols are used to write executable JS code in Jade that can manipulate the output. This is useful when outputting HTML elements and injecting JavaScript. However, you must be careful to avoid cross-site scripting (XSS) attacks when doing this.

For example, you can use it! =Define an array and output tag data:

- var arr = ['', '', '']
ul
  -for (var i = 0; i < arr.length; i++)
    li
      span= i
      span!= "unescaped:" + arr[i] + "vs."
      span= "escaped:" + arr[i]

The generated code is as follows:

  
0unescaped: vs. escaped: 

  
1unescaped: vs. escaped: 

  
2unescaped: vs. escaped: 

One of the main differences between the template engine Jade and Handlebars is: Jade allows almost all JavaScript to be written in the code ; However, Handlebars limit developers to a small number of built-in and custom helpers.

// 普通注释，会输出到渲染后生成的HTML页面
p Hello Jade content

//- 特殊注释，不会输出到HTML页面
p (id="footer") copyright 2016

 Hello Jade content 

copyright 2016

- var user = {}
- user.admin = Math.random() > 0.5

if user.admin
  button(class = "launch") Launch Spacecraft
else 
  button(class = "login") Log in

- var language = ['JavaScript', 'Node', 'Python', 'Java']
p
  each value, index in language
    p= index + "," + value

  
0. JavaScript
  
1. Node
  
2. Python
  
3. Java

- var language = ['JavaScript': -1, 'Node': 2, 'Python': 3, 'Java': 1]

p 
  each value, key in languages
    p= key + ":" + value

  
JavaScript: -1
  
Node: 2
  
Python: 3
  
Java: 1

p
  :markdown
    # practical Node.js
    [This book](http://csdn.net) really helps to grasp many coponents needed for modern-day web development.

- var coins = Math.round(Math.random() * 10)

case coins
  when 0
    p You have no money
  when 1
    p You have a coin
  default
    p You have #{coins} coins!

mixin row(items)
  tr
    each item, index in items
      td= item

mixin table(tableData)
  table
    each row, index in tableData
      +row(row)

- var node = [{name: "express"}, {name: "Jade"}, {name: "Handlebars"}]
+table(node)

- var js = [{name: 'backbone'}, {name: 'angular'}, {name: "emberJS"}]
+table(js)

  

    
express
  
  

    
Jade
  
  

    
Handlebars
  



  

    
backbone
  
  

    
angular
  
  

    
emberJS
  

include ./includes/header

include ../includes/footer

block header
  p some default text
block content
  p loading...
block footer
  p copyright

extend file_a
block header
  p very specific text
block content
  .main-content