Node.js Template Engine Tutorial-jade Speed Learning and Practical Warfare 1

Posted by daucoin on Fri, 24 May 2019 23:15:53 +0200

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

p.
1,this is
<strong>hello</strong>
2,test
3,string
The first way to write multi-line text is to follow the p tag. It is written with the original html tag.
p
| 1, this is
strong hello
| 2, test
| 3, test string
The second way to write multi-line text is to use a vertical line (|) in front of the text and a label followed by the content.
Three, notes
jade template code:
 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

{
"content": "Learn jade with ghostwu"
}
Index 2.jade file template:
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>

Topics: Javascript JSON Attribute npm