node pug语法和nunjucks

模板引擎：模板引擎是web应用中动态生成html的工具，负责将数据和模板结合；
安装 Koa、Koa-router、Koa-views pug
npm i koa koa-router koa-views pug

node.js生成html 这是数据

//引入
const Koa = require("koa"); //加载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"
        }
    }))
    // app.use(views(__dirname + "/views", { //自动去views里面找
    //     map: {
    //         html: "pug"
    //     }
    // }));
    //实行异步机制
router.get("/", async ctx => {
    // ctx.body = "hello";
    await ctx.render("index.pug", {
        data: "我是数据"
    })
})
app.use(router.routes());
app.listen(3000);//这是端口

创建一个index.pug 相当于html，在里面写模板
样式写法：

style.
.mtdiv{
width:200px;
height:200px;
background:red ;
}

• pug语法：通过缩进关系，代替以往html的层级包含关系，如 个简单的静态 可以表达为，注意要统一使用tab或者空格缩进，不要混用

body 
        h1 我是标签
        div 我是div
        div(class="mtdiv")  我是类名

        #myid  我是有标签的div

        //

        //js结合使用
        div 
            | hello  
            //加一个树干就是div标签  如果不加就是两个标签

        //接收服务器返回的数据
        p #{data}
        //使用自身的数据
        - let str = "你好啊"
        p #{str}

这是一个效果图 我们可以看到和html的一样

在pug中 使用判断，循环，函数，混入模式

//循环

        //- ul 
         
        //-     each item in users     //遍历数据
            
        //-         li 姓名是：#{item.name};年龄事 #{item.age};身高事： #{item.height};
            //-for循环
            - for(let i =0;i<4;i++)
                span 我是循环出来的数据 #{i}

//判断

        - let num = "a";
            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
        

        mixin pet(name,sex)
            p 这是一只#{name},他的性别是#{sex}
        +pet("太帝","男")
        +pet("太帝","男")
        +pet("太帝","男")
        +pet("太帝","男")

        script(type="text/javascript").
            console.log("hhh")

js结合使用

• script(type=“text/javascript”).
  console.log(“hhh”)

• script(src=“onde.js”)
  

• npm i pug-cli -g

• pug index.pug

• pug index.pug -w -P 吧html转换为正常格式

npm i koa-static

• const static = require(“koa-static”) //加载静态文件
• app.use(static(__dirname + “/static”))

引入外部的css样式
link(rel=“stylesheet”, href=“index.css”)

nunjucks语法

koa-nunjucks-2

安装： npm i koa-nunjucks -2
使用

const nunjucks = require("koa-nunjucks-2");
app.use(nunjucks({
    ext: "html", //指定模板后缀  .njk
    path: __dirname + '/views', //指定视图目录
    nunjucksConfig: {
        trimBlocks: true //开启转义，防止xss漏洞
    }
}));

nunjucks语法使用

变量 ：<p>用户名：{{username}}</p>

if

<!-- if  -->
    {% if num>3 %}
    <p>num值大于3</p>
    {% elif num %}
    <span>num值小于3</span> {% else %}
    <div>num值等于3</div>
    {% endif %}

循环结构 for

router.get("/", async ctx => {
    await ctx.render("index", {
        username: "hhh",
        num: 2,
        arr: [{ name: "张三", age: 20, height: "188cm" },
            { name: "李四", age: 10, height: "168" },
            { name: "王五", age: 28, height: "165" }
        ],
        str: "hello world"
    });
})

ul>
        {% for item in arr %}
        <li>
            姓名是{{item.name}} 年龄是{{item.age}} 身高是{{item.height}}
        </li>
        {% endfor %}
        <!--   循环结束 -->
    </ul>

{% endfor %} <!-- 循环结束 -->

<!-- 过滤器 --> {{ str | replace("world", "bar") | capitalize }}

备注 nodemon不能检测到html，所以在html中修改的内容后，记得重启

模板继承block/extends

• 定义父类模板

<h1>我是公共模板</h1>
    <div class="leftContent">
        {% block left %}
            这边是左侧的内容
        {% endblock %}
        {% block right %}
            这边是右侧的内容
        {% endblock %}
        {% block somevalue %}
            我是一些数据
        {% endblock %}
    </div>

继承父类模板

{% extends "common.html" %}
{% block left %}
    我是左侧的内容1111
{% endblock %}
{% block right %}
    我是右侧的内容11111
{% endblock %}

{% block somevalue %}
    {{ super() }}
{% endblock %}