pug 语法

tutorial>grammar 5 分钟 读完 (约 824 字)

pug 是一个 JavaScript 的高性能模板引擎，被使用在 Node.js 和 浏览器 项目中。是由 Jade 重命名而来

参考
https://pugjs.org

符号与汉含义

符号 含义
. 表示之后的内容翻译为纯文本
: 表示嵌套关系，不需要换行
| 表示之后的内容翻译为纯文本，不识别 html 标签
// 注释，在编译出来的 html 中显示
//- 注释，在编译出来的 html 中不显示
- 后接 js 代码
#{变量} 转义插值
!{变量} 非转义插值

模板关键字

关键字 描述
block 占位符，通过其实现子模版的追加和替换
entends 继承，子模版继承父模板中的代码
appends 在子模版中向后追加内容
prepend 在子模版中向前追加内容
include 引入文件，并将其中的代码放到模板中

按照 html 的缩进格式

标签

1
2
3
4
5
doctype html
html
  head
    title
  body

编译结果

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body></body>
</html>

文本

1
2
3
4
p 这是文本
| 这是文本
p.
  这是文本

编译结果

1
2
3
<p>这是文本</p>
这是文本
<p>这是文本</p>

属性

设置 class 名跟 id 名（默认是 div）

1
2
3
4
5
p.foo
p#foo
p#foo.foo
.foo
#foo

编译结果

1
2
3
4
5
<p class="foo"></p>
<p id="foo"></p>
<p id="foo" class="foo"></p>
<div class="foo"></div>
<div id="foo"></div>

其他属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
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)

编译结果

1
2
3
4
5
6
<a href="google.com">google</a>
<p class="authed"></p>
<input type="checkbox" name="agreement" checked>
<div data-bar="foo" data-foo="bar"></div>

<div class="baz" data-bar="foo"></div>

注释

1
2
3
4
5
// 行注释
//- 编译后不会显示出来
//
  块注释
<!--可以直接使用注释代码-->

case语句

1
2
3
4
5
6
7
8
- var num = 3
case num
  when 0
    p 这是0
  when 1 
    - break
  when 3
    p 这是#{num}

编译结果

1
<p>这是3</p>

循环

1
2
3
4
5
6
7
8
9
10
11
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

编译结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ol>

条件语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- 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

编译结果

1
2
3
4
5
<div id="user">
  <h2 class="green">foo</h2>
  <p class="foo">this is foo</p>
  <p>等同于：if !user.Foo</p>
</div>

mixin 创建重用的代码

1
2
3
4
5
6
7
mixin list
  ul
    li foo
    li bar 
    li baz
+list
+list

编译结果

1
2
3
4
5
6
7
8
9
10
<ul>
  <li>foo</li>
  <li>bar </li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar </li>
  <li>baz</li>
</ul>

mixin支持传参

1
2
3
4
5
6
7
8
9
10
11
12
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

编译结果

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="article">
  <div class="article-wrapper">
    <h3>Hello worle</h3>
    <p>NO content provided</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h3>hello pug</h3>
    <p>This is my</p>
    <p>Amazing article</p>
  </div>
</div>

还有：

1
2
3
mixin link(href, name)
  a(class!=attributes.class href=href)= name
+link("/foo", "foo")(class="btn")

编译结果

1
<a class="btn" href="/foo">foo</a>

未知参数：

1
2
3
4
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
5
6
<ul id="my-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Extends 扩展

允许模板来扩展一个布局或父模板，它可以覆盖某些预定义内容块。

1
2
3
4
5
6
7
8
//- index.pug
extends layout.pug

block title
  title Article Title

block content
  h1 My Article

1
2
3
4
5
6
7
8
//- layout.pug
doctype html
html
  head
    block title
      title Default title
  body
    block content

编译结果：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>

<head>
  <title>Article Title</title>
</head>

<body>
  <h1>My Article</h1>
</body>

</html>

Includes

允许将一个pug文件的内容插入到另一个文件。
在要插入的位置：include 文件地址

1
2
3
4
5
6
7
8
//- index.pug
doctype html
html
  include includes/head.pug
  body
    h1 My Site
    p Welcome to my super lame site.
    include includes/foot.pug

1
2
3
4
5
//- includes/head.pug
head
  title My Site
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

1
2
3
//- includes/foot.pug
footer#footer
  p Copyright (c) foobar

编译结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>

<head>
  <title>My Site</title>
  <script src="/javascripts/jquery.js"></script>
  <script src="/javascripts/app.js"></script>
</head>

<body>
  <h1>My Site</h1>
  <p>Welcome to my super lame site.</p>
  <footer id="footer">
    <p>Copyright (c) foobar</p>
  </footer>
</body>

</html>

#pug
Nginx 均衡负载视频教程 广东潮宏基实业 - 小程序开发
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×