句法

Created: November-22, 2018

Pug（舊名稱是 Jade）是一種用於編寫 HTML 的乾淨，空格敏感的語法。這是一個簡單的例子：

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

以 HTML 格式生成以下輸出

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

以下是將 Pug 呈現為 HTML 程式碼的規則：

通過縮排文字，將構建 HTML 樹。縮排可以與空格或製表符一起使用。這不能混！
HTML 標籤是在沒有 < 和 > 的情況下編寫的。屬性是圓括號之間的位置。
可以用//或  進行評論。使用//- 的評論在呈現的 HTML 中不可見。
隨著 #{ } 將提供一個提供的模型：#{header} #{user.username}。
沒有大括號的 #（hashtag）將使用文字作為 ID 建立 div 元素。示例 #myID 將呈現為 <div id="myID"></div>。
使用 . （point） 將使用 class 屬性生成 div。示例：.myClass 將呈現為 <div class="myClass"></div>
使用 = （等號後跟空格），將檢索變數。Exaple：h1= title
!=（不等於）在沒有轉義的情況下檢索變數。
使用 -（連字元）可以編寫 JavaScript。示例：- console.log("foo");
連結到外部檔案可以如下：script(src="/js/chat.js")
內聯指令碼可以使用這個 script.。
新增基本佈局的指令：extends ../layout。
在 layout.pug 發生插入使用 block content
部分的使用可以有兩種方式：
1. 部分：!= partial(template file name/options)。
2. 包括：include ../includes/footer
包含的倒數是 extend。這允許從頁面“html block parts”傳送到佈局頁面，例如：extend layout
連線發生在+（plus）或 #（hashtag）char 上。該加號用於 JavaScript 程式碼。HTML 中的#標籤並呈現內容：`p 名稱為：#{myName}