概要

Pug是一款健壯、靈活、功能豐富的HTML模板引擎,專門為 Node.js 平臺(tái)開發(fā)。Pug是由Jade 改名而來。

是一種通過縮進(jìn)（表示標(biāo)簽間的嵌套關(guān)系）的方式來編寫代碼的過程，在編譯的過程中，不需要考慮標(biāo)簽是否閉合的問題。可以加快寫代碼速度，也為代碼復(fù)用提供了便捷。

安裝

pug可以通過npm獲得：

npm install pug -g npm install pug-cli -g

命令行

將pug格式轉(zhuǎn)化為HTML的時(shí)候輸入命令pug -P xxx.pug

自動(dòng)更新 pug -P -w xxx.pug

有自定義目錄的需求，則需要設(shè)置-o參數(shù)

結(jié)構(gòu)語法

屬性

• 基本

a(href='baidu.com') 百度

轉(zhuǎn)化為

<a href="baidu.com">百度</a>

• 多行

input(type='checkbox'name='agreement'checked )

轉(zhuǎn)化為

<input type="checkbox" name="agreement" checked="checked" />

• 括號(hào)引起來

div(class='div-class', (click)='play()') div(class='div-class' '(click)'='play()')

轉(zhuǎn)化為

<div class="div-class" (click)="play()"></div> <div class="div-class" (click)="play()"></div>

分支條件

• case

- var friends = 10 case friendswhen 0p 您沒有朋友when 1p 您有一個(gè)朋友defaultp 您有 #{friends} 個(gè)朋友

轉(zhuǎn)化為

<p>您有 10 個(gè)朋友</p>

代碼

• 不輸出代碼

- for (var x = 0; x < 3; x++)li item-var list = ["Uno", "Dos", "Tres","Cuatro", "Cinco", "Seis"] each item in listli= item

轉(zhuǎn)化為

<li>item</li> <li>item</li> <li>item</li><li>Uno</li> <li>Dos</li> <li>Tres</li> <li>Cuatro</li> <li>Cinco</li> <li>Seis</li>

• 轉(zhuǎn)義輸出

p= '這個(gè)代碼被 <轉(zhuǎn)義> 了！'

轉(zhuǎn)化為

<p>這個(gè)代碼被 &lt;轉(zhuǎn)義&gt; 了！</p>

• 不轉(zhuǎn)義輸出

p!= '這段文字' + ' <strong>沒有</strong> 被轉(zhuǎn)義！'

轉(zhuǎn)化為

<p>這段文字 <strong>沒有</strong> 被轉(zhuǎn)義！</p>

注釋

單行注釋: // 一些內(nèi)容 或者 <!-- 一些內(nèi)容--> 塊注釋: //-給模板寫的注釋隨便寫多少字都沒關(guān)系。 條件注釋: <!--[if IE 8]>

條件

- var user = { description: 'foo bar baz' } - var authorised = false #userif user.descriptionh2.green 描述p.description= user.descriptionelse if authorisedh2.blue 描述p.description.用戶沒有添加描述。不寫點(diǎn)什么嗎……elseh2.red 描述p.description 用戶沒有描述

轉(zhuǎn)化為

<div id="user"><h2 class="green">描述</h2><p class="description">foo bar baz</p> </div>

包含

include includes/head.pug include style.css

迭代

each 和 while

uleach val in [1, 2, 3, 4, 5]li= val- var n = 0; ulwhile n < 4li= n++**

轉(zhuǎn)化為

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li> </ul><ul><li>0</li><li>1</li><li>2</li><li>3</li> </ul>

Mixin

//- 定義 mixin listulli fooli barli baz //- 使用 +list +listmixin article(title).article.article-wrapperh1= titleif blockblockelsep 沒有提供任何內(nèi)容。+article('Hello world')+article('Hello world')p 這是我p 隨便寫的文章

轉(zhuǎn)化為

<ul><li>foo</li><li>bar</li><li>baz</li> </ul> <ul><li>foo</li><li>bar</li><li>baz</li> </ul><div class="article"><div class="article-wrapper"><h1>Hello world</h1><p>沒有提供任何內(nèi)容。</p></div> </div> <div class="article"><div class="article-wrapper"><h1>Hello world</h1><p>這是我</p><p>隨便寫的文章</p></div> </div>

參考文檔：https://www.pugjs.cn/api/getting-started.html

總結(jié)

以上是生活随笔為你收集整理的Pug教程-从入门到入坟的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。