封裝元件

為了讓你的元件可以與其他元件一起使用，或是有所區隔，你需要替元件再次封裝，我們建議封裝的元件名稱全部大寫。

封裝單一元件

透過下列方式將一個元件封裝起來供未來使用。

//- 你原先的 List 元件
mixin list()
    ... 元件內容 ...


//- 封裝 List 元件
mixin LIST()

    //- 替你的元件在 HTML 上命名
    my-list
        +list

接著你就可以透過下列方式使用你封裝後的元件。

//- 渲染 List 元件
+LIST()

渲染結果如下。

<my-list>
    ... 元件內容 ...
</my-list>

封裝多個元件

你可以封裝多個元件成為單一個元件，像這樣。

//- 標頭元件
mixin header(title)
    h1=$title

//- 內容元件
mixin content(content)
    =$content

//- 頁腳元件
mixin footer(time)
    time 發表於 #{$time}


//- 封裝上列三個元件為 ARTICLE 元件
mixin ARTICLE(title, content, time)

    //- 替你的元件在 HTML 上命名
    meow-article
        +header($title)
        +content($content)
        +footer($time)

接著這樣使用你封裝後的元件。

+ARTICLE('這是標題', '今天天氣真好呢！', '2016-07-13')

就會有下列渲染效果

<meow-article>
    <h1>這是標題</h1>
    今天天氣真好呢！
    <time>2016-07-13</time>
</meow-article>