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' %}
    
  • 相关阅读:
    CSS3——过渡
    CSS——优雅降级和渐进增强
    jq1 颜色填充器 和清空指定颜色
    1. 初识node
    javaSE- 01
    鼠标悬浮图片时弹出透明提示图层的jQuery特效
    通过jQuery制作电子时钟表的代码
    9种网页Flash焦点图和jQuery焦点图幻灯片
    7种网页图片切换方式代码
    21种网页在线客服代码实例演示
  • 原文地址:https://www.cnblogs.com/jianhaozhou/p/9948660.html
Copyright © 2011-2022 走看看