標簽

按照html的縮進格式

doctype html

html

head

title

body

編譯結果：

文本

p 這是文本

| 這是文本

p.

這是文本

編譯結果：

這是文本

這是文本

這是文本

屬性

設置class名跟id名(默認是div)

p.foo

p#foo

p#foo.foo

.foo

#foo

編譯結果：

其他屬性：

a(href="google.com") google

- var foo = true

p(class=foo ? "authed" : "anon")

input(

type="checkbox"

name="agreement"

checked

)

div(data-bar="foo")&attributes({"data-foo": "bar"})

- var attr = {}

- attr.class = "baz"

div(data-bar="foo")&attributes(attr)

編譯結果：

google

注釋

// 行注釋

//- 編譯后不會顯示出來

//

塊注釋

case語句

- var num = 3

case num

when 0

p 這是0

when 1

- break

when 3

p 這是#{num}

編譯結果：

這是3

循環(huán)

ul

- var n = 0

while n < 4

li= n++

ul

- for (var x = 0; x < 3; x++)

li item

ol

- var list = [1,2,3,4,5,6]

each item in list

li= item

編譯結果：

• 0
• 1
• 2
• 3

• item
• item
• item

1

2

3

4

5

6

條件語句

- var user = {foo: "this is foo"}

- var bar = baz

#user

if user.foo

h2.green foo

p.foo= user.foo

else if bar

h2.blue foo

p.foo.

User has no foo

else

h2.red foo

p.foo user has no foo

unless user.isFoo

p 等同于：if !user.Foo

編譯結果：

foo

this is foo

等同于：if !user.Foo

mixin 創(chuàng)建重用的代碼

mixin list

ul

li foo

li bar

li baz

+list

+list

編譯以后：

• foo
• bar
• baz

• foo
• bar
• baz

mixin支持傳參

mixin article(title)

.article

.article-wrapper

h3= title

if block

block

else

p NO content provided

+article("Hello worle")

+article("hello pug")

p This is my

p Amazing article

編譯結果：

Hello worle

NO content provided

hello pug

This is my

Amazing article

還有：

mixin link(href, name)

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

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

編譯結果：

foo

未知參數：

mixin list(id, ...items)

ul(id=id)

each item in items

li= item

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

編譯結果：

• 1
• 2
• 3
• 4

Extends 擴展

允許模板來擴展一個布局或父模板，它可以覆蓋某些預定義內容塊。

//- index.pug

extends layout.pug

block title

title Article Title

block content

h1 My Article

//- layout.pug

doctype html

html

head

block title

title Default title

body

block content

編譯結果：

Article Title

My Article

Includes

允許將一個pug文件的內容插入到另一個文件。

在要插入的位置：include 文件地址

//- index.pug

doctype html

html

include includes/head.pug

body

h1 My Site

p Welcome to my super lame site.

include includes/foot.pug

//- includes/head.pug

head

title My Site

script(src='/javascripts/jquery.js')

script(src='/javascripts/app.js')

//- includes/foot.pug

footer#footer

p Copyright (c) foobar

編譯結果：

My Site

My Site

Welcome to my super lame site.

Copyright (c) foobar

總結

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

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