jade include和extends、block

jade模板是MVC模型中的V--視圖,可以編寫網頁文件,元素和HTML相同,基本使用就是將html中的標籤尖括號去掉,如:

HTML:<p>這是HTML中的寫法</p>

jade:p 這是jade中的寫法

上述兩種寫法的顯示效果相同

但是在jade中沒有結束標籤,瀏覽器或者說編譯器(從jade編譯輸出成HTML)是怎麼判斷每個標籤的結束範圍呢

jade中採用的方法是縮進,子標籤比父標籤向後縮進兩個空格,同一級別的縮進表示同一級別的元素

jade中的縮進很重要,而且容易出錯,使用時要謹慎處理縮進

如:

doctype html
html
  head
    title 主頁
    meta(charset='utf-8')
  body
      h1 This is login
上述代碼會自動編譯成

<!DOCTYPE html>
<html>
  <head>
    <title>主頁</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>This is login</h1>
  </body>
</html>


在jade中還提供了兩種使用外部jade的方法include和extends

include例子如下:

bodey.jade文件內容:

doctype html
html 
  include ./header.jade
  body
    h1 This is body
header.jade文件內容如下:

head
  title jade-include測試
  meta(charset='utf-8')

生成的HTML文件如下:

<!DOCTYPE html>
<html> 
  <head>
    <title>jade-include測試</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>This is body</h1>
  </body>
</html>

內容沒錯,注意代碼中的縮進,在body.jade中使用include時,include是和body同級,因爲此時直接把header.jade中的內容拿過來放在include位置(保持原有縮進)處,head會和body同級,但是在使用中如果把include頂個和html同級,在header文件中把所有的內容向後縮進兩格,這樣的結果是不行的,編譯會出錯,不知道爲什麼

另外在使用include時還有一個問題,就是吧head標籤和html放在一起的時候,具體例子如下:

header中的內容:

doctype html
html 
  head
    title jade-include測試
    meta(charset='utf-8')

body中的內容:

include ./header.jade
  body
    h1 This is body
理論上講此時body和head同級,會出現理想中的排版順序,就像上面的正常順序一樣,但是最後生成的HTML如下:

<!DOCTYPE html>
<html> 
  <head>
    <title>jade-include測試
      <body>
        <h1>This is body</h1>
      </body>
    </title>
    <meta charset="utf-8">
  </head>
</html>
很明顯不對,不是自己想要的,所以此方法不能取,但是爲什麼我也不知道,另外還有一種就是按照上面的錯誤來看是把body寫成head的子元素了,那我們吧body中的標籤向前取消兩個空格縮進,看一下效果

<!DOCTYPE html>
<html> 
  <head>
    <title>jade-include測試</title>
    <meta charset="utf-8">
  </head>
</html>
<body>
  <h1>This is body</h1>
</body>
此時body又編程和html同級別的元素,所以此方法也不能用


entends:

我們使用entends和block語法試試

hearder中內容如下:

doctype html
html
  head
    title 主頁
    meta(charset='utf-8')
  block body
body中的內容:

extends header.jade
block body
  body
    h1 This is login

注意看語法的使用方法其中的縮進,header中block放在和head同一級別中,因爲在body中的第一個標籤是body,是要和head同級的

在body中block放在頂格位置,因爲此位置是要把整個header中的元素拿過來放在這,之後就是html第一級,head和body同爲第二級

extends 相當於是導入此header文件到body中

最後生成的HTML內容如下:


<!DOCTYPE html>
<html>
  <head>
    <title>主頁</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>This is login</h1>
  </body>
</html>






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章