Pug
簡介
Pug,原名 Jade, 是一個很流行的 HTML 模板引擎,后來由于 Jade 被注冊為商標的原因,改名為 Pug,中文官網在這里。
安裝和使用
npm install pug -g如果需要使用命令行對 pug 模板進行編譯,還需要安裝 pug-cli
npm install pug-cli -gPug 和原來用過的 Smarty 模板、Ractive 模板類似,都是通過一個函數(Pug中是 pug.compile())將模板便以為 JavaScript 函數,函數中通過{}傳入變量。最終編譯結果就是 HTML 代碼。
創建一個 hello.pug
divp Hello Pug在命令行輸入:
pug hello.pug -w就會編譯出 hello.html
<div><p>Hello Pug</p> <div>其中 -w 選項為監聽模式,自動相應模板的改動并且實時編譯
使用 pug --help 查看命令行幫助
看一些基本的用法:
# 編譯 templates 文件夾下所有模板 $ pug templates# 編譯 foo 文件夾下和 bar 文件夾下的模板至 tmp 文件夾(絕對路徑) $ pug foo bar --out /tmp# 編譯 foo.pug 并美化 html 代碼 $ pug foo.pug -P在 webtorm 中配置 pug 的 watcher
關鍵點就是找到 pug.cmd 文件的全局位置:
C:\Users\xxxxx\AppData\Roaming\npm\pug.cmd
其中 xxxx 是用戶名
這樣在 pug 模板的同級目錄下, websotrm就會自動編譯一份 HTML
這樣的缺點是代碼的格式還需要手動調整,并且 pug 文件改變,HTML 格式又自動變回去了
在 Arguments 增加 -P 參數也同樣可以美化代碼
在線轉換
html2jade 這個網站可以在線將 HTML 代碼轉換為 jade 代碼
語法
基礎
pug 模板中省略了 HTML 中的標簽<>,并且使用縮進代表包含關系,標簽后空格內容表示標簽中內容
doctype html headmeta(charset='utf-8')title Hello Pug bodydivp Hello Pug編譯結果
<!DOCTYPE html> <head><meta charset="utf-8"><title>Hello Pug</title> </head> <body><div><p>Hello Pug</p></div> </body>標簽
Pug知道那個元素自閉合的,當然如果想要手動添加,可以直接在標簽后緊接一個 / 來聲明此標簽是自閉合的
labelinput(type="text")/: 是一種省略寫法,目的僅僅是節省空間
label: input(type="text")/屬性
HTML 標簽中的屬性用 () 包圍起來,屬性之間用 , 隔開,屬性值用 ‘’包裹
a(href='//www.baidu.com', title='百度一下') 百度一下編譯后:
<a href="//www.baidu.com" title="百度一下">百度一下</a>文本
上面提到了,利用空格分割表示文本,多行文本需要在標簽后加 ., 文本內容保持同樣縮進
如果文本中還包含標簽,則需要直接添加標簽
p.line1line2line3 <strong>strong</strong>編譯后
<p>line1line2line3 <strong>strong</strong> </p>這種情況一般適用于大段文字的例子,比如 <script> 中的內容:
script.(function test() {alert(123)})()編譯后
<script>(function test() {alert(123)})() </script>也可以使用 | 來書寫,效果相同
p| line1| line2| line3 <strong>strong</strong>如果一行的開頭是尖括號 <,那么正行都會當做純文本,即便當中的內容包含 HTML 標簽,也會原樣輸出:
<span>123</span>注釋
單行注釋:
// 這個注釋會被編譯到HTML //- 這個注釋不會被編譯到HTML塊注釋
//塊注釋塊注釋IE注釋
<!--[if IE 8]><html class='ie8'><[endif]--> <!--[if IE 9]><html class='ie9'><[endif]--> <!--[if IE]><html class='ie8'><[endif]-->變量
利用 - 開始一段不直接進行輸入的代碼
- for (var i = 0; i<3; i++) p #{i}利用 = 開始一段帶有輸出的代碼(注意 = 前后不能有空格)
- for (var i = 0; i<3; i++)p=i編譯后
<p>1</p> <p>2</p> <p>3</p>聲明變量使用 -var varName = varValue, 使用變量 #{varName}
- var text='Pug' p Hello #{text}編譯后
<p>Hello Pug</p>默認情況下,所有屬性都經轉義,目的是為了防止跨站腳本攻擊等攻擊方式
- var unescaped = '<strong>Hello</strong>' p #{unescaped}編譯后
<p><strong>Hello</strong></p>如果需要使用特殊字符,即未經過轉義的字符, 在引用變量時使用 !{} 代替 #{}(在定義屬性時用 != 代替 =)
- var unescaped = '<strong>Hello</strong>' p !{unescaped}編譯后
<p><strong>Hello</strong></p>未經定義的變量輸出結果是空值,而非 undefined
類
class 可以是一個字符串,也可以是一個包含多個類名的數組
p(class=['class1', 'class2']) class編譯后
<p class="class1 class2">class</p>也可以是一個對象
p(class={class3: false, class4: true}) class編譯后
<p class="class4">class</p>類和ID的字面量
類可以使用 .classname 語法來定義, ID 使用 #idname 來定義,在省略標簽名是默認是 div
// p.class5 class p#id1 id .class6 class編譯后
<p class="class5">class</p> <p id="id1">id</p> <div class="class6">class</div>&attributes
&attributes 語法可以將一個對象轉化為一個元素的屬性列表。
p#id2(class='class7')&attributes({'data-url': '//www.baidu.com'})編譯后
<p class="class7" id="id2" data-url="//www.baidu.com"></p>流程控制
條件控制
可以省略語句開頭的 -, 類似常規的 JavaScript 語法形式
- var number = function() {return 15};if(number() < 0)p number < 0 else if(number() > 5)p number > 5 elsep number between (0,5)unless varA 等同于 if(!varA)
就按照字面意思理解,如果不,這樣便于記憶
循環
使用 each 實現循環是最常見的方式,第二個參數就是循環時的索引值
uleach val in [1,2,3,4,5]li #{val + 'index' + index} // 等同于 li=val + 'index' + index編譯后
<ul><li>1index0</li><li>2index1</li><li>3index2</li><li>4index3</li><li>5index4</li> </ul>也可以對對象進行循環
- var object = {name: 'chow', age:22};uleach value, key in objectli=key + ':' + value編譯后
<ul><li>name:chow</li><li>age:22</li> </ul>用于迭代的對象或數組僅僅是個 JavaScript 表達式,因此它可以是變量、函數調用的結果
each value, key in friends > 110 ? object : ''可以為 each 添加一個 else 塊,用于當被循環對象無法提供被循環內容時調用
- var friends = 100 uleach value, key in friends > 110 ? object : ''li=key + ':' + valueelseli nothing也可以使用 while 來創建循環
- var n = 0; ulwhile n < 4li= n++分支條件
case 是 JavaScript 中 switch 中的縮寫
- var friends = 1case friendswhen 1p you only have 1 friendwhen 2p you have 2 friendsdefaultp you have a lot of friends可以使用塊展開的語法:
- var friends = 11case friendswhen 1: p you only have 1 friendwhen 2: p you have 2 friendsdefault: p you have a lot of friends包含
相當于 JavaScript 中的 import 功能
// - index.pug doctype html htmlinclude includes/head.pugbodyh1 我的網站p 歡迎來到我這簡陋得不能再簡陋的網站。include includes/foot.pug// - includes/head.pug headtitle 我的網站編譯后:
<!DOCTYPE html> <html><head><title>我的網站</title><script src="/javascripts/jquery.js"></script><script src="/javascripts/app.js"></script> </head><body><h1>我的網站</h1><p>歡迎來到我這簡陋得不能再簡陋的網站。</p><footer id="footer"><p>Copyright (c) foobar</p></footer> </body></html>被包含的如果不是 Pug 文件,那么就只會當作文本內容來引入。
scriptinclude say.js// say.js alert('hello');編譯后:
<script>alert('hello'); </script>模板繼承
Pug 支持使用 block 和 extends 實現繼承,一個稱之為“塊”(block)的代碼塊,可以被子模板覆蓋、替換。這個過程是遞歸的。
簡單來說就是,b.pug 通過 extends a.pug 關鍵詞來繼承 a.pug 中的全部代碼,再通過聲明與 a.pug 中相同的 block 來替代原來模板中的內容
Pug 允許您去替換(默認的行為)、prepend(向頭部添加內容),或者 append(向尾部添加內容)一個塊。
Pug 模板繼承是一個非常強大的功能,您可以借助它將復雜的頁面模板拆分成若干個小而簡潔的文件。然而,如果您將大量的模板繼承、鏈接在一起,那么有可能會反而把事情弄得更加復雜。
Mixin
Mixin 實現了代碼的復用
mixin myMixinli This should be repeated編譯后:
uleach n in [1,2,3]+myMixin<ul><li>This should be repeated</li><li>This should be repeated</li><li>This should be repeated</li> </ul>可以向 myMixin中傳入參數
mixin myMixin(text)li This should be #{text}編譯后:
uleach n in [1,2,3]+myMixin(n)<ul><li>This should be 1</li><li>This should be 2</li><li>This should be 3</li> </ul>其實可以將 Mixin 理解為一個函數,返回值是一段 HTML 代碼,每次調用都會返回相同值
function myMixin(text){return `<li>This should be ${text}</li>` }也可以通過 block 關鍵字將外部內容傳入到 Mixin 中
mixin article(name)if blockblockelsep 默認內容 +article p ------------------ +articlep 隨便寫點什么編譯后:
<p>默認內容</p> <p>------------------</p> <p>隨便寫點什么</p>可以向 Mixin 中引入 rest 參數
mixin rest(name, ...others)each other in othersp='剩余參數是' + other +rest('old_chow', 1,2,3,4,5) <p>剩余參數是1</p> <p>剩余參數是2</p> <p>剩余參數是3</p> <p>剩余參數是4</p> <p>剩余參數是5</p>當然是 arguments 對象在 Mixin 中也是可以使用的
arguments 是傳入函數的所有參數,rest是對應位置的參數
Vue 中使用 Pug
在 Vue 的單文件組件中的 <template> 中可以使用 Pug 進行模板的編寫(JADE步驟相同)
首先安裝 Pug 依賴
npm install pug pug-loader pug-filters -D安裝成功后,在 webpack 的配置文件 webpack.base.conf.js 的 modules 中的 rules 節點下添加如下配置:
{test: /\.pug$/,loader: 'pug' }這樣,.vue 單文件組件 就支持 Pug 并實時編譯了。
<template lang="pug">ul- var arr = [1,2,3]each value in arrli(id="test" + value) value + {{this.name}} </template> <script>exportdefault {data() {return {name: 'chow'}},computed: {},methods: {},components: {}} </script>參考
- https://segmentfault.com/a/1190000006198621
- https://pug.bootcss.com/api/getting-started.html
- http://blog.csdn.net/piglet1963/article/details/72723545
- https://www.cnblogs.com/gudi/p/8080736.html
總結
- 上一篇: js pug 代码_前端开发nodejs
- 下一篇: 分享一款光彩四射的CSS3按钮集合