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

    模板继承的场景

    情况1:通常写页面都有个模板用来框定头部LOGO页面,左侧导航菜单,只有右部的内容不同。如果不使用模板就大量重复工作。
    
        特别如果头部或者左侧导航需要修改或者添加,所有页面都需要修改。django 通过模板继承解决。
    
    情况2:一个页面如果内容特别多,不可能都一起写同一个页面。比如京东首页内容非常多。如何解决了?django通过include导入其他页面。

    一:模版继承

      1)继承使用

        步骤1:母板里写入block,就可以被继承,content是名称 

        {% block title %}
        {% endblock%}
    
        {% block “content“ %}
        {% endblock%}

        步骤2:子页面通过extends指定继承那个模板

        {% extends 'master.html'%} #继承那个模板
    
        {% block “content“ %} 这个地方就是替换模板block “content“
            <ul>
                {% for i in u%}
                    <li>{{i}}</li> 
                {%endfor%}
        {% endblock%}

        2)如果子页面有自己的css,js 怎么用了?
      A)如果是在子页面写CSS和JS,CSS就不是在头部了,而JS也不是在<body>之前,假如要引用jquery,子页面写的JS会在jquery引用前面,就会不生效

      B)继承CSS与JS都是共有的。
            

      解决方法:

      在模板里css 和js位置在写个block块。然后在block里引入,在这个block写自己的js和css
            注:block和顺序没有关系

    二:模板引入使用

      3)一个页面只能继承一个模板,如何解决了?如何使用多个模板,或者引入其他页面

        <% include "a.html" %> 可以引用多次

      4)模板,include,子页面怎么渲染?
            先把自己渲染成字符串,在拿模板和include渲染,所以不存在渲染问题(可以把子页面继承include当做一个整页面)

    三:示例

        #url.py
            url(r'^tpl1$',views.tpl1),
            url(r'^tpl2$',views.tpl2),
            url(r'^tpl3$',views.tpl3),
    
        #views.py
    
            def tpl1(request):
                u=[1,2,3]
                return render(request,"tp1.html",{"u":u})
            
            def tpl2(request):
                name="alex"
                return render(request,"tp2.html",{"name":name})
            
            def tpl3(request):
                status="已修改"
                return render(request,"tp3.html",{"status":status})
    
        #模块:master.html
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>
                    {% block title %}{% endblock %} <!--这里用来设置标题-->
                </title>
                <link rel="stylesheet" href="/static/common.css">
            
                {% block css %}<!--这里用来设置子页面自己的css-->
                {% endblock %}
            </head>
            <body>
                {% block content %}<!--这里用来设置子页面自己的内容-->
                {% endblock %}
                <script src="/static/js/jquery-1.12.4.js"></script>
              <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
                {% block js %}<!--这里用来设置子页面自己的js-->
                {% endblock %}
            </body>
            </html>
    
        #子页面:tp1.html
            {% extends "master.html" %} <!-- 继承那个模板-->
    
            {% block title %}
                用户管理
            {% endblock %}
            
            {% block css %}
                <style>
                    body{
                        background-color: aqua;
                    }
                </style>
            {% endblock %}
            
            {% block content %}
                <h1>用户管理</h1>
                <ul>
                    {% for i in u %}
                        <li>{{ i }}</li>
                    {% endfor %}
                </ul>
            {% endblock %}
        #子页面:tp2.html
            {% extends "master.html" %}
            
            {% block content %}
                <h1>修改密码{{ name }}</h1>
                {% include "tp3.html" %} <!-- 引入其他页面-->
            {% endblock %}
    
        #include页面:tp3.html
        <div>
            <input type="text">
            <input type="button" value="++">
        </div>
  • 相关阅读:
    UVALive 7509 Dome and Steles
    HDU 5884 Sort
    Gym 101194H Great Cells
    HDU 5451 Best Solver
    HDU 5883 The Best Path
    HDU 5875 Function
    卡特兰数
    UVa 11729 Commando War 突击战
    UVa 11292 The Dragon of Loowater 勇者斗恶龙
    Spark Scala Flink版本对应关系
  • 原文地址:https://www.cnblogs.com/bypp/p/8986763.html
Copyright © 2011-2022 走看看