jade玉石入門


備註

Pug (以前稱為jade)是一個高性能模板引擎,受Haml的影響很大,並且使用JavaScript實現Node.js和瀏覽器。

  1. 生成HTML
  2. 支持動態代碼
  3. 支持可重用性(DRY)

主頁

GitHub上的存儲庫

版本

發布日期
0.0.2 2010-07-03
1.0.0 2013年12月22日
1.11.0 2015年6月12日

安裝或設置

在開始使用Pug進行編碼之前,您需要有一些先決條件。

您需要安裝:

安裝NodeJS後,您可以在終端中檢查正確的安裝:

$ node -v
 

如果成功,它將打印Node的版本號。

要將Pug安裝到您的項目中,首選且簡單的方法是通過NPM(節點包管理器)。如果您熟悉它,只需在終端中執行以下代碼:

$ npm install pug
 

如果要全局安裝,可以鍵入:

$ npm install pug-cli -g
 

並運行

$ pug --help
 

句法

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代碼的規則:

  1. 通過縮進文本,將構建HTML樹。縮進可以與空格或製表符一起使用。這不能混!
  2. HTML標記是在沒有<> 情況下編寫的。屬性是圓括號之間的位置。
  3. 可以使用//<!-- --> 。帶有//- 註釋在呈現的HTML中不可見。
  4. 使用#{ } 將生成提供的模型: #{header} #{user.username}
  5. 沒有大括號的# (hashtag)將使用文本作為ID創建div 元素。示例#myID 將呈現為<div id="myID"></div>
  6. 有了. (point)將使用class屬性生成div 。示例: .myClass 將呈現為<div class="myClass"></div>
  7. 使用= (等號後跟空格),將檢索變量。 Exaple: h1= title
  8. A != (不等於)在沒有轉義的情況下檢索變量。
  9. A - (連字符)允許您編寫JavaScript。示例: - console.log("foo");
  10. 鏈接到外部文件可以如下: script(src="/js/chat.js")
  11. 內聯腳本可以使用此script.
  12. 添加基本​​佈局的指令: extends ../layout
  13. layout.pug 發生使用block content 插入
  14. 部分的使用可以有兩種方式:
    1. by partial: != partial(template file name/options)
    2. 通過包括: include ../includes/footer
  15. include的倒數是extend 。這允許從頁面“html block 部件”發送到佈局頁面,例如: extend layout
  16. 連接發生在+ (加號)或## 標籤)字符處。該加號用於JavaScript代碼。 HTML中的#標籤並呈現內容:`p名稱為:#{myName}

使用與Node.js的哈巴狗

var pug = require('pug');

// compile
var fn = pug.compile('string of pug', options);
var html = fn(locals);

// render
var html = pug.render('string of pug', merge(options, locals));

// renderFile
var html = pug.renderFile('filename.pug', merge(options, locals));
 

選項

  • filename在例外中使用,在使用includes時需要
  • compileDebug如果為false,則不編譯調試工具
  • 相當添加漂移縮進空格輸出(默認為false)