zoukankan      html  css  js  c++  java
  • 模版导入与继承

    1 模版导入

    ​ 1.写一个模版

    <div style="height: 100px;  100%; background-color: blueviolet">
        <p>这是头部!</p>
    </div>
    

    ​ 2.在模板中:{% include '模板的名字'%}

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        {% load static %}
    {#    <link rel="stylesheet" href={% static 'css/test_1.css' %}>#}
        <link rel="stylesheet" href="{% get_static_prefix %}css/test_1.css">
    </head>
    <body>
    <h1>不知道要写一些什么东西</h1>
    {% include 'head.html' %}
    {% block hezi1 %}
        母版盒子一
    {% endblock hezi1 %}
    <div class="hezi2">
        {% block hezi2 %}
            母版盒子二
        {% endblock hezi2 %}
        {{ price }}
    {{ l }}
    </div>
    
    
    </body>
    </html>
    

    2 模版继承

    ​ 1 写一个母版,留一个可扩展的区域(盒子),可以留多个盒子(留的越多,可扩展性越高)

    ​ {%block 名字%}
    ​ 可以写内容
    ​ {%endblock 名字%}

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        {% load static %}
    </head>
    <body>
    <h1>不知道要写一些什么东西</h1>
    {% include 'head.html' %}
    {% block hezi1 %}
        母版盒子一
    {% endblock hezi1 %}
    <div class="hezi2">
        {% block hezi2 %}
            母版盒子二
        {% endblock hezi2 %}
        {{ price }}
    {{ l }}
    </div>
    
    
    </body>
    </html>
    

    ​ 2 在子模板中使用:

    ​ {%block 名字%}
    ​ 可以写内容
    ​ {%endblock 名字%}

    //得到母版中的所有内容
    {% extends 'muban.html' %}
    
    //重写模板的内容
    {% block hezi2 %}
        <p>这是第二个盒子</p>
    	//获得模版block中的内容
    	{{ block.super }}
    {% endblock hezi2 %}
    
    {% block hezi1 %}
        <p>这是第一个盒子</p>
    {% endblock hezi1 %}
    

    注:得到母版内容中的所有内容

    {% extends 'muban.html' %}
    
  • 相关阅读:
    群辉:服务器错误 错误代码38
    wireshark filter manualpage
    收集下shell使用笔记
    Android kernel LOGO的更换方法
    java实现截屏
    [转]android4.0.3 修改启动动画和开机声音
    博客搬迁
    idea 2017.3创建springboot项目报无效的源发行版: 1.8或者Unsupported major.minor version 52.0的解决方案
    关于mybatis查询集合返回为[null]的问题
    关于mybatis中resultType返回null的问题
  • 原文地址:https://www.cnblogs.com/jianhaozhou/p/9948660.html
Copyright © 2011-2022 走看看