pug的安装与使用

说明

Pug原名不叫Pug，是大名鼎鼎的jade，后来由于商标的原因，改为Pug，哈巴狗。其实只是换个名字，语法都与jade一样。丑话说在前面，Pug有它本身的缺点——可移植性差，调试困难，性能并不出色，但使用它可以加快开发效率。本文将详细介绍pug模板引擎。

安装

    1.sudo npm install jade -g
    2.sudo yarn global add jade
    
    

常用命令

普通编译，会在同目录下生成编译后的 test.html 文件

 jade test.jade
    # --pretty | -P (大写) 美化输出的 html  使之带有缩进等
    jade -P test.jade
    # --out | -o  <dir> 将编译后的 html  输出到指定文件夹
    jade -P test.jade --out ./output
    # --obj | -O  <path|str> 向 jade 模板中传递变量，需要传递一个 json 或者一个 json 文件的路径
    jade -P --obj '{testName: "this is tetsName"}' test.jade
    jade -P -O ./config.json test.jade
    # --watch | -w 监听文件变化，自动重新编译
    jade -P -w test.jade
    

标签

• jade 中的标签不再含有 html 中的 尖括号，直接写标签名即可，无论单双标签，只写以这个标签名；
• 标签间嵌套关系使用缩进加换行实现；

• 标签后第一个空格后边的内容会被编译成标签内的文本内容

  doctype html
  html(lang="en")

  
     head
         title Document
     // 通过换行加缩进实现标签嵌套
     body 
         p 标签后的文本
         // 通过 ‘:’ 实现行内的嵌套 
         p: a 文本
         // 自定义的标签加上 ‘/’ 表示自闭和标签（html 默认自闭和标签可以不用）
         foo/    
         
  

属性

一般属性要添加在紧挨标签的括号里() ，多个属性用 , 隔开，() 内实际上是一个 javascript 的环境，可以在这里进行基础的运算

 body 
        // ‘=’ 链接属性和值，多个属性用 ‘,’ 隔开
        p: a(href="www.baidu.com", target="_blank") 链接 
        // 属性中可以做基础的 javascript 计算
        p
            - var link = 'www.baidu.com'
            a(href=link.toUpperCase()) 链接
        // 属性多的时候可以换行，这个时候可以不用逗号分隔
        p: input(
            type="checkbox"
            name="chexkbox"
            checked=true
        ) 
        p(content="<br/>") 伪代码 ‘=’ 默认是转义的
        p(content!="<br/>") 伪代码 '!=' 表示不转义   

class 与 style 属性

body
        // 使用 '.' 链接标签和类名或者多个类名
        p.p-class.p-class-add 内容
        // 也可以定义变量然后，将其通过普通方式传入，可以传入数组
        - var classes = ['p-class', 'p-class-1', 'p-class-2'];
        p(class=classes)
        // 多个 class 属性，值会累加
        p.class-name(class="class-1", class=classes)
        // style 属性的值可以是一个字符串也可以是一个样式对象
        p(style={color: 'red', background: 'blue'})
        p(style="color: red;background: blue;")        

文本

body 
        p 这是单行的文本
        p 这是多行文本
            | 使用‘|’区分多行文本
            | 注意同样要使用缩进
        div.
            '.'用来标记一块文本
            可以是多行的，在这里可以
            <a>写 html 标签</a> 
        script.
            // 在这里直接写 javascript 代码
            console.log('first line');
            console.log('second line');
            console.log('last line'); 

变量

• -var 用于声明变量
• {variablesName} 用来使用变量，输出的变量数据会被转码
• {variablesName} 通用用来使用变量，但是输出的变量数据不会被转码
• tagName=variablesName 标签名等于变量名，与 #{variablesName}一样，将转码后的变量值赋值为标签内容，区别在于，如果变量未定义 #{} 会返回 undefined；= 会将其忽略
• tagName!=variablesName 与 tagName=variablesName 类似，除了不转义变量值
• 如果要输出 #{} 或者 !{} 可以再其前面加上反斜杠 #{xxx} | !{xxx}

持续更新，希望支持。

来源：https://segmentfault.com/a/1190000015907031