Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "sample analysis based on Node.js template engine jade", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "sample analysis based on Node.js template engine jade" this article.

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

First, create a new index.jade file under the project directory

Inde.jade Code:

Doctype htmlhtml head meta (charset='utf-8') title body h4 Welcome to learn jade

1. The label is written according to the indented format of html

2. The attributes of the tag can be in parentheses

3. If the tag has content, it can be written directly at the back of the tag.

Then on the command line, use jade-P index.jade to compile the index.jade file into an index.html file,-P (sort the code into an indented format, if you don't take this parameter, index.html is a compressed format, which is not easy to read)

The compiled index.html code:

Welcome to learn jade.

Second, class,id and other attributes and the writing of multi-line text

Create a new index2.jade file with the following code:

Doctype htmlhtml head meta (charset='utf8') title jade template engine body H2 jade template engine div#box.box1.box2 (class='box3') # abc.box1.box2.box3 h4.box1.box2 (class='abc def') a (href=' http://www.taobao.com', target = 'blank') Taobao input (type='button', value='') br p. 1 This is hello 2 Magi test 3 test string string p | 1, this is strong hello | 2 Magi test | 3, Magi

Execute the compilation command: jade-P ghostwu.html compiles index2.jade into a ghostwu.html file, and the compiled code is as follows:

Jade template engine Taobao

1,this is hello 2,test 3,string

1, this ishello 2, test 3, test string

1 class='box3' divbox.box1.box2 (class='box3') is the way emmet is written # is the id attribute point (.) Even the parenthesis of class attribute is how to write it.

2 div tags abc.box1.box2.box3, the element tag name is not given at all. The default is to add these attributes to the box tag.

3. Two ways of writing multi-line text

p.

1,this is

Hello

2,test

3,string

The first way to write multi-line text: the p tag is followed by one. It is written in the original html tag.

P

| | 1, this is |

Strong hello

| | 2, test |

| | 3, test string |

The second way to write multi-line text: the text is preceded by a vertical bar (|), followed by the content of the label.

III. Notes

Jade template code:

Doctype htmlhtml head meta (charset='utf8') title jade template engine Learning-by ghostwu body h4 single-line comment / / div.box.box2 this is a comment / /-div#box.box2.box3 h4 comment that div H4 will not compile into the html file, also known as multiline comment / /-input (Fairy type='checkbox', name='meinv', value='') Fairy input (type='checkbox', name='meinv') Value=' Sister H4 this is not a note input (type='checkbox', name='meinv', value=' Fairy') | Fairy input (type='checkbox', name='meinv', value=') | Royal Sister

After compilation:

Jade template engine Learning-by ghostwu single-line comments are not compiled into comment block comments in html files, also known as multiline comments. This is not a comment fairy.

1, single-line comment

/ / div.box.box2, this is a div.

2, comment only in jade and will not be compiled to html file

/ /-div#box.box2.box3

3, block comments (multi-line text comments), the content of the comment should be another line

4 the display text behind the check box should be careful not to be next to the property, but to start a new line and write it after the vertical line.

Fourth, jade template actual combat menu

Doctype htmlhtml 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:;') homepage li a (href='_javascript:;') fantasy novel li a (href='_javascript:;') authentic novel li a (href='_javascript: ) li a (href='_javascript:;') science fiction li a (href='_javascript:;') online game novel

The effect after compilation (jade index.jade-P-w):-w: monitor the modification of the file in real time, and refresh the result immediately after saving, which is the popular hot loading technology in modern front-end development.

5. Explanatory variables

Doctype htmlhtml head meta (charset='utf8')-var title = 'jade template engine Learning-by ghostwu'; title # {title.toUpperCase ()} 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:;') homepage li a (href='_javascript:;') fantasy novel li a (href='_javascript:;') authentic novel li a (href='_javascript: ) li a (href='_javascript:;') science fiction li a (href='_javascript:;') online game novel

# {}: variables can be explained, toUpperCase (): variables are capitalized

Transfer the data from the json file to the template at compile time

Create new data.json file data

{"content": "learn jade from ghostwu"} index2.jade file template: doctype htmlhtml head meta (charset='utf8')-var title = 'jade template engine Learning-by ghostwu'; title # {title.toUpperCase ()} body h4 # {content}

Compile command: jade index2.jade-P-O data.json-O specifies a json file to pass the data from the json file to the template

The compiled result:

JADE template engine Learning-BY GHOSTWU follows ghostwu to learn jade. The above is all the contents of this article "sample Analysis based on Node.js template engine jade". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.