首頁 > 文章 > web前端 > Node.js模板引擎jade實例講解

Node.js模板引擎jade實例講解

小云云原創: 2018-02-06 09:19:431713瀏覽

本文主要為大家帶來一篇基於Node.js模板引擎教學-jade速學與實戰1。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

環境準備：

全域安裝jade: npm install jade -g

初始化項目package.json: npm init --yes

#安裝完成之後，可以使用jade --help 查看jade的命令列用法

一、在專案目錄下新建index.jade檔案

inde.jade程式碼：

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

1，標籤依照html的縮排格式寫

2，標籤的屬性可以採用圓括號

3，如果標籤有內容，可以直接寫在標籤的後面

然後在命令列用jade -P index.jade 把index.jade檔案編譯成index.html文件，-P( 把程式碼整理成縮排格式的，如果不帶這個參數，index.html就是壓縮格式，不利於閱讀)

編譯之後的index.html程式碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <h3>欢迎学习jade</h3>
 </body>
</html>

二、class,id等其他屬性與多行文字的書寫

新index2.jade檔,程式碼如下：

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

執行編譯指令：jade -P ghostwu.html 把index2.jade編譯成ghostwu.html文件，編譯之後的程式碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade template engine</title>
 </head>
 <body>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <h1>jade template engine</h1>
  <p id="box" class="box1 box2 box3"></p>
  <p id="abc" class="box1 box2 box3"></p>
  <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" rel="external nofollow" target="blank">淘宝</a>
  <input type="button" value="点我"><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>
 </body>
</html>

1，p#box.box1.box2(class='box3') 這種寫法是emmet的寫法#就是id屬性點(.)就是class屬性括號也是屬性寫法

2，#abc.box1 .box2.box3，全面沒有給元素標籤名稱，預設就是給p標籤加上這些屬性

3，多行文字的兩種寫法

1,this is
hello
2,test
3,string

多行文字第1種寫法：p標籤後面要跟一個.裡面用原始的html標籤寫法

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

多行文字第2種寫法：文字前面用垂直線( | )，標籤後面跟內容

三、註解

jade範本程式碼：

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='御姐')
    | 御姐

編譯之後:

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

1，單行註解

// p.box.box2 這是一段p

2，只在jade中註釋，不會被編譯到html檔

//- p#box.box2.box3

3，塊註解( 多行文字註解)，被註解的內容要另起一行

4，checkbox後面的顯示文字部分要注意，不要挨著屬性的後面，要另起一行，寫在垂直線的後面

#四、jade模板實戰選單

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:;') 网游小说

編譯( jade index.jade -P -w )之後的效果: -w: 即時監控檔案的修改，保存之後立刻刷新結果，也就是現代前端開發中很流行的熱加載技術

五、解釋變數

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:;') 网游小说

#{}：可以解釋變數, toUpperCase():變數轉大寫

把json檔案的資料在編譯的時候傳遞到模板,

新data.json檔案資料

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

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

編譯指令：jade index2.jade -P -O data.json -O 指定一個json文件，把json檔案的資料傳遞到範本

編譯後的結果：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>JADE模板引擎学习-BY GHOSTWU</title>
 </head>
 <body>
  <h3>跟着ghostwu学习jade</h3>
 </body>
</html>

Node.js模板引擎jade實例講解

相關文章