模板继承

优质
小牛编辑
118浏览
2023-12-01

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

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

html
  head
    h1 My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

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

extends extend-layout

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

block content
  h1= title
  each pet in pets
    include pet

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

extends regular-layout

block content
  .sidebar
    block sidebar
      p nothing
  .primary
    block primary
      p nothing