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  &lt;dir&gt; 将编译后的 html  输出到指定文件夹

    jade -P test.jade --out ./output

    # --obj | -O  &lt;path|str&gt; 向 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



   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="&lt;br/&gt;") 伪代码 ‘=’ 默认是转义的

        p(content!="&lt;br/&gt;") 伪代码 '!=' 表示不转义

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.

            '.'用来标记一块文本

            可以是多行的，在这里可以

            &lt;a&gt;写 html 标签&lt;/a&gt;

        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

巴特西

pug的安装与使用

说明

安装

常用命令

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

标签

属性

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

class 与 style 属性

文本

变量

持续更新，希望支持。

最新文章

热门文章