Jade（Pug） 模板引擎使用文檔
阿新 • • 發佈：2018-06-23
rst per CA HR com awr 參數 lec 應該
本篇內容
- 在 Express 中調用 jade 模板引擎
- jade 變量調用
- if 判斷
- 循環
- Case 選擇
- 在模板中調用其他語言
- 可重用的 jade 塊 (Mixins)
- 模板包含 (Includes)
- 模板引用 (Extends)
在 Express 中調用 jade 模板引擎
var express = require(‘express‘); var http = require(‘http‘); var app = express(); app.set(‘view engine‘, ‘jade‘); // 設置模板引擎 app.set(‘views‘, __dirname); // 設置模板相對路徑(相對當前目錄) app.get(‘/‘, function(req, res) { res.render(‘test‘); // 調用當前路徑下的 test.jade 模板 }) var server = http.createServer(app); server.listen(3002); console.log(‘server started on http://127.0.0.1:3002/‘);
test.jade
p hello jade //<p>hello jade</p>如果文本比較長可以使用
p
| foo bar baz
| rawr rawr
//或
p.
foo bar baz
rawr rawr
//結果為
<p>foo bar baz rawr rawr</p>標簽和屬性
傳統的HTML標簽寫尖括號很麻煩，Jade裏可以省略尖括號，直接寫標簽名。標簽間的嵌套關系用換行加空格來實現。緊接在標簽名後加上.xx或#xx，就能給標簽添加css類名和id
doctype html html head body h1.titleClass#titleID My First Jade Page //編譯出來的結果 <!DOCTYPE html> <html> <head></head> <body> <h1 id="titleID" class="titleClass">My First Jade Page</h1> </body> </html>