Environmental preparation:
Global installation jade: NPM install jade-g
Initialize the project package.json: npm init --yes
After the installation is complete, you can use jade --help to view the command line usage of jade
1. Create a new index.jade file under the project directory
inde.jade code:
1 doctype html 2 html 3 head 4 meta(charset='utf-8') 5 title 6 body 7 h3 Welcome to learn jade
Rule of grammar:
1. Labels are written in html indentation format
2. Attributes of tags can be parenthesized
3. If the label has content, it can be written directly at the back of the label.
Then compile the index.jade file into index.html file with jade -P index.jade on the command line, - P (collate the code into indented format, if you don't take this parameter, index.html is compressed format, which is not conducive to reading)
The compiled index.html code:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <h3>Welcome to learn jade</h3> 9 </body> 10 </html>
2. class,id and other attributes and multi-line text writing
New index 2.jade file, code as follows:
1 doctype html 2 html 3 head 4 meta(charset='utf8') 5 title jade template engine 6 body 7 h1 jade template engine 8 h1 jade template engine 9 h1 jade template engine 10 h1 jade template engine 11 div#box.box1.box2(class='box3') 12 #abc.box1.box2.box3 13 h3.box1.box2(class='abc def') 14 a(href='http://www.taobao.com', 15 target = 'blank') TaoBao 16 input(type='button', value='Point me') 17 br 18 p. 19 1,this is 20 <strong>hello</strong> 21 2,test 22 3,string 23 p 24 | 1, this is 25 strong hello 26 | 2, test 27 | 3, test string
Execute the compilation command: jade-P < index 2.jade > ghostwu.html. Compile index 2.jade into ghostwu.html file. The compiled code is as follows:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title>jade template engine</title> 6 </head> 7 <body> 8 <h1>jade template engine</h1> 9 <h1>jade template engine</h1> 10 <h1>jade template engine</h1> 11 <h1>jade template engine</h1> 12 <div id="box" class="box1 box2 box3"></div> 13 <div id="abc" class="box1 box2 box3"></div> 14 <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" target="blank">TaoBao</a> 15 <input type="button" value="Point me"><br> 16 <p> 17 1,this is 18 <strong>hello</strong> 19 2,test 20 3,string 21 </p> 22 <p> 1, this is<strong>hello</strong> 2, test 23 3, test string 24 </p> 25 </body> 26 </html>
1, div box. box 1. box 2 (class='box 3') is the emmet # is the id attribute point (.) is the class attribute bracket is also the attribute writing.
2, # abc. box 1. box 2. box 3. There is no element label name at all. The default is to add these attributes to the div label.
3. Two Ways of Writing Multi-Line Texts
1 doctype html 2 html 3 head 4 meta(charset='utf8') 5 Title jade template engine learning - by ghostwu 6 body 7 H3 single line comment 8 // Div. box. box 2 This is a div Notes that 9 H3 will not be compiled into html files 10 //- div#box.box2.box3 11 H3 block comment, also known as multi-line comment 12 //- 13 input (type ='checkbox', name ='meinv', value ='fairy') Fairy 14 input (type ='checkbox', name ='meinv', value ='imperial sister') imperial sister 15 H3 This is not a comment. 16 input (type ='checkbox', name ='meinv', value ='fairy') 17 | Fairy 18 input (type ='checkbox', name ='meinv', value ='imperial sister') 19 | Yujie
After compilation:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 < title > jade template engine learning - by ghostwu </title > 6 </head> 7 <body> 8 < H3 > single line comment</h3> 9 <!-- Div. box. box 2 This is a div - >. 10 < H3 > Comments that are not compiled into html files</h3> 11 < H3 > block comment, also known as multiline comment</h3> 12 < H3 > This is not a comment</h3> 13 <input type= "checkbox" name= "meinv" value= "fairy">fairy 14 <input type= "checkbox" name= "meinv" value= "imperial sister">imperial sister 15 </body> 16 </html>
1. One-line comment
// Div. box. box 2 This is a div
2. Note only in jade and will not be compiled into html files
//- div#box.box2.box3
3. Block annotations (multi-line text annotations). The annotated content should start on a new line
4. Pay attention to the display text behind the checkbox. Don't follow the attributes. Write a new line behind the vertical line.
4. jade Template Actual Menu
doctype html
html
head
meta(charset='utf8')
title jade Template Engine Learning-by ghostwu
style.
* { margin : 0; padding: 0; }
li { list-style-type: none; }
a { text-decoration: none; color: white; }
#nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
#nav li { float:left; }
#nav li.active { background:red; }
#nav li:hover { background:#09f; }
#nav li a{ padding: 5px 10px; }
body
div#nav
ul
li.active
a(href='javascript:;') home page
li
a(href='javascript:;') fantasy novels
li
a(href='javascript:;') Real Novels
li
a(href='javascript:;') All world Novels
li
a(href='javascript:;') science fiction
li
a(href='javascript:;') Online game Novels
The effect after compiling: - w: real-time monitoring of file modification, save and immediately refresh the results, which is a popular hot loading technology in modern front-end development.
Explanatory variables
1 doctype html 2 html 3 head 4 meta(charset='utf8') 5 - var title = 'jade Template Engine Learning-by ghostwu'; 6 title #{title.toUpperCase()} 7 style. 8 * { margin : 0; padding: 0; } 9 li { list-style-type: none; } 10 a { text-decoration: none; color: white; } 11 #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;} 12 #nav li { float:left; } 13 #nav li.active { background:red; } 14 #nav li:hover { background:#09f; } 15 #nav li a{ padding: 5px 10px; } 16 body 17 div#nav 18 ul 19 li.active 20 a(href='javascript:;') home page 21 li 22 a(href='javascript:;') fantasy novels 23 li 24 a(href='javascript:;') Real Novels 25 li 26 a(href='javascript:;') All world Novels 27 li 28 a(href='javascript:;') science fiction 29 li 30 a(href='javascript:;') Online game Novels
# {}: variable can be interpreted, toUpperCase(): variable capitalized
The data of the json file is passed to the template at compilation time.
New data.json file data
1 doctype html 2 html 3 head 4 meta(charset='utf8') 5 - var title = 'jade Template Engine Learning-by ghostwu'; 6 title #{title.toUpperCase()} 7 body 8 h3 #{content}
Compile command: jade index 2.jade-P-O data.json-O specifies a JSON file to pass data from the JSON file to the template
Compiled results:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title>JADE Template Engine Learning-BY GHOSTWU</title> 6 </head> 7 <body> 8 <h3>follow ghostwu Study jade</h3> 9 </body> 10 </html>