day20-模板之导入

一、前言

  之前我们讲了,extend这个继承,extend的这个是 一个 html只能继承一个,不能继承多个,但是我们如果说要重复利用很多div,但是这个div只是内容不一样,但是其他的都是一样的,或者类似的,那遇到这种情况咋办呐?这边我们就用到模板的导入,include关键字,来实现模板的导入

二、模板导入定义

说明:这个include可以有多个

{% include '模板名' %} 

三、模板的导入

2.1、定义组件html

说明:定义一个tag.html的代码,这个代码可能只是一小段的html代码

li.html的代码:

<li>{{ row }}</li>  #带模板语言的html

 tag.html的代码:

<form>
    <input type="text"/>
    <input type="submit"/>
</form>

2.2、导入html模板

说明:用include导入模板

{% block content %}
    <h1>用户信息</h1>
    <ul>
        {% for row in u %}
            {% include 'li.html' %}  #模板语言也是可以被渲染的
        {% endfor %}
    </ul>
    {% for i in u %}
        {% include 'tag.html' %}  #可以导入多个
    {% endfor %}
{% endblock %}

 如图:

四、include的应用

这个我们其实经常看到,比如在京东的页面上有很多相同的模块,这些模块我们没有必要学多个div模块,我们来看看,京东哪些地方用了:

 

转载于:https://www.cnblogs.com/zhangqigao/articles/8657929.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值