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}

持续更新,希望支持。

    原文作者:zeyu
    原文地址: https://segmentfault.com/a/1190000015907031
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞