Jade Mixins · alincode's blog

Posted at 2016-03-29 Jade Mixins

一般在 view engine 中，要如何有效的控制重複的 code，就是把重複的 code 封裝到另一個檔案，需要的時候直接寫 include，Jade 也有提供這樣的功能。

sails new jade-sandbox --template=jade

static-list-page.jade

include ./mixins/static-list

block body
  +static-list

mixin/static-list.jade

mixin static-list
  ul
    li AAA
    li BBB
    li CCC

輸出格式

<ul>
  <li>AAA</li>
  <li>BBB</li>
  <li>CCC</li>
</ul>

color-page.jade

include ./mixins/color

block body
  ul
    +color('yellow')
    +color('red')
    +color('blue')

mixins/color.jade

1 2	mixin color(colorName) li.color= colorName

輸出格式

<ul>
  <li class="color">yellow</li>
  <li class="color">red</li>
  <li class="color">blue</li>
</ul>

person-page.jade

include ./mixins/person

block body
  ul
    +person("Alin")#first
    +person("John")(title="一個好人")
    +person("Bill").last

mixins/person.jade

1 2	mixin person(name) div&attributes(attributes)= name

輸出格式

<ul>
  <div id="first">Alin</div>
  <div title="一個好人">John</div>
  <div class="last">Bill</div>
</ul

活版印字