Pug模板繼承與拓展

Pug 支持使用 block 和 extends 關鍵字進行模板的繼承

block代表一個代碼塊

一、代碼塊的替換

如下：便有三個代碼塊block scripts,block content,block foot

//- layout.pug
html
  head
    title 我的站點 - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p 一些頁腳的內容

 

如替換其中的代碼塊

在一個新的pug文件中 ，首先要用extends繼承某個pug, 然后定義相同名稱的代碼塊即可實現替換

extends layout.pug

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  - var pets = ['貓', '狗']
  each petName in pets
    include pet.pug

 

在覆蓋一個代碼塊的同時在該代碼塊內添加新的代碼塊

//- sub-layout.pug
extends layout.pug
//- 覆蓋原有的content代碼塊，並添加了兩個子代碼塊 sidebar primary
block content
  .sidebar
    block sidebar
      p 什么都沒有
  .primary
    block primary
      p 什么都沒有

 

二、塊內容的添補 append / prepend

prepend（向頭部添加內容），或者 append（向尾部添加內容）一個塊。 

下面代碼實現了在 代碼塊head里面添加了兩個script

//- page.pug
extends layout.pug

block append head
  script(src='/vendor/three.js')
  script(src='/game.js')