node(二)

模板引擎

pug

index.js ) 一些配置

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 )主要内容与html呈现到浏览器一样的!
　　注意点: tab就要用tab风格缩进

<!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"}) 我是div2
        #myid 我是id为myid的div
        //- 我是pug注释
        //- 
            我是第一行
            我是第二行
        // 我是HTML注释
        //
            我是第一行
            我是第二行
        div
            | hello
        - let str = "你好"
        p #{str}
        p #{data}
        ul
            each item,index in users
                li(class="hello") 姓名是: #{item.name};年龄是: #{item.age};升高是: #{item.height};索引值是: #{index}
        - for(let i = 0;i<4;i++)
            span 我是循环出来的数据 #{i} <br/>
        - let num = 1
            case num
                when 1
                    p num 是一
                when 2
                    p num 是二
                default
                    p num 是其他值
        mixin mydiv
            div 我是非常常用div
        +mydiv
        +mydiv
        mixin pet(name,sex)
            p 这是一只#{name};它的性别是#{sex}
        +pet("狗","公")
        +pet("猫","母")
        include common.pug
        script(type="text/javascript").
            console.log(111)

common.pug )模板

h2 我是公共模板

nunjucks

index.js

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:{
        trimBlock:true//防止Xss漏洞;
    }
}))
router.get("/",async ctx=>{
    // ctx.body = "hello";
    await ctx.render("index",{
        username:"张三",
        num:3,
        arr:[
            {name:"张三",age:20},
            {name:"李四",age:21},
            {name:"王五",age:22}
        ],
        str:"hello world"
    })
})
router.get("/son1",async ctx=>{
    await ctx.render("son1")
})
router.get("/import",async ctx=>{
    await ctx.render("import")
})
app.use(router.routes());
app.listen(8000);

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 num>3 %}
    <p>num大于三</p>
    {% elseif num<3 %}
    <p>num小于三</p>
    {% else %}
    <p>num值等于三</p>
    {% endif %}
    <ul>
        {% for item in arr %}
        <li>姓名是:{{item.name}};年龄是:{{item.age}}</li>
        {% endfor %}
    </ul>
    {{str | replace("world","世界") | capitalize}}
    <!-- macron;宏标签 -->
    {% macro pet(name="狗",sex) %}
    <p>我是一只{{name}},我的性别是{{sex}}</p>
    {% endmacro %}
    {% macro person(name="小明",sex) %}
    <p>我是{{name}},我的性别是{{sex}}</p>
    {% endmacro %}
    {{pet("小狗","公")}}
    {{pet("小猫","母")}}
    {% include 'footer.html' %}
</body>
</html>

son1.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>
    {% extends 'parent.html' %}
    {% block left %}
        我是con1里左侧内容
    {% endblock %}
    {% block right %}
        我是con1里右侧内容
    {% endblock %}
    {% block somevalue %}
        {{super()}}
    {% endblock %}
</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>
    {% import 'index.html' as obj %}
    {{obj.pet("公")}}
    {{obj.person("男")}}
</body>
</html>

posted @ 2020-03-10 01:14 JackAfan 阅读(126) 评论(0) 收藏举报

刷新页面返回顶部

JackAfan

node(二)

模板引擎

pug

nunjucks

公告