---
title: pug使用手册
date: 2018.06.17 22:38:00
updated: 2019-01-10 12:00:00
categories:
- web
tags:
- front end
- pug
---
目录
正文
## 属性
//表示属性，用括号括
a(href='baidu.com') 百度 => <a href="baidu.com">百度</a>
//多个属性，可分行写
input(
type='checkbox'
name='agreement'
checked
)
=> <input type="checkbox" name="agreement" checked="checked" />
//避免冲突，用引号括
div(class='div-class', (click)='play()')
=> <div class="div-class" (click)="play()"></div>
//是否转义，用感叹明
div(escaped="<code>") => <div escaped="<code>"></div>
div(unescaped!="<code>") => <div unescaped="<code>"></div>
//布尔属性，默认为真
input(type='checkbox' checked)
=> <input type="checkbox" checked="checked" />
//样式属性，可为对象
a(style={color: 'red', background: 'green'})
=><a style="color:red;background:green;"></a>
//类名属性，可字面量
a.button => <a class="button"></a>
//类名属性，可为数组
- var classes = ['foo', 'bar', 'baz']
a(class=classes)
=> <a class="bang foo bar baz bing"></a>
//编号属性，可字面量
a#main-link => <a id="main-link"></a>
## 分支
//条件表示，使用case
- var friends = 10
case friends
when 0
p 您没有朋友
when 1
p 您有一个朋友
default
p 您有 #{friends} 个朋友
=> <p>您有 10 个朋友</p>
//分支跳出，使用break
- var friends = 0
case friends
when 0
- break
when 1
p 您的朋友很少
default
p 您有 #{friends} 个朋友
=>
## 代码
//是否输出，否用连号
- for (var x = 0; x < 3; x++)
li item
=>
<li>item</li>
<li>item</li>
<li>item</li>
//是否输出，是用等号
p= '这个代码被 <转义> 了！'
=><p>这个代码被 <转义> 了！</p>
//是否转义，否用感叹
p!= '这段文字' + ' <strong>没有</strong> 被转义！'
=><p>这段文字 <strong>没有</strong> 被转义！</p>
## 注释
//单行注释，是用行级
// 一些内容
=>
<!-- 一些内容-->
//多行注释，是用块级
//
给模板写的注释
随便写多少字
都没关系。
=>
<!--给模板写的注释
随便写多少字
都没关系。-->
//是否输出，否用连号
//- 一些内容
=>
//条件注释，使用原生
<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
## 条件
//一般形式，可省括号
- var user = { description: 'foo bar baz' }
#user
if user.description
h2.green 描述
p.description= user.description
=>
<div id="user">
<h2 class="green">描述</h2>
<p class="description">foo bar baz</p>
</div>
//反义条件，用感叹号
if !user.isAnonymous
p 您已经以 #{user.name} 的身份登录。
## 过滤
//渲染
$ npm install --save jstransformer-markdown-it
//行内
p
:markdown-it(inline) **加粗文字**
=>
<p><strong>加粗文字</strong></p>
//嵌套
//自定
options.filters = {
'my-own-filter': function (text, options) {
if (options.addStart) text = '始\n' + text;
if (options.addEnd) text = text + '\n终';
return text;
}
};
p
:my-own-filter(addStart addEnd)
过滤
正文
=>
<p>
始
过滤
正文
终
</p>
## 包含
//引入内容
//绝对路径，开头斜杠
include /root.pug
//无扩展名，自动加上
//非其语言，当纯文本
//- index.pug
doctype html
html
head
style
include style.css
body
h1 我的网站
p 欢迎来到我这简陋得不能再简陋的网站。
script
include script.js
/* style.css */
h1 {
color: red;
}
// script.js
console.log('真了不起！');
=>
## 继承
//- layout.pug
html
head
title 我的站点 - #{title}
block scripts
script(src='/jquery.js')
body
block content
block foot
#footer
p 一些页脚的内容
//继承模板，用扩展词
//- page-a.pug
extends layout.pug
//其代码块，子可覆盖
block scripts
script(src='/jquery.js')
script(src='/pets.js')
block content
h1= title
- var pets = ['猫', '狗']
each petName in pets
include pet.pug
//- pet.pug
p= petName
//其代码块，可添加新
//- sub-layout.pug
extends layout.pug
block content
.sidebar
block sidebar
p 什么都没有
.primary
block primary
p 什么都没有
//添代码块，可在头部
block prepend head
script(src='/vendor/three.css')
script(src='/game.css')
//添代码块，可在尾部
block append content
script(src='/vendor/three.js')
script(src='/game.js')
//熟添代码，省关键字
append content
script(src='/vendor/three.js')
script(src='/game.js')
## 嵌入
/************字符****************/
//语法形式，用井大括
- var author = "enlore";
p #{author} 笔下源于真情的创作。
=>
<p>enlore 笔下源于真情的创作。</p>
//输入标识，用反斜杠
p Escaping works with \#{interpolation}
=>
<p>Escaping works with #{interpolation}</p>
//是否转义，否用感叹
- var riskyBusiness = "<em>我希望通过外籍教师 Peter 找一位英语笔友。</em>";
.quote
p 李华：!{riskyBusiness}
=>
<div class="quote">
<p>李华：<em>我希望通过外籍教师 Peter 找一位英语笔友。</em></p>
</div>
/************标签****************/
//语法形式，用井中括
p.
使用带属性的嵌入标签的例子：
#[q(lang="es") ¡Hola Mundo!]
=>
<p>使用带属性的嵌入标签的例子：
<q lang="es">¡Hola Mundo!</q>
</p>
## 迭代
## 混合
## 纯文
//行内纯文，标签加空
p 这是一段纯洁的<em>文本</em>内容.
=>
<p>这是一段纯洁的<em>文本</em>内容.</p>
//原始内容，左尖括头
<html>
body
p 缩进 body 标签没有意义，
p 因为 HTML 本身对空格不敏感。
</html>
=>
<html>
<body>
<p>缩进 body 标签没有意义，</p>
<p>因为 HTML 本身对空格不敏感。</p>
</body>
</html>
//管道纯文，用竖直线
p
| 管道符号总是在最开头，
| 不算前面的缩进。
=>
<p>管道符号总是在最开头， 不算前面的缩进。
</p>
//标签纯文，点号紧跟
script.
if (usingPug)
console.log('这是明智的选择。')
else
console.log('请用 Pug。')
=>
<script>
if (usingPug)
console.log('这是明智的选择。')
else
console.log('请用 Pug。')
</script>
//空格控制，推荐方案
## 标签
//表现标示，前面为空
ul
li Item A
li Item B
li Item C
=>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
//嵌套关系，冒号内联
a: img
=>
<a><img/></a>
//是否闭合，用正斜杠
foo(bar='baz')/
=>
<foo bar="baz" />
//是否闭合，可自动闭
img
=>
<img/>
## 参考
官方文档-英文
官方文档-中文
