• 模版导入与继承


    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' %}
    
  • 相关阅读:
    ubuntu 系统命令
    js模板引擎实例一
    读取页面上所有的checkbox
    使用fileReader实现图片预览
    html5中的audio标签针对IOS系统的兼容处理
    CSS单位
    使用变换属性的旋转和动画属性实现大风车效果
    css动画属性--轮播图效果
    php curl详解
    linux权限详解
  • 原文地址:https://www.cnblogs.com/jianhaozhou/p/9948660.html
Copyright © 2020-2023  润新知