Block 一张图秒懂jadeBlock 语法

Block 一张图秒懂jadeBlock 语法_第1张图片

在Jade中,允许使用block结合extends关键字预定义一个模板供其他模板调用。调用时,如果父模板中定义了某块内容,而子模板中没有定义时,默认显示父模板中的内容。Jade通过这种方法实现模板的继承和重用。+

除了继承模板,还可以使用append和prepend对继承的模板进行扩展。

在Jade中,block的内容是可选的,如果需要也可以指定默认内容。
block声明方式:

block blockName
  content
layout.jade
- var title = 'blog'
html
  head
    title My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
page.jade
extends ./layout.jade

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

page.html

<html>
  <head>
    <title>My Site - blogtitle>
    <script src="/bootstrap.js">script>
  head>
  <body>
    <h1>titleh1>
  body>
html>

在上例中,在layout.jade中声明了两个block,其中block scripts制定了默认内容,而block content没有指定默认内容。在page.jade中使用extends继承了layout.jade,并且默认覆盖了layout.jade中的block scripts,但是没有指定block content的内容,所以block content中还是layout.jade中的内容。
3.1.2 Block Append

在2.2.1节中说过默认情况下子模板重写父模板中的block是直接覆盖,但是我们有时候需要的不是完全覆盖,二是添加新内容。那么我们就需要用到append和prepend。
append是在父模板中block内容后边追加内容:

page2.jade
extends ./layout.jade

block append scripts
  script(src='/bootstrap.js')
page2.html
<html>
  <head>
    <title>My Site - blogtitle>
    <script src="/jquery.js">script>
    <script src="/bootstrap.js">script>
  head>
  <body>
  body>
html>

很显然,在父模板中block scripts的内容是,然后我们在page2.jade中使用block append又在原来block后新添加了一个’script’标签,而不是完全覆盖。
3.1.3 Block Prepend

除了可以向3.1.2节一样向Block后边添加新的内容,同样也可以使用block prepend向block内容之前添加内容。 page3.jade
Jade:

extends ./layout.jade

block prepend scripts
  script(src='/bootstrap.js')
HTML:
<html>
  <head>
    <title>My Site - blogtitle>
    <script src="/bootstrap.js">script>
    <script src="/jquery.js">script>
  head>
  <body>
  body>
html>

3.1.4 Block简写

在使用block append和block prepend时,block是可选的,简写形式可将其省略。
Jade:

extends ./layout.jade

prepend scripts
  script(src='/bootstrap.js')
HTML:
<html>
  <head>
    <title>My Site - blogtitle>
    <script src="/bootstrap.js">script>
    <script src="/jquery.js">script>
  head>
  <body>
  body>
html>

省略block后效果和3.1.3节是一样的。

你可能感兴趣的:(jade,Javascript,jade)