Pug原名不叫Pug，原來是大名鼎鼎的jade，后來由于商標的原因，改為Pug，哈巴狗。以下是官方解釋：

it has been revealed to us that "Jade" is a registered trademark, and as a result a rename is needed. After some discussion among the maintainers, "Pug" has been chosen as the new name for this project.

其實只是換個名字，語法都與jade一樣。

1. Pug安裝編譯的二三事

開始安裝之后

npm install -g pug

運行一下代碼

pug index.pug

結果顯示：

bash: pug: command not found

找了網上很多內容和教程，大部分都是關于jade的，去Github看了一下官方的討論區(qū)，才知道

You need to install pug-cli. The CLI was separated from the core library as part of this release.

所以,成功解決問題

npm install -g pug-cli

二. 代碼編輯器優(yōu)化

sublime，可以在package control->install package中安裝pug

webStrom，如果出現Invalid indentation,you can use tabs or spaces but not both錯誤，可以參考這篇文章[Jade報錯：Invalid indentation,you can use tabs or spaces but not both問題

三. 基礎語法知識

一段簡單的代碼

doctype html

html

head

title hello pug

body

h1 pug pug

使用命令：

pug -P -w index.pug

編譯后的結果為：

hello pug

pug pug

1.類名和ID名

a.button

a(class="button")

編譯后：

ID類似

2.屬性

屬性可以使用()包裹起來,屬性值之間用逗號隔開

比如

a(href="google.com",title="google")

3.文本內容

a(href="google.com",title="google") Hello World

多行文本內容

p.

asdfasdfa

asdfasd

adsfasd

asdfasdfa

或者

p

| dfas

| dfas

| dfas

文本含有標簽

p

| dfas hey

| dfas

| dfas

或者

p

| dfas hey

strong hey man

| dfas

| dfas

4.注釋

a. 單行注釋

// just some paragraphs

b. 非緩沖注釋

//- will not output within markup

不會被編譯到HTML

c. 塊注釋

第一種

body

//

As much text as you want

can go here.

第二種

d. IE注釋

5.變量

-var Pug="hello world"

title #{Pug}

轉義

-var htmlData='sdf'

p#{htmlData}

p!=htmlData

非轉義

-var htmlData='sdf'

p !{htmlData}

p=htmlData

編譯前的代碼

p \#{htmlData}

p \!{htmlData}

沒有的變量賦值

p=data;

是空值而不是undefined

6.流程代碼

-var array=[1,2,3,4]

-for (var k in imooc)

p=array[k]

-each k in array

p:#{k}

-while

-var array=[1,2]

if array.length>2

p true

else

p false

unless 為false，才執(zhí)行，用法與if類似

-var array=[1,2]

unless !istrue

p hello

switch的功能

-var name='java'

case name

when 'java': p Hi,java

case name

when 'pug': p Hi,pug

default

p Hi

7.mixins

1.重復的代碼塊

mixin sayHi

p hello everyone

+sayHi

編譯后

hello everyone

2.傳入參數

mixin pet(name)

li.pet= name

ul

+pet('cat')

3.blocks

mixin article(title)

.article

h1= title

if block //是否有包含內容

block

else

p No content provided

+article('Hello world')

+article('Hello world')

p This is my

編譯后：

Hello world

No content provided

Hello world

This is my

Amazing article

4.Attributes

mixin link(href, name)

//- attributes == {class: "btn"}

a(class!=attributes.class, href=href)= name

+link('/foo', 'foo')(class="btn")

attributes已經轉義，所以應該使用！=避免二次轉義

編譯后:

foo

5.不確定參數

mixin list(id, ...items)

ul(id=id)

each item in items

li= item

+list('my-list', 1, 2, 3, 4)

參數中要加入...，編譯后：

• 1
• 2
• 3
• 4

四.參考資料

Scott 《帶你學習Jade模板引擎》

總結

以上是生活随笔為你收集整理的js pug 代码_Pug模板（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

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