模板继承

Jade 支持通过 blockextends 关键字来实现模板继承。 一个块就是一个Jade的"block" ,它将在子模板中实现,同时是支持递归的。

Jade 块如果没有内容,Jade会添加默认内容,下面的代码默认会输出block scripts, block content, 和 block foot.

  1. html
  2. head
  3. h1 My Site - #{title}
  4. block scripts
  5. script(src='/jquery.js')
  6. body
  7. block content
  8. block foot
  9. #footer
  10. p some footer content

现在我们来继承这个布局,简单创建一个新文件,像下面那样直接使用extends,给定路径(可以选择带.jade扩展名或者不带). 你可以定义一个或者更多的块来覆盖父级块内容, 注意到这里的foot没有定义,所以它还会输出父级的"some footer content"。

  1. extends extend-layout
  2. block scripts
  3. script(src='/jquery.js')
  4. script(src='/pets.js')
  5. block content
  6. h1= title
  7. each pet in pets
  8. include pet

同样可以在一个子块里添加块,就像下面实现的块content里又定义了两个可以被实现的块sidebarprimary,或者子模板直接实现content

  1. extends regular-layout
  2. block content
  3. .sidebar
  4. block sidebar
  5. p nothing
  6. .primary
  7. block primary
  8. p nothing