nunjucks-2

最新推荐文章于 2024-10-14 16:21:33 发布

X可乐

最新推荐文章于 2024-10-14 16:21:33 发布

阅读量296

点赞数

文章标签： node.js

本文链接：https://blog.csdn.net/CS_DGD/article/details/105053544

版权

const Koa = require("koa");
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=>{
    await ctx.render("index",{
        username : "校长",
        num : 2,
        arr : [
            {name:"张三",age:20,sex:"男"},
            {name:"李四",age:20,sex:"男"},
            {name:"王五",age:20,sex:"男"}
        ],
        str : "hello world"
    });
})

router.get("/import",async ctx=>{
    await ctx.render("import");
});

router.get("/dataDatil",async ctx=>{
    
    await ctx.render("dataDatil",{
        num : 2,
        arr : [
            {name:"张三",age:20,sex:"男"},
            {name:"李四",age:20,sex:"男"},
            {name:"王五",age:20,sex:"男"}
        ],
        str : "hello world"
    });
})

app.use(router.routes());

app.listen(8888);

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>我是标题</h1>
    <p>用户名：{{username}}</p>

    <!-- 正常书写注释即可 -->
    {# 我是nunjucks的注释 #}

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

    <!-- 循环结构 -->
    <ul>
        {% for item in arr %}
        <li>
            姓名是{{item.name}};
            年龄是{{item.age}};
            性别是{{item.sex}}
        </li>
        {% endfor %}
    </ul>

    <!-- 正则过滤器 -->
    {{str | replace("hello","你好") | capitalize}}

    <!-- 备注：nodemon不能检测到html，所以在html中修改内容后，记得重启服务器 -->

    <!-- 宏标签 macro -->
    {% macro pet(name="猪",sex="公") %}
    <p>它是一只{{name}},性别是:{{sex}}</p>
    {% endmacro %}

    {% macro person(name,age) %}
    <div> {{name}} </div>
    <h2> {{age}} </h2>
    {% endmacro %}

    {{pet("小狗","公")}}
    {{pet("小猫","母")}}
    {{pet()}}

    {% include "footer.html" %}


</body>
</html>

import.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    {# {% include 'index.html' %} #} 

    {% import 'index.html' as obj %}

    {{obj.pet("郭","公子")}}
    
    {{obj.person("div","h2")}}

</body>
</html>

fotter.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>w我是公共的</h1>
</body>
</html>

dataDtail.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    {% import 'index.html' as obj %}

    {{obj.person("ding","guangDa")}}

    {{obj.pet("猪","母")}}

    {% if num>3 %}
    <p>num大于3</p>
    {% elseif num<3 %}
    <div>num小于3</div>
    {% else %}
    <span>num等于3</span>
    {% endif %}

    <ul>
        {% for item in arr %}
        <li>
            姓名是{{item.name}};
            年龄是{{item.age}};
            性别是{{item.sex}}
        </li>
        {% endfor %}
    </ul>

    {{str | replace("world","世界")}}

    {% macro abc(name,sex) %}
    <p> {{name}} </p>
    <p> {{sex}} </p>  
    {% endmacro %}

    {{abc("p1","p2")}}




</body>
</html>