基于Node.js模板引擎jade的示例分析

發(fā)布時間：2021-09-01 14:40:32 來源：億速云閱讀：116 作者：小新欄目：web開發(fā)

這篇文章主要為大家展示了“基于Node.js模板引擎jade的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“基于Node.js模板引擎jade的示例分析”這篇文章吧。

環(huán)境準(zhǔn)備：

全局安裝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
    h4 歡迎學(xué)習(xí)jade

1，標(biāo)簽按照html的縮進格式寫

2，標(biāo)簽的屬性可以采用圓括號

3，如果標(biāo)簽有內(nèi)容，可以直接寫在標(biāo)簽的后面

然后在命令行用 jade -P index.jade 把index.jade文件編譯成index.html文件，-P( 把代碼整理成縮進格式的，如果不帶這個參數(shù)，index.html就是壓縮格式，不利于閱讀)

編譯之后的index.html代碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <h4>歡迎學(xué)習(xí)jade</h4>
 </body>
</html>

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

新建index2.jade文件,代碼如下：

doctype html
html
  head
    meta(charset='utf8')
    title jade template engine
  body
    h2 jade template engine
    h2 jade template engine
    h2 jade template engine
    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') 淘寶
    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

執(zhí)行編譯命令：jade -P <index2.jade> ghostwu.html 把index2.jade編譯成ghostwu.html文件，編譯之后的代碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade template engine</title>
 </head>
 <body>
  <h2>jade template engine</h2>
  <h2>jade template engine</h2>
  <h2>jade template engine</h2>
  <h2>jade template engine</h2>
  <div id="box" class="box1 box2 box3"></div>
  <div id="abc" class="box1 box2 box3"></div>
  <h4 class="box1 box2 abc def"></h4><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，div#box.box1.box2(class='box3') 這種寫法是emmet的寫法 #就是id屬性點(.)就是class屬性括號也是屬性寫法

2，#abc.box1.box2.box3，全面沒有給元素標(biāo)簽名稱，默認就是給div標(biāo)簽加上這些屬性

3，多行文本的兩種寫法

1,this is
<strong>hello</strong>
2,test
3,string

多行文本第1種寫法：p標(biāo)簽后面要跟一個. 里面用原始的html標(biāo)簽寫法

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

多行文本第2種寫法：文本前面用豎線 ( | )，標(biāo)簽后面跟內(nèi)容

三、注釋

jade模板代碼：

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎學(xué)習(xí)-by ghostwu
  body
    h4 單行注釋
    // div.box.box2 這是一段div
    h4 不會編譯到html文件的注釋
    //- div#box.box2.box3
    h4 塊注釋,也叫多行注釋
    //- 
      input(type='checkbox', name='meinv', value='仙女') 仙女
      input(type='checkbox', name='meinv', value='御姐') 御姐
    h4 這里不是注釋
    input(type='checkbox', name='meinv', value='仙女')
    | 仙女
    input(type='checkbox', name='meinv', value='御姐')
    | 御姐

編譯之后:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade模板引擎學(xué)習(xí)-by ghostwu</title>
 </head>
 <body>
  <h4>單行注釋</h4>
  <!-- div.box.box2 這是一段div-->
  <h4>不會編譯到html文件的注釋</h4>
  <h4>塊注釋,也叫多行注釋</h4>
  <h4>這里不是注釋</h4>
  <input type="checkbox" name="meinv" value="仙女">仙女
  <input type="checkbox" name="meinv" value="御姐">御姐
 </body>
</html>

1，單行注釋

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

2，只在jade中注釋，不會被編譯到html文件

//- div#box.box2.box3

3，塊注釋( 多行文本注釋 )，被注釋的內(nèi)容要另起一行

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

四、jade模板實戰(zhàn)菜單

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎學(xué)習(xí)-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:;') 首頁
        li
          a(href='javascript:;') 玄幻小說
        li
          a(href='javascript:;') 修真小說
        li
          a(href='javascript:;') 都世小說
        li
          a(href='javascript:;') 科幻小說
        li
          a(href='javascript:;') 網(wǎng)游小說

編譯( jade index.jade -P -w )之后的效果: -w: 實時監(jiān)控文件的修改，保存之后立刻刷新結(jié)果，也就是現(xiàn)代前端開發(fā)中很流行的熱加載技術(shù)

基于Node.js模板引擎jade的示例分析

五、解釋變量

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎學(xué)習(xí)-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:;') 首頁
        li
          a(href='javascript:;') 玄幻小說
        li
          a(href='javascript:;') 修真小說
        li
          a(href='javascript:;') 都世小說
        li
          a(href='javascript:;') 科幻小說
        li
          a(href='javascript:;') 網(wǎng)游小說

#{}：可以解釋變量, toUpperCase():變量轉(zhuǎn)大寫

把json文件的數(shù)據(jù)在編譯的時候傳遞到模板,

新建data.json文件數(shù)據(jù)

{
"content" : "跟著ghostwu學(xué)習(xí)jade"
}
index2.jade文件模板:

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎學(xué)習(xí)-by ghostwu';
    title #{title.toUpperCase()}
  body
    h4 #{content}

編譯命令：jade index2.jade -P -O data.json -O 指定一個json文件，把json文件的數(shù)據(jù)傳遞到模板

編譯后的結(jié)果：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>JADE模板引擎學(xué)習(xí)-BY GHOSTWU</title>
 </head>
 <body>
  <h4>跟著ghostwu學(xué)習(xí)jade</h4>
 </body>
</html>

以上是“基于Node.js模板引擎jade的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

基于Node.js模板引擎jade的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽