純文字

Pug 提供四種取得純文字的方法，也就是任何程式碼或文字內容，幾乎未經處理，直接進入已呈現的 HTML。它們在不同的情況下很有用。

純文字仍然使用標籤和字串內插，但該行開頭的字詞不是 Pug 標籤。而且因為純文字未經過轉譯，所以您也可以包含實際的 HTML。

這裡有一個常見的陷阱，就是管理已呈現 HTML 中的空白。我們會在本文的最後討論這個問題。

內嵌在標籤中

加入純文字最簡單的方法是內嵌。該行開頭的字詞就是標籤本身。標籤和一個空白之後的所有內容，將會是該標籤的文字內容。當純文字內容很短（或您不介意行數很長）時，這種方法最有用。

實際 HTML

整行開頭為左尖括號 (<) 時，也會被視為純文字，偶爾可能會在不方便的地方撰寫實際 HTML 標籤時很有用。例如，一個使用案例是條件式註解。由於實際 HTML 標籤未經過處理，因此與 Pug 標籤不同，它們不會自動關閉。

管道文字

將行加上管道字元 (|) 前綴，是加入純文字到範本的另一種方法。此方法可用於將純文字與內嵌標籤混合，我們稍後會在「空白控制」區段中討論。

區塊在標籤中

您可能經常需要標籤內的大段文字。一個很好的範例是在 script 和 style 標籤中撰寫 JavaScript 和 CSS 程式碼。若要執行此操作，只需在標籤名稱後方或在標籤具有 屬性 時，於閉合括號後方加上一個 .。

標籤與點之間不應有空格。標籤的純文字內容必須縮排一級

您也可以在父標籤內的其他標籤之後建立純文字的點區塊。

空白控制

管理已呈現 HTML 的空白是學習 Pug 最棘手的部分之一。不過別擔心，您很快就能掌握訣竅。

您只需要記住關於空白運作方式的兩個重點。編譯成 HTML 時

  1. Pug 會移除縮排，以及元素之間的所有空白。
    • 因此，HTML 元素的閉合標籤會接觸到下一個元素的開啟標籤。對於段落等區塊層級元素，這通常不是問題，因為它們仍會在網路瀏覽器中呈現為獨立的段落（除非您已變更其 CSS display 屬性）。不過，請參閱以下所述的方法，以了解何時需要在元素之間插入空白。
  2. Pug 會保留元素內部的空白，包括
    • 文字行中段的所有空白。
    • 超出區塊縮排的開頭空白。
    • 尾隨空白。
    • 純文字區塊內的換行符，或連續管道線之間的換行符。

因此…Pug 會捨棄標籤之間的空白，但保留標籤內的空白。這裡的價值在於它讓您可以完全控制標籤和/或純文字是否應該接觸。它甚至讓您可以在字詞中間放置標籤。

折衷之處在於它要求您思考並控制標籤和文字是否接觸。

如果您需要文字和/或標籤接觸 — 也許您需要句末的句點出現在超連結之外 — 這很容易，因為這基本上就是發生的事情，除非您另有指示 Pug。

如果您需要新增空白，您有幾個選項

你可以新增一個或多個空的管道線，也就是一個管道，後面有空格或沒有任何東西。這會在呈現的 HTML 中插入空白。

如果你的內嵌標籤不需要很多屬性，你可能會發現使用標籤內插，或在純文字區塊中使用字面 HTML 最容易。

根據你需要的空白位置，你可以在文字開頭（區塊縮排、管道字元和/或標籤之後）新增一個額外的空格。或者你可以在文字結尾新增一個尾隨空格。

注意這裡的尾隨和前導空格

上述解決方案運作得很好，但不可否認可能有點危險：許多程式碼編輯器在儲存時預設會移除尾隨空白。你和所有貢獻者可能必須設定編輯器，以防止自動移除尾隨空白。