建立元件

現在讓我們教你如何在亞凡芽上建立一個元件。

命名

你需要先替你的元件命名，如此一來才能夠在稍後使用它們。

讓我們先替這個元件命名成 moonDalan 吧。

//- 名為 moonDalan 的元件
mixin moonDalan

劃分

接著替你的元件清楚地規劃區塊，先前提到元件有三大部分：「樣式」、「模板」、「程式」。

透過這三個區塊替元件做區分，像是下面這樣。

//- 名為 moonDalan 的元件
mixin moonDalan

    //- 樣式

    //- 模板

    //- 程式

模板

現在我們要渲染出一個按鈕，這個時候我們在「模板」的部分進行修改，

要做出一個按鈕很簡單，只需要撰寫一般常用的 HTML 或者亞凡芽標籤即可。

//- 名為 moonDalan 的元件
mixin moonDalan

    //- 樣式

    //- 模板
    button
        我是按鈕喔！

    //- 程式

樣式

現在這個按鈕沒有附帶任何的樣式，是瀏覽器預設的樣貌，

如果我們想要美化我們的元件，我們可以在元件裡撰寫 CSS 或者其他的樣式語言，像是這樣。

//- 名為 moonDalan 的元件
mixin moonDalan

    //- 樣式
    style.
        button
        {
            font-size       : 14px;
            color           : #FFF;
            background-color: #00ADEA;
        }

    //- 模板
    button
        我是按鈕！

    //- 程式

程式、互動

現在這個元件無聊至極，所以我們要在程式的部分增加一些能夠和使用者互動的功能，

我們假設按下這個按鈕能夠呼叫 speak() 的函式並且跳出一個「Moon, Dalan!」的訊息，可以這樣子做。

//- 名為 moonDalan 的元件
mixin moonDalan

    //- 樣式
    style.
        button
        {
            font-size       : 14px;
            color           : #FFF;
            background-color: #00ADEA;
        }

    //- 模板
    button(onClick='speak();')
        我是按鈕！

    //- 程式
    script.
        function speak()
        {
            alert('Moon, Dalan!');
        }

套用你的元件

現在你的第一個元件已經準備好了，這個時候如果要套用這個元件，你只需要透過 +元件名稱 就能夠渲染你的元件，

我們假設剛才的元件是存到 component.jade，這個時候你只需要在你的網頁上這麼做。

//- 引用元件
include component

//- 渲染元件
+moonDalan