Jade之Template Inheritance

Template inheritance

jade支持通过关键字block和extends来实现模板继承。

比如，在layout.jade写上如下代码

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

中间的block content代表块，content表示块名字。

另一个index.jade文件中可以继承layout.jade文件。

extends ./layout.jade

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

block content
  h1= title
  each pet in pets
    include pet

在index.jade文件中，父模板中的block content块将在子模板中被重写（包括块内内容），即编译index.jade生成的html文件中，content块中将不含有<p>Nothing</p>这部分代码。

这是一个递归的过程。

extends ...表示从layout.jade文件中将所有代码已经继承过来了。

extends后可以加需要继承文件的相对路径，若在同一文件下，用不含后缀名的文件名即可。

Append block、Prepend block

对于之前的layout.jade代码中的block scripts块，若想在index.jade中的block scripts块中继续添加script(src='/jquery.js')这条语句，即生成的index.html中block scripts中包含两条script语句，那么只需将index.jade中block scripts改为block append scripts或block prepend scripts即可。如下：

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

或者如下

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

这两种方法的区别在于，prepend会先编译子模板块内的内容再编译父模板块内的内容，append则相反。