範本繼承

Pug 支援範本繼承。範本繼承透過 block 和 extends 關鍵字運作。

在範本中，block 僅僅是子範本可以取代的 Pug「區塊」。此程序是遞迴的。

Pug 區塊可以提供預設內容（如果合適）。不過，提供預設內容純粹是選項。以下範例定義了 block scripts、block content 和 block foot。

//- layout.pug
html
  head
    title My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

若要延伸此配置，請建立一個新檔案，並使用 extends 指令和父範本的路徑。（如果未提供檔案副檔名，則會自動將 .pug 附加到檔案名稱。）然後，定義一個或多個區塊來覆寫父區塊內容。

在下方，請注意 foot 區塊並未重新定義，因此它將使用父項的預設值並輸出「一些頁尾內容」。

//- page-a.pug
extends layout.pug

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  - var pets = ['cat', 'dog']
  each petName in pets
    include pet.pug

//- pet.pug
p= petName

也可以覆寫區塊以提供其他區塊，如下列範例所示。正如範例所示，content 現在公開一個 sidebar 和 primary 區塊以供覆寫。（或者，子範本可以完全覆寫 content。）

//- sub-layout.pug
extends layout.pug

block content
  .sidebar
    block sidebar
      p nothing
  .primary
    block primary
      p nothing

//- page-b.pug
extends sub-layout.pug

block content
  .sidebar
    block sidebar
      p nothing
  .primary
    block primary
      p nothing

區塊 append / prepend

Pug 允許您replace（預設）、prepend 或 append 區塊。

假設您在 head 區塊中有一些預設指令碼，希望在每個頁面上使用。您可以這樣做

//- layout.pug
html
  head
    block head
      script(src='/vendor/jquery.js')
      script(src='/vendor/caustic.js')
  body
    block content

現在，考慮您的 JavaScript 遊戲頁面。您想要一些遊戲相關指令碼以及這些預設值。您可以簡單地append 區塊

//- page.pug
extends layout.pug

block append head
  script(src='/vendor/three.js')
  script(src='/game.js')

在使用 block append 或 block prepend 時，字詞「block」是可選的

//- page.pug
extends layout

append head
  script(src='/vendor/three.js')
  script(src='/game.js')

常見錯誤

Pug 的範本繼承是一項強大的功能，可讓您將複雜的頁面範本結構分割成較小、較簡單的檔案。但是，如果您將許多範本串連在一起，可能會讓事情變得更複雜。

請注意，只有已命名區塊和混合定義可以出現在子範本的最上層（未縮排）層級。這很重要！父範本定義頁面的整體結構，而子範本只能append、prepend 或替換特定標記和邏輯區塊。如果子範本嘗試在區塊外新增內容，Pug 將無法得知在最終頁面中將其置於何處。

這包含 未緩衝程式碼，它也可以包含標記。如果你需要在子範本中定義變數，你可以透過一些不同的方式來執行

基於相同的原因，Pug 的 緩衝註解 無法出現在延伸範本的頂層：它們會產生 HTML 註解，而這些註解在結果 HTML 中沒有地方可去。（不過，未緩衝 Pug 註解仍然可以在任何地方使用。）