(syntax)png

pug

• pug pug文件名 -o 目标路径 -p -w pug test.pug -o ./ -p -w pug test.pug -o ./ -w
• pug命名规则 不能带 -

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Document
  body

基础

• - var 变量名 = 值

-var list = ['a','b','c','d']
each item in list
	li = item

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

• 导入 include include/head.pug(路径)
• 自闭合标签 foor(bar=’baz’)/

属性 ()

• input(type=’checkbox’,checked=true)
• 内联样式 p(style=”color:red”) a( style = {color:’red’,background:’green’} )
• 类属性 类的字面值 p(class=”one two”) p.one.two
• id属性 div#box1 、div(id=”box2”) #foo.oh.no
• &attributes 属性 &attributes 语法可以将一个对象转化为一个元素的属性列表 div#foo(data-bar=”foo”)&attributes({‘data-foo’: ‘bar’})

-var classes = ['box1','box2','box3']
div(class=classes)
div.bing(class=classes class=['bing'])

语句

• 条件 -js代码块 -var 变量=值
• 循环

-var flag = true
body(class=flag?'one':'tow')

- var num = 8
case num
       when 0
              p    内容
        when 1
        when 2
              p 内容
         when 3
               break
         default
               p N内容

for
 - var arr = [1,2,3,4,5]
 ul
  -for(var i = 0;i<arr.length;i++)
   li=arr[i]

 -for(var i = 0;i<100;i++)
  p.one loremasdfaaaaaaaa


while
- var n = 0;
ul
  while n < 4
  li= n++
ul
  while num<5
  li = num ++
each

ul
 each val in [1, 2, 3, 4, 5]
  li= val

ul
 each val, index in ['〇', '一', '二']
  li= index + ': ' + val

ul
 each val, index in {1:'一',2:'二',3:'三'}
  li= index + ': ' + val

- var arr ={  name:'Mike',age:' ' }
ul
    each val in arr
    li = val

复用 block+extend mixin

• 模板继承 Inheritance
  • 继承与扩展 block extends
  • 两大功能 嵌入和继承
    • 嵌入 提取重复代码复用
    • 继承 重复代码块到公共文件复用
      • common.pug 文件 最后添加 block content
      • index.pug 文件开头 extends common文件名 block content
• 混合 mixin 名() +名 函数可传参
  • 定义函数 mixin 函数名（参数）{ }
  • 使用函数 +函数名 +study(2020)

mixin list(id, ...items)
 ul(id=id)
  each item in items
   li= item

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

混入属性
mixin link(href, name)
 //- attributes == {class: "btn"}
 a(class!=attributes.class href=href)= name

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

文本 #{Text}

• 元素后面直接添加 p loremlorem
• 动态输出内容 ``-var user = {name:’mike’} p #{obj.name} testtest`
• 属性值{文本} - var url = 'url值' a{href=url} 内容

Templates

• html generate basic HTML template in Pug/Jade style
• bootstrap generate basic Bootstrap template

Bootstrap Related

• fgroup input form with form-group class
• button
• footer minimalistic footer
• panel
• login form
• signup form
• navbar

Others

• cpug require pug
• ipug import pug
• lorem generate dummy text
• fa to include font-awesome icon