Pug - Githubissues

evantianx commented 6 years ago

参考文章:

pug 官网 doc

evantianx commented 6 years ago

属性书写

多行属性

多属性之间用空格隔开，若属性名有特殊字符则添加逗号隔开或者加引号

input(
  type='checked'
  name='todo'
  checked
)

<input type="checkbox" name="todo" checked="checked" />

属性插值

- var url = 'test.html';
a(href = '/' + url) Link

<a href="/test.html">Link</a>

支持 ES6 字符串模版语法

属性值编码输出/非编码输出

默认情况下，所有属性值都会编码输出(escaped),即特殊字符会被替换以防止 xss 等攻击。若确实需要特殊字符，用 != 代替 =

div(escaped="<code>")
div(unescaped!="<code>")

<div escaped="&lt;code&gt"></div>
<div unescaped="<code>"></div>

属性值为 boolean 值

按照 HTML 规范走：不写值时为 true。

`style` 属性

可以传给一个字符串，也可以是一个对象

a(style={text-decoration: 'none', color: 'white'})
a(style="text-decoration: none, color: white")

`class` 属性 / `id` 属性

可以传的值有：对象，数组，. + 类名。

. + 类名时，若省略标签名则默认为 div。

`&attributes`

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

<div id="foo" data-bar="foo" data-foo="bar"></div>

evantianx commented 6 years ago

Case

即 JS 中 switch 的简写。

- var friends = 10

case friends
  when 0
    p  you have no friends
  when 1
    p you have 1 friend
  default
    p you have #{friends} friends

<p>you have 10 friends</p>

若希望某种情况下什么也不输出:

when 0
  - break

也有另外一种写法:

- var friends = 2

case friends
  when 0: p you have no friends
  when 1: p you have 1 friend
  default: p you have #{friends} friends

evantianx commented 6 years ago

Code

分为 unbuffered code、escaped buffered code 和 unescaped buffered code

unbuffered code

意味着代码段不会进入 output buffer,通常用来生成元素，如:

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

<li>item</li>
<li>item</li>
<li>item</li>

escaped buffered code

= 开始

p
  = `this is <escaped>!`

<p>this is &lt;escaped&gt;!</p>

unescaped buffered code

!= 开始

p
  != `this is <strong>not</strong> escaped`

<p>this is <strong>not</strong> escaped</p>

evantianx commented 6 years ago

Comments

分为 buffered comments 、 unbuffered comments、block comments 和 conditional comments

buffered comments:

// TODO: fixme
p foo

<!-- TODO: fixme -->
<p>foo</p>

unbuffered comments:
```
// - TODO: fixme
p foo
```
```
<p>foo</p>
```

block comments

// -
  this is the comments for your partners,
  write as much text as you want
// 
  this is the comments for your website visitors
  do it carefully
p foo

<!-- this is the comments for your website visitors
  do it carefully -->
<p>foo</p>

conditional comments

IE 中存在条件注释，在 pug 中，任何以 < 开头的均会以普通文字输出,所以直接写 html 就 ok。

doctype html

<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->

body
  p Supporting old web browsers is a pain.

</html>

<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->

<body>
  <p>Supporting old web browsers is a pain.</p>
</body>

</html>

evantianx commented 6 years ago

Conditionals

可以使用 if、else if、else、unless

evantianx commented 6 years ago

Filters

可以在 pug 模版中使用其他语言，如 markdown、sass、typescript 等,前提是首先安装好对应的 jstransformer

:markdown 类似于这样的语法

evantianx commented 6 years ago

Includes

可以用来引入其他文件

evantianx commented 6 years ago

模版继承

使用 extends 和 block 实现继承

也可以用 block append / block prepend 在块后或前添加内容

此时亦可省略 block

evantianx / Bloooooooog

Pug #67

属性书写

多行属性

属性插值

属性值编码输出/非编码输出

属性值为 boolean 值

`style` 属性

`class` 属性 / `id` 属性

`&attributes`

Case

Code

Comments

Conditionals

Filters

Includes

模版继承

evantianx / Bloooooooog

Pug #67

属性书写

多行属性

属性插值

属性值编码输出/非编码输出

属性值为 boolean 值

style 属性

class 属性 / id 属性

&attributes

Case

Code

Comments

Conditionals

Filters

Includes

模版继承

`style` 属性

`class` 属性 / `id` 属性

`&attributes`