js pug 代码_pug模版学习（一）

标签

按照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

循环

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. 1
2. 2
3. 3
4. 4
5. 5
6. 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 创建重用的代码

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