Jade（Pug） 模板引擎使用文檔
本篇內容
- 在 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.jadejavascript
p hello jade //<p>hello jade</p>
若是文本比較長可使用css
p | foo bar baz | rawr rawr //或 p. foo bar baz rawr rawr //結果爲 <p>foo bar baz rawr rawr</p>
標籤和屬性
傳統的HTML標籤寫尖括號很麻煩，Jade裏能夠省略尖括號，直接寫標籤名。標籤間的嵌套關係用換行加空格來實現。緊接在標籤名後加上.xx或#xx，就能給標籤添加css類名和idhtml
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>
標籤屬性的正統寫法應該是寫入()括號內，多個屬性用逗號隔開（css類名和id也能夠寫入()括號內）java
a(href='http://www.adoctors.cn, target='_blank') 個人主頁 //編譯出來的結果 <a href="http://www.adoctors.cn" target="_blank">個人主頁</a>
HTML裏最經常使用的標籤就是div了，因此Jade提供了第二種簡化寫法，若是不寫標籤名默認就是div：jquery
.divClass#divID 我是一個div //編譯出來的結果 <div id="divID" class="divClass">我是一個div</div>
這裏注意一下 =默認會轉義內容express
p= 'Welcome to wandoujia fe, we want <b>you</b>' //轉換爲 <p>Welcome to wandoujia fe, we want <b>you</b></p>
若是不想被轉義的，在=前面添加!api
p!= 'Welcome to wandoujia fe, we want <b>you</b>' //轉換爲 <p>Welcome to wandoujia fe, we want <b>you</b></p>
jade 變量調用
{表達式}
- =表達式
- !=表達式
注意：符號 - 開頭在 jade 中屬於服務端執行的代碼markdown
- console.log('hello'); // 這段代碼在服務端執行
- var s = 'hello world' // 在服務端空間中定義變量
p #{s}
p= s
//或
- var s = 'world'
p hello #{s}
p= 'hello' + s
會被渲染成爲app
<p>hello world</p> <p>hello world</p>
方式1能夠自由的嵌入各個地方less
方式2返回的是表達式的值
除了直接在 jade 模板中定義變量，更常見的應用是在 express 中調用 res.render 方法的時候將變量一塊兒傳遞進模板的空間中，例如這樣：
res.render(test, {
s: 'hello world'
});
調用模板的時候，在 jade 模板中也能夠如上方那樣直接調用 s 這個變量
變量中的特殊字符會被轉義，如：
- var name = '<script></script>'
| #{name}
//結果
<script></script>
如要獲得不轉義的，用!替換#來調用
- var name = '<script></script>'
| !{name}
//結果
<script></script>
|其實就是管道，通常也能夠定義一段文本
if 判斷
//方式1：
- var user = { description: '我喜歡貓' }
- if (user.description)
h2 描述
p.description= user.description
- else
h1 描述
p.description 用戶無描述
//結果
<div id="user">
<h2>描述</h2>
<p class="description">我喜歡貓</p>
</div>
//方式2：（方式1的簡寫）
- var user = { description: '我喜歡貓' }
#user
if user.description
h2 描述
p.description= user.description
else
h1 描述
p.description 用戶無描述
//方式3：
使用 Unless 相似於 if 後的表達式加上了 ! 取反
//unless 是 jade 提供的關鍵字
- var user = { name: 'Alan', isVip: false }
unless user.isVip
p 親愛的 #{user.name} 您並非 VIP
//結果
<p>親愛的 Alan 您並非 VIP</p>
循環
for循環
- var array = [1,2,3]
ul
- for (var i = 0; i < array.length; ++i) {
li hello #{array[i]}
- }
//結果
<ul>
<li>hello 1</li>
<li>hello 2</li>
<li>hello 3</li>
</ul>
each
ul
each val, index in ['西瓜', '蘋果', '梨子']
li= index + ': ' + val
//或
ul
each val, index in {1:'蘋果',2:'梨子',3:'喬布斯'}
li= index + ': ' + val
//結果
<ul>
<li>0: 西瓜</li>
<li>1: 蘋果</li>
<li>2: 梨子</li>
</ul>
Case
- var friends = 10
case friends
when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends
//結果
<p>you have 10 friends</p>
//簡寫
- var friends = 1
case friends
when 0: p you have no friends
when 1: p you have a friend
default: p you have #{friends} friends
在模板中調用其餘語言
:markdown
# Markdown 標題
這裏使用的是 MarkDown 格式
script
:coffee
console.log '這裏是 coffee script'
//結果
<h1>Markdown 標題</h1>
<p>這裏使用的是 MarkDown 格式</p>
<script>console.log('這裏是 coffee script')</script>
可重用的 jade 塊 (Mixins)
//- 申明可重用的塊
mixin list
ul
li foo
li bar
li baz
//- 調用
+list()
+list()
//結果
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
你也能夠給這個重用塊指定參數
mixin pets(pets)
ul.pets
- each pet in pets
li= pet
+pets(['cat', 'dog', 'pig'])
//結果
<ul class="pets">
<li>cat</li>
<li>dog</li>
<li>pig</li>
</ul>
Mixins 同時也支持在外部傳入 jade 塊
mixin article(title)
.article
.article-wrapper
h1= title
//- block 爲 jade 關鍵字表明外部傳入的塊
if block
block
else
p 該文章沒有內容
+article('Hello world')
+article('Hello Jade')
p 這裏是外部傳入的塊
p 再寫兩句
//結果
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>該文章沒有內容</p>
</div>
</div>
<div class="article">
<div class="article-wrapper">
<h1>Hello Jade</h1>
<p>這裏是外部傳入的塊</p>
<p>再寫兩句</p>
</div>
</div>
Mixins 同時也能夠從外部獲取屬性。
mixin link(href, name)
a(class!=attributes.class, href=href)= name
+link('/foo', 'foo')(class="btn")
//結果
<a href="/foo" class="btn">foo</a>
模板包含 (Includes)
你可使用 Includes 在模板中包含其餘模板的內容。就像 PHP 裏的 include 同樣。
index.jade
doctype html html include includes/head body h1 個人網站 p 歡迎來到個人網站。 include includes/foot
includes/head.jade
head title 個人網站 script(src='/javascripts/jquery.js') script(src='/javascripts/app.js')
includes/foot.jade
#footer p Copyright (c) foobar
調用 index.jade 的結果：
<!doctype html>
<html>
<head>
<title>個人網站</title>
<script src='/javascripts/jquery.js'></script>
<script src='/javascripts/app.js'></script>
</head>
<body>
<h1>個人網站</h1>
<p>歡迎來到個人網站。</p>
<div id="footer">
<p>Copyright (c) foobar</p>
</div>
</body>
</html>
模板引用 (Extends)
經過 Extends 能夠引用外部的 jade 塊，感受比 include 要好用
layout.jade
doctype html
html
head
title 個人網站
meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
link(type="text/css",rel="stylesheet",href="/css/style.css")
script(src="/js/lib/jquery-1.8.0.min.js",type="text/javascript")
body //注意這句
block content //注意這句
article.jade
//- extends 拓展調用 layout.jade extends ../layout block content //注意這句 h1 文章列表 p ***憶賈大山 ***:將啓動新核電項目 p ***:"歲月號"船長等人棄船行爲等同於殺人 p **疑換膚：眼袋黑眼圈全無 領導人整容疑雲 p 世界最大兔子重45斤長逾1米 1年吃2萬元食物
res.render(‘article’) 的結果：
<html>
<head>
<title>個人網站</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<link type="text/css" rel="stylesheet" href="/css/style.css"></head>
<script src="/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
</head>
<body>
<h1>文章列表</h1>
<p>***憶賈大山 ***:將啓動新核電項目</p>
<p>***:"歲月號"船長等人棄船行爲等同於殺人</p>
<p>**疑換膚：眼袋黑眼圈全無 領導人整容疑雲</p>
<p>世界最大兔子重45斤長逾1米 1年吃2萬元食物</p>
</body>
</html>
jade中使用js
script
| window.onload =function(){
| var box =123;
| };
解析後爲：
<script>
window.onload =function(){
var box =123;
}
</script>
更方便的方法：
script. //加一個點號，全部的下一級內容都是原樣輸出
window.onload =function(){
var box =123;
};
另外一種方法：經過引入方式來
include a.js //引入a.js文件,格式爲字符串，引用路徑不加‘’
注意不要空格和tab混用
相關文章
- 1. jade | pug 模板引擎 API
- 2. pug模板引擎——jade
- 3. pug模板引擎(原jade)
- 4. Jade/Pug模板引擎
- 5. Jade/pug-HTML模板引擎
- 6. Express 文檔（使用模板引擎）
- 7. 前端模板引擎 —— 帶你學習Jade / Pug 模板引擎
- 8. Jade 模板引擎使用
- 9. Webpack 3.x 嘗試使用Pug(Jade)模板引擎
- 10. Jade - 模板引擎
- 更多相關文章...
- • ASP 引用文件 - ASP 教程
- • WSDL 文檔 - WSDL 教程
- • 委託模式
- • Composer 安裝與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章