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' %}
    
  • 相关阅读:
    Play 中如何使用 Ajax
    Play!中使用HTTP异步编程
    Asynchronous Jobs
    Play libs
    JPA persistence
    maven 打包和构建的Linux命令(mvn)
    Istio的流量管理入门-charlieroro编写
    Linux和Docker的Capabilities介绍及Setcap命令
    2020超实用提升英文阅读能力和必备3000单词表
    Cookie什么?Cookie和Session防御怎么做?
  • 原文地址:https://www.cnblogs.com/jianhaozhou/p/9948660.html
Copyright © 2011-2022 走看看