混入

混入允許您建立可重複使用的 Pug 區塊。

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

混入編譯成函式，並且可以帶有參數

<ul>
  <li class="pet">cat</li>
  <li class="pet">dog</li>
  <li class="pet">pig</li>
</ul>

混入區塊

混入也可以帶入一個 Pug 區塊作為內容

<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>No content provided</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>This is my</p>
    <p>Amazing article</p>
  </div>
</div>

混入屬性

混入也會取得一個隱含的 attributes 參數，這個參數來自傳遞給混入的屬性

<a class="btn" href="/foo">foo</a>

注意

預設情況下，attributes 中的值已經過跳脫處理！您應使用 != 來避免再次跳脫它們。（另請參閱未跳脫屬性。）

您也可以使用混合搭配 &attributes

<a class="btn" href="/foo">foo</a>

注意

語法 +link(class="btn") 也有效，且等同於 +link()(class="btn")，因為 Pug 會嘗試偵測括號的內容是屬性還是引數。儘管如此，我們鼓勵您使用第二種語法，因為您明確地傳遞沒有引數，而且您確保第一個括號是引數清單。

預設引數值

您也可以為 arguments 設定預設值。與 ES6 中設定預設函式參數相同。

<div class="article">
  <div class="article-wrapper">
    <h1>Default Title</h1>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
  </div>
</div>

Rest 引數

您可以使用「rest 引數」語法撰寫需要未知數量的引數的混合搭配。

<ul id="my-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

混入

混入區塊 ¶

混入屬性 ¶

注意

注意

預設引數值 ¶

Rest 引數 ¶

混入區塊

混入屬性

預設引數值

Rest 引數