當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Pug

發布時間：2023/12/18 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Pug 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

簡介

Pug，原名 Jade，是一個很流行的 HTML 模板引擎，后來由于 Jade 被注冊為商標的原因，改名為 Pug，中文官網在這里。

安裝和使用

npm install pug -g

如果需要使用命令行對 pug 模板進行編譯，還需要安裝 pug-cli

npm install pug-cli -g

Pug 和原來用過的 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='百度一下') 百度一下

編譯后：

文本

上面提到了，利用空格分割表示文本，多行文本需要在標簽后加 ., 文本內容保持同樣縮進

如果文本中還包含標簽，則需要直接添加標簽

p.line1line2line3 <strong>strong</strong>

編譯后

<p>line1line2line3 <strong>strong</strong> </p>

這種情況一般適用于大段文字的例子，比如 <script> 中的內容：

script.(function test() {alert(123)})()

編譯后

也可以使用 | 來書寫，效果相同

p| line1| line2| line3 <strong>strong</strong>

如果一行的開頭是尖括號 <，那么正行都會當做純文本，即便當中的內容包含 HTML 標簽，也會原樣輸出：

注釋

單行注釋：

// 這個注釋會被編譯到HTML //- 這個注釋不會被編譯到HTML

塊注釋

//塊注釋塊注釋

IE注釋

變量

利用 - 開始一段不直接進行輸入的代碼

- for (var i = 0; i<3; i++) p #{i}

利用 = 開始一段帶有輸出的代碼（注意 = 前后不能有空格）

- for (var i = 0; i<3; i++)p=i

編譯后

聲明變量使用 -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'})

編譯后

流程控制

條件控制

可以省略語句開頭的 -, 類似常規的 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

編譯后

用于迭代的對象或數組僅僅是個 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');

編譯后：

模板繼承

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

總結

以上是生活随笔為你收集整理的Pug的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： js pug 代码_前端开发nodejs
下一篇：分享一款光彩四射的CSS3按钮集合