jade | pug 模板引擎 API

最新推荐文章于 2024-06-25 11:10:30 发布

mjzhang1993

最新推荐文章于 2024-06-25 11:10:30 发布

阅读量1.9k

点赞数

分类专栏： Node 文章标签： jade 模板引擎 api node pug

本文链接：https://blog.csdn.net/mjzhang1993/article/details/78933277

版权

Node 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Jade | Pug 模板引擎 API

说明

模板引擎是一种将静态部分代码与动态部分数据结合的一种机制或者技术，Pug 是 Jade 更名后的项目名，与 jade 使用一致

特点：使用缩进排列的方式解决嵌套，而不是使用成对的标签

jade –version : 1.11.0

安装

    sudo npm install jade -g
    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

API

1. 标签

jade 中的标签不再含有 html 中的尖括号，直接写标签名即可，无论单双标签，只写以这个标签名；
标签间嵌套关系使用缩进加换行实现；
标签后第一个空格后边的内容会被编译成标签内的文本内容

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

2. 属性

一般属性要添加在紧挨标签的括号里() ，多个属性用 , 隔开，() 内实际上是一个 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;")

3. 文本

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

4. 变量

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

    body 
        - var config = {name: 'testName', script: '<script>alert("somthing")</script>'};
        p name is #{config.testName}
        p= config.script
        p!= config.script
        p script escaped #{config.script}
        p script unescaped !{config.script}
        // 当变量不存在时 #{} 返回 undefined
        input(value='#{unde}') 
        input(value=unde)

    <!--结果-->
    <body> 
        <p>name is </p>
        <p>&lt;script&gt;alert(&quot;somthing&quot;)&lt;/script&gt;</p>
        <p><script>alert("somthing")</script></p>
        <p>script escaped &lt;script&gt;alert(&quot;somthing&quot;)&lt;/script&gt;</p>
        <p>script unescaped <script>alert("somthing")</script></p>
        <!-- 当变量不存在时 #{} 返回 undefined-->
        <input value="undefined">
        <input>
    </body>

5. 条件语句

if else 语句

    body 
        - var num = Math.random()*9 + 1;
        if num > 7
            p 大于 7 显示
        else if num > 2
            p 大于 2 显示
        else 
            p 剩余

unless 语句实际等同于（ if ！xxx）

    body 
        - var num = Math.random()*9 + 1;
        unless num > 5
            p num 大于 5 num = #{num}
        if !(num > 5)
            p num 大于 5 num = #{num}

case-when 语句，与javascript 中 switch-case 一致

    body 
        - var num = Math.random()*9 + 1;
        - var n = Math.round(num);
        case n
            when 3
                p n is 3 num is #{num}
            // 可以写成行内的
            when 6: p n is 6 num is #{num}
            default
                p n is default num is #{num}

6. 循环语句

for in 遍历如果前边加上 - 则可以使用 (var key in obj) 与 javascript 中一致；如果不加则不能有 () 并且可以使用 else 定义数组或者对象为空时的显示

    body 
        - var config = {name: 'testName', age: 90};
        - var conf = {};
        - for (var key in config)
            p key = #{key} ; value = #{config[key]} ;
        for key in conf
            p key = #{key} ; value = #{config[key]} ;
        else
            p conf is empty

each in 遍历 each value, key in Iteration

    body 
        - var config = {name: 'testName', age: 90};
        - for (var key in config)
            p key = #{key} ; value = #{config[key]} ;
        each val, k in config
            p key = #{k} ; value = #{val} ;
        - var list = ['a', 'b', 'c', 'd'];
        each v, idx in list
            p index = #{idx} ; value = #{v};

while 循环

    - var num = 4;
    while num > 0
        p num = #{num--}

7. 混合

mixins 用于创建可重用的代码块，类似于函数，可以传递参数，将会返回一个混合后的 jade 代码块

通过 mixin mixinName(props) 关键字声明，通过 +mixinName(props) 使用

    body 
        // 没有参数的 mixin
        mixin noProps
            .temp-wrap
                p this is noProps mixin

        +noProps
        +noProps
        // 带有参数的 mixin
        mixin hasProps(prop1, prop2)
            p prop1 is #{prop1}
            p prop2 is #{prop2}

        +hasProps('first', 'second')
        +hasProps('fir', 'sec')
        // 可以嵌入代码块
        mixin hasBlock(prop1, porp2)
            .wrap
                if block
                    // 插入的代码块显示位置
                    block
                else 
                    p no block 
            .common
                p get props #{prop1} ${prop2}

        +hasBlock('first', 'second')
        +hasBlock('fir', 'sec')
            // 插入代码块
            a(href="http://www.baidu.com") 链接

        // 传入标签属性
        mixin hasAttr(href, something)
            a(class!=attributes.class, href=href) 得到传入的属性中class
            a(href=href)&attributes(attributes)= something

        +hasAttr('www.baidu.com', 'some')(class="btn", name="test")

        // 可以使用展开操作符
        mixin hasDot(...list)
            for i in list
                p line #{i}

        +hasDot(1, 32, 34, 54, 65)

8. 模板

1. block 关键字，用于声明一个模板，模块下的内容就是正常的 jade 代码
1. extends 关键字，用于继承模板

以下是一个简单的引用模板的流程

定义一个模板 template.jade，里边放置基础模板，可被替换的部分使用 block blockName 声明，如果其他引用这个模板的文件没有对应的 block 则显示这里定义的默认内容

    doctype html
    html(lang="en")
       head
          title Document
       body 
          block temp
             div this is template show
          // 以下的块不替换的情况下显示默认值
          block def 
             p this will not change
          block prepended
             div this is prepended template show
          block appended
             div this is appended template show

创建一个新的文件，引用模板文件，并替换可替换部分

    // 引用模板
    extends ./template.jade

    // 这里写的 jade 代码不会其作用，除非在 block 下
    div
        p needless tags

    // block temp 表示需要被替换的块的名称，将代替默认内容显示
    block temp
        p this is changed block

    // append 表示不是替换而是在块后边添加
    block append appended
        p this is changed appended block

    // prepend 表示不是替换而是在块前边添加
    block prepend prepended
        p this is changed prepended block

以上 test.jade 中将引用 tempalte.jade 的内容，并且，由于 test.jade 中有名为 temp 的块，因此 tempalte.jade 中的 temp 块将被替换

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Document</title>
      </head>
      <body> 
        <p>this is changed block</p>
        <!-- 以下的块不替换的情况下显示默认值-->
        <p>this will not change</p>
        <p>this is changed prepended block</p>
        <div>this is prepended template show</div>
        <div>this is appended template show</div>
        <p>this is changed appended block</p>
      </body>
    </html>

include 直接拷贝文件进来

    include ./template.jade

9. 注释

    // 单行注释，编译后的文件会保存
    //- 单行注释，编译后的文件不会保存
    // 
        多行注释，
        编译后会保存

    // 条件注释
    <!--[if IE 8]>
    <html lang="en" class="lt-ie9">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <html lang="en">
    <!--<![endif]-->