一、pug模板引擎新建node服务

1、新建index.js文件，键入以下代码内容

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 pug"
    await ctx.render("index.pug")
})
app.use(router.routes())
app.listen(3000, '0.0.0.0', () => {
    console.log('服务器启动成功');
});

2、通过指令安装依赖：npm i koa koa-router koa-views pug -S
3、通过nodemon index.js查看运行
4、新建views文件夹 5、在views文件夹中新建index.pug文件

二、pug文件的用法

        style.
            .mydiv{
                width:200px;
                height:200px;
                background:red
            }
    body 
        h1 pug
        div 这是div 
        div(class="mydiv") 名为mydiv的div
            span 我是span
        .mydiv2 我是div2 
        #myid 我是id为myid的div
        //- 我是pug的注释
        div 
            | hello
            | pug
        - let str="您好"
        p #{str}
        p #{data}
        ul
            each item,index in users 
                li #{index} 姓名：#{item.name}; 年龄：#{item.age}; 身高：#{item.height}cm;
        -for(let i=0;i<4;i++)
            span #{i}

        mixin mydiv
            div 我是常用的div
        +mydiv
        +mydiv
        mixin pet(name,sex)
            p 这是一只#{name}；它的性别是#{sex}
        +pet("鹦鹉","公")
        +pet("鸽子","母")
        include common.pug
        script(type="text/javascript").
            console.log("提示文字")

6、index.js继续编辑内容如下：

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 pug"
    let users=[{name:"莫山山",age:"21",height:"165"},{name:"叶红鱼",age:"22",height:"168"},{name:"宁缺",age:"24",height:"170"}]
    await ctx.render("index.pug",{
        data:"我是数据",
        users
    }) 
})
app.use(router.routes())
app.listen(3000, '0.0.0.0', () => {
    console.log('服务器启动成功');
});

以上的pug模板引擎的缩进方式不够友好且繁琐，以下介绍更友好的nunjucks引擎

一、nunjucks模板引擎新建node服务

*（这种模板引擎方式比pug友好） *

1、新建index.js文件，键入以下代码内容

const Router=require("koa-router")
const nunjucks=require("koa-nunjucks-2")
let app=new Koa()
let router=new Router()
app.use(nunjucks({
    ext:"html",//模板后缀名，或.njk
    path:__dirname+"/views",
    nunjucksConfig:{
        trimBlocks:true//防止Xss漏洞
    }

}))
router.get("/",async ctx=>{
    // ctx.body="hello nunjucks"
    await ctx.render("index")
})
app.use(router.routes())
app.listen(3000, '0.0.0.0', () => {
    console.log('服务器启动成功');
});

2、通过指令安装依赖：npm i koa koa-router koa-nunjucks-2 -S 3、通过nodemon index.js查看运行
4、新建views文件夹 5、在views文件夹中新建index.html文件

    <h1>我是标题</h1>
    <p>用户名是：{{username}}</p>
    <!--注释-->
    {# nunjucks自己的注释 #}
    {% if num>3 %}
    <p>num值大于3</p>
    {% elseif num<3 %}
    <p>num值小于3</p>
    {% else %}
    <p>num值等于3</p>
    {% endif %}
    <ul>
        {% for item in users %}
        <li>姓名{{item.name}}、年龄{{item.age}}</li>
        {% endfor %}
    </ul>
    <!--以下介绍内置过滤器-->
    {{str}}
    {{str | replace("world","世界" | capitalize)}}
    <!--macro:宏标签-->
    {% macro pet(name,sex) %}
    <p>我是一只{{name}}/性别是{{sex}}</p>
    {% endmacro %}
    {{pet("小狗","公")}}
    {{pet("小猫","母")}}
    {% include 'footer.html' %}
</body>

6、index.js继续编辑如下

const Router=require("koa-router")
const nunjucks=require("koa-nunjucks-2")
const { async } = require("regenerator-runtime")
let app=new Koa()
let router=new Router()
app.use(nunjucks({
    ext:"html",//模板后缀名，或.njk
    path:__dirname+"/views",
    nunjucksConfig:{
        trimBlocks:true//防止Xss漏洞
    }

}))
router.get("/",async ctx=>{ 
    // ctx.body="hello nunjucks"
    await ctx.render("index",{
        username:"莫山山", 
        num:4,
        users:[{name:"莫山山",age:"21",height:"165"},{name:"叶红鱼",age:"22",height:"168"},{name:"宁缺",age:"24",height:"170"}],
        str:"hello world"
    
    })
})
router.get("/son1",async ctx=>{
    await ctx.render("son1");
})
app.use(router.routes()) 
app.listen(3000, '0.0.0.0', () => {
    console.log('服务器启动成功'); 
});