当前位置: 首页 > 工具软件 > Pug > 使用案例 >

node pug模板引擎

何聪
2023-12-01

模板引擎:模板引擎是web应用中动态生成html的工具,负责将数据和模板结合;常见模板引擎有:ejs、jade(现更名为pug)、Handlebars、Nunjucks、Swig等;使用模板引擎可以是项目结构更加清晰,结构更加合理,让项目维护变得更简单;

pug语法:通过缩进关系,代替以往html的层级包含关系,如 个简单的静态 可以表达为,注意要统一使用tab或者空格缩进,不要混用
内联书写层级,a: img

style属性:div(style={width:”200px”,color:”red”})
使用”-”来定义变量,使用“=”把变量输出到元素内;
通过 #{variable} 插 相应的变量值
html 元素属性通过在标签右边通过括号包含(可以通过判断来添加)
文本通过在 字前 添加竖线符号“|”可让 jade 原样输出内容 在html标签标记后 通过空格隔开 本内容 在html标签标记后通过添加引号“.”添加块级文本
注释:可以通过双斜杠进 注释,jade有3种注释 式,可以分别对应输出html 注释、 输出html注释、块级html注释
循环:each val in [1,2,3]
判断语句:”if else” case when default
mixin:混合模式
include common/footer.pug 通过include引入外部文件

<!DOCTYPE html>
html(lang="en")  
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
        link(rel="stylesheet",type="text/css" href="index.css")
        script(src="one.js" type="text/javascript")
        style.
            .mydiv{
                width:200px;
                height:200px;
                background:red;
            } 
    body
        //- 公共模板哪里需要哪里引入
        include common.pug
        h1 我是标题
        div 我说一个div
        div(class="mydiv") 我是类名为mydiv的 div inclide common.pug
        .mydiv2(style={width:"100px",height:"100px",background:"yellow"}) 我是第二个div 这种只适用于div
        p 我说p标签
        .my 我也是一个p


        //- 单行注释
        //-
            我是多行注释
            我是也是多行注释
        
        //我是html的注释 会被读取
        //
            d第一行
            第二行

        div
            | hello

        //- 和js的结合使用
        //-接收服务器返回的数据
        p #{data}   

        //-使用自身的数据
        - let str =  "你好"
        p #{str}

        //- 预告在pug中使用判断,循环,函数,混入模式
        ul
            each item in users
                li 姓名是: #{item.name};年龄是: #{item.age};身高: #{item.height}
        
        - for(let i =0; i< 4; i++)
            span 我是循环的数据#{i}

        - let num = 1;
            case num
                when 1
                    p num 是1
                when 2
                    p num 是2
                when 3
                    p num 是3
                default
                    p num 是其他值

        mixin mydiv 
            div 我是非常常用的div
        +mydiv
        +mydiv 
        //- +mydiv哪里需要哪里掉
        
        mixin pet(name,sex)
            p 这是一只#{name},他的性别是#{sex}

        +pet("泰迪","共有")
        +pet("泰迪","共有")
        +pet("泰迪","共有")

        //- .表示script的结束
        script(type="text/javascript").
            console.log("你来猜猜这时是啥")
 类似资料: