node (d)

Template engine

pug

index.js) some configuration

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",{
    map:{
        html:"pug"
    }
}));
router.get("/",async ctx=>{
    // ctx.body = "hello";
    let users = [
        {name:"张三",age:20,height:"178px"},
        {name:"李四",age:21,height:"170px"},
        {name:"王五",age:22,height:"173px"}
    ]
    await ctx.render("index.pug",{
        data:"我是数据",
        users
    });
})
app.use(router.routes());
app.listen(3000);

! index.pug) the main contents of the html rendered to the browser as the
　　attention point: tab will indent with a tab style

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
        style.
            .mydiv{
                width:100px; height:100px; border:1px solid red;
            }
    body
        h1 我是标题
        div 我是div
        div(class="mydiv") 我是类名为mydiv
        .mydiv2(style={width:"100px",height:"100px",border:"1px solid pink"- I am a pug comment//
        #myid I was with id myid of div}) I div2
        
        // - 
            I was the first row 
            I is the second line 
        // I'm HTML comments 
        //
             my first line 
            I was second row 
        div
             | the Hello
         - the let str = "hello" 
        the p-# {str} 
        the p-# { } Data 
        UL 
            each Item, index in Users 
                Li (class = "Hello" ) is the name: # {item.name}; age: # {item.age}; rise is: # {item.height}; index They are: index # {}
         - for (the let I = 0; I <. 4; I ++ ) 
            span is rotated out of the data I {I} # <br /> 
        -. 1 the let NUM = Case NUM 
                When
            . 1 
                    P NUM is a 
                When 2 
                    P NUM di 
                default 
                    P NUM other values 
        a mixin myDiv 
            div I is a very common div
         + myDiv
         + myDiv 
        a mixin PET (name, Sex) 
            P which is a # {name}; its gender Sex} {#
         + PET ( "dog", "male" )
         + PET ( "cat", "mother" ) 
        the include common.pug 
        Script (type = "text / JavaScript" ). 
            the console.log ( 111)

common.pug) template

I am a common template h2

Template engine

pug

Guess you like