pug和nunjucks模板引擎

模板引擎

1.pug模板引擎
2.nunjucks模板引擎
模板引擎：是web应用中动态生成html的工具，负责将数据和模板结合；也就是说，可以将服务器的数据通过该工具，使数据可以在.pug的文件里面是访问数据。

pug

安装pug

npm i pug -g

pug文件的语法格式

html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        title Document
        style. 
            .mydiv{
                width:200px;
                height:200px;
            }
    body
        div 我是div
        div(class="mydiv") 我是类名为mydiv的div
            span 我是span
        //- div简写形式
        .mydiv2(style={width:"100px",height:"100px"}) 我是div2
        #myid 我是id为myid的div
        //- 我是pug注释
        //- 我是第一行注释
            第二行注释
        //我是html注释
        //我是第一行注释
            第二行注释

        //- 可以定义一些变量，就想js的一些操作
        - let str="你好"
        //- 插值表达式
        p #{str}
        //- 很多时候，这些变量都是由后端推送过来的
        p #{data}

        //循环后端传过来的users数组-第一种循环方式each
        ul
        each item,index in users
            li #{item.name}-#{item.age}-#{index}
        
        //第二种循环方式for
        ul
        - for(let i=0;i<4;i++)
            li #{i}

        //- 相当于switch的语句 case - when
        - let num = 1
            case num
                when 1
                    p num 是一
                when 2
                    p num 是二
                default
                    p num 其他值
        
        //- 混合模式-相当于函数
        mixin mydiv
            div 我是在哪使用就在哪调
        +mydiv
        +mydiv
        //- 带参数的混合模式
        mixin pet(name,age)
            p 这是只#{name}-#{age}
        +pet("猫",2)

        //- 引入外部文件-公共部分
        include common.pug

        //写js代码
        script(type="text/javascript").
            console.log(1)        
                

koa框架中使用pug

安装

npm i koa koa-router koa-views pug -S

const Koa=require("koa")
const Router=require("koa-router")
const views=require("koa-views")
let app=new Koa()
let router=new Router()
app.use(views(__dirname+"/views",{//服务器会自动去views的文件夹中找对应的模板
    map:{
        html:"pug"
    }
}))
router.get("/",async ctx=>{
    // ctx.body="hello"
    let users=[{name:"张三1",age:20},{name:"张三2",age:22}]
    await ctx.render("index.pug",{
        data:"我是数据",
        users
    })
})
app.use(router.routes())
app.listen(3000)