Node.js template engine jade example explanation

This article mainly brings you a tutorial based on Node.js template engine-jade quick learning and practical combat 1. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

Environment preparation:

Install jade globally: npm install jade -g

Initialize project package.json: npm init --yes

Install After completion, you can use jade --help to view the command line usage of jade

1. Create a new index.jade file in the project directory

inde.jade code:

doctype html
html
  head
    meta(charset='utf-8')
    title
  body
    h3 欢迎学习jade

1. The label should be written in the indented format of HTML

2. The attribute of the label can be in parentheses

3. If the label has content, it can be written directly after the label

Then use jade -P index.jade on the command line to compile the index.jade file into an index.html file. -P (organizes the code into an indented format. Without this parameter, index.html will be in compressed format, not Conducive to reading)

Compiled index.html code:

nbsp;html>

 
  <meta>
  <title></title>
 
 
  <h3 id="欢迎学习jade">欢迎学习jade</h3>
 

2. Class, id and other attributes and writing of multi-line text

Create a new index2.jade file, The code is as follows:

doctype html
html
  head
    meta(charset='utf8')
    title jade template engine
  body
    h1 jade template engine
    h1 jade template engine
    h1 jade template engine
    h1 jade template engine
    p#box.box1.box2(class='box3')
    #abc.box1.box2.box3
    h3.box1.box2(class='abc def')
    a(href='http://www.taobao.com',
    target = 'blank') 淘宝
    input(type='button', value='点我')
    br
    p.
      1,this is
      <strong>hello</strong>
      2,test
      3,string
    p
      |  1, this is
      strong hello
      |  2, test
      |  3, test string

Execute the compilation command: jade -P ghostwu.html Compile index2.jade into the ghostwu.html file. The compiled code is as follows:

nbsp;html>

 
  <meta>
  <title>jade template engine</title>
 
 
  <h1 id="jade-template-engine">jade template engine</h1>
  <h1 id="jade-template-engine">jade template engine</h1>
  <h1 id="jade-template-engine">jade template engine</h1>
  <h1 id="jade-template-engine">jade template engine</h1>
  <p></p>
  <p></p>
  <h3></h3><a>淘宝</a>
  <input><br>
  <p>
   1,this is
   <strong>hello</strong>
   2,test
   3,string
  </p>
  <p> 1, this is<strong>hello</strong> 2, test
    3, test string
  </p>
 

1. p#box.box1.box2(class='box3') This way of writing is the way of writing emmet. # is the id attribute point (.) which is the class attribute bracket and is also the way of writing the attribute

2, #abc.box1 .box2.box3, there is no element tag name at all, the default is to add these attributes to the p 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 should be followed by a. inside Use the original html tag writing method

p

| 1, this is
strong hello
| 2, test
| 3, test string

The second way to write multi-line text: use a vertical bar (|) in front of the text, followed by the content

3. Comment

jade template code:

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
  body
    h3 单行注释
    // p.box.box2 这是一段p
    h3 不会编译到html文件的注释
    //- p#box.box2.box3
    h3 块注释,也叫多行注释
    //- 
      input(type='checkbox', name='meinv', value='仙女') 仙女
      input(type='checkbox', name='meinv', value='御姐') 御姐
    h3 这里不是注释
    input(type='checkbox', name='meinv', value='仙女')
    | 仙女
    input(type='checkbox', name='meinv', value='御姐')
    | 御姐

After compilation:

nbsp;html>

 
  <meta>
  <title>jade模板引擎学习-by ghostwu</title>
 
 
  <h3 id="单行注释">单行注释</h3>
  <!-- p.box.box2 这是一段p-->
  <h3 id="不会编译到html文件的注释">不会编译到html文件的注释</h3>
  <h3 id="块注释-也叫多行注释">块注释,也叫多行注释</h3>
  <h3 id="这里不是注释">这里不是注释</h3>
  <input>仙女
  <input>御姐
 

1, single line comment

// p.box.box2 This is a p

2, which is only commented in jade and will not be compiled into the html file

//- p#box.box2.box3

3, block comment (multi-line text comment), the commented content should be on a new line

4, after the checkbox Pay attention to the display text part, do not place it next to the attribute, start a new line and write it after the vertical line

4. jade template actual menu

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-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
    p#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

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

# #5. Interpretation of variables

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-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
    p#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

#{}: Variables can be interpreted, toUpperCase(): Variables are converted to uppercase

Pass the data of the json file to the template during compilation,

Create new data.json file data

{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
  body
    h3 #{content}

Compile command: jade index2.jade -P -O data.json -O Specify a json file and transfer the data of the json file to the template

Compiled result:

nbsp;html>

 
  <meta>
  <title>JADE模板引擎学习-BY GHOSTWU</title>
 
 
  <h3 id="跟着ghostwu学习jade">跟着ghostwu学习jade</h3>
 

Related recommendations:

Detailed explanation of Node.js template engine Jade

The above is the detailed content of Node.js template engine jade example explanation. For more information, please follow other related articles on the PHP Chinese website!