nodejs02:模板引擎

最新推荐文章于 2022-11-20 00:08:05 发布

斜光

最新推荐文章于 2022-11-20 00:08:05 发布

阅读量194

点赞数

分类专栏： node

本文链接：https://blog.csdn.net/weixin_44145258/article/details/106181276

版权

node 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

模板引擎

模板引擎

模板引擎是web应用中动态生成html的工具，负责将数据和模板结合；
常见模板引擎有：ejs、jade（现更名为pug）、Handlebars、Nunjucks、Swig等；
使用模板引擎可以是项目结构更加清晰，结构更加合理，让项目维护变得更简单

koa框架与pug模板的基本语法

koa

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: "lc", age:"20", height: "170"},{name: "张三", age:"21", height: "180"}]
    await ctx.render("index.pug", {
        data: "我是数据",
        users
    });
});
app.use(router.routes());
app.listen(3000);

标签、样式、注释的语法

<!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: 200px;
                height: 200px;
                background: orange;
            }
    body
        h1 我是标题
        div 我是div
        div(class = "myDiv") 我是类名为myDiv
            span 我是span标签
        .myDiv2 我是div2
        #myID(style={width:"100px",height: "100px",background: "blue"}) 我是id
        //- 我是pug注释 不显示在HTML页面中
            第二行
        // 我是html注释
            第一行
            第二行

转义 |

如果标签后面换行，会将后边的内容解析为另一个标签
在这里插入图片描述
这个时候可以在前面加上| hello，会将内容原样输出

变量

引用pug中定义的变量

        - let str = "pug变量"
        p #{str}

引用pug模板引擎中传入的属性变量

使用多个变量

循环、判断

类似于for in 循环，可以拿到item和index

each item,index in users

for循环

        - for (let i = 0; i < 4; i++)
            div 我是循环出来的数据#{i}

case判断

        - let num = 3
            case num
                when 1
                    p num 是一
                when 2
                    p num 是二
                default
                    p num 是其他

混合语法 mixin

		// 声明
        mixin myDiv
            div 我是常用的div
		
		// 使用+号调用
        +myDiv
        +myDiv

        //- 传参
        mixin pet(name, sex)
            p 这是一只#{name}; 他的性别是#{sex}
        +pet("猫", "公")
        +pet("狗", "母")

公共模板

可在另一个文件定义common.pug公共模板文件
然后在index页面调用

        //- 公共模板
        include common.pug
        script(type="text/javascript").
            console.log("pug中的script");

nunjucks模板引擎的使用

引擎

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 => {
    // ctx.body = "hello";
    let arr = [{ name: "张三", age: 18 }, { name: "李四", age: 20 }];
    await ctx.render("index", {
        username: "lc",
        num: 2,
        arr,
        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);

格式、注释、变量、判断、循环以及过滤器

    <h1>我是标题</h1>
    <p>用户名是：{{username}}</p>
    <!-- 我是html注释 -->
    {#我是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>
    <!-- 过滤器 -->
    <ul>
        <li>{{str | replace("world","世界")}}</li>
        <li>{{str | capitalize}}</li>{#首字母大写#}
    </ul>

宏标签模板函数

<!-- macro：宏标签 -->
    {% macro pet(name, sex) %}
        <p>宠物{{name}},性别是{{sex}}</p>
    {% endmacro %}
    {{pet("猫", "母")}}
    {{pet("狗", "公")}}

引入

include 引入公共模板

{% include "footer.html" %}

import 引入变量、函数

    {% import "index.html" as obj %}
    {{obj.pet("小猪", "公")}}
    {{obj.person("男")}}

继承与重写

extends

    {% extends "parent.html" %}
    <p>我是子1模板</p>
    {% block left %}
        <p>son1左边内容</p>
    {% endblock %}
    {% block right %}
        son2右边内容
    {% endblock %}

super()

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

斜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nodejs02:模板引擎

模板引擎模板引擎是web应用中动态生成html的工具，负责将数据和模板结合；常见模板引擎有：ejs、jade（现更名为pug）、Handlebars、Nunjucks、Swig等；使用模板引擎可以是项目结构更加清晰，结构更加合理，让项目维护变得更简单pug模板引擎的使用const Koa = require("koa");const Router = require("koa-router");const views = require("koa-views");let app = ne
复制链接

扫一扫