zoukankan      html  css  js  c++  java
  • django html 模板继承(下)加精

     在编程的过程中,我们经常会重复性的写了很多的代码,比如一个页面的框架部分,这样我又多少个页面就得写上多少次,这样既不好维护,也不够高效,所以我们引出了html的模板继承部分。

    1、写好一个html文件。

    2、下面有个新的html文件需要继承上面这个html。

      直接在这个新的html文件的最顶端,写上下面的内容

    #这个manger.html就是母版的文件名称,告诉这个html去哪里继承。
    {% extends 'manger.html' %}

    3.问题来了,我们既然是继承,总不能全部继承吧,我们肯定是需要写一些新的内容在新的html文件中展示,我们只是继承母版中的一部分,比如head之类的。

      比如我们要在html的一个位置更换新的内容。

      1、定义一个继承的块,叫index。(写在继承的文件里【子文件】)

    {% block index %}{% endblock %}

        2、继承者在自己的文件中需要更换新的内容,需要这么写。

      注意:只需要在继承的任意位置写上{% block index %}内容区{% endblock  %}  (写在父文件里【父文件】)

    {% block index %}
        <div style="background-color: gainsboro;height: 45px;line-height: 45px;font-size: 15px;font-weight: bolder">
            <span>首页&nbsp;></span>
            <span>资产管理</span>
        </div>
    {% endblock %}

    4、如果我的html内容特别多,我看着特别乱,这样我可以把这些内容都写到一个新的html文件里面,然后在我的html文件中直接引用就OK。

      例如:我单独写了一个test.html文件。

      

      我想在html中引用直接写入地下的东西就OK了。

    {% include "test.html" %}

     5、写自己的CSS和JS样式或操作。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <style>
            body{
                height: 38px;
                width: 300px;
            }
        </style>
        {% block css %}{% endblock %}
    <body>
        <div>
            
        </div>
        <script src="jquery-x.x.x"></script>
        {% block js %}{% endblock %}
    </body>
    </html>

      这样,我们就可以在自己的html文件中直接写自己的css样式或者js操作。

    {% block css %}
        <style>
    
        </style>
    {% endblock %}
    
    {% block js %}
        <script>
    
        </script>
    {% endblock %}
  • 相关阅读:
    幂次法则power law
    异常值探测的相关理论及方法
    Dynamics CRM2013 1:N关系 sub-grid中的“添加现有项”和“添加新建项”功能详解
    Microsoft Office Excel cannot access the file, There are several possible reasons
    matlab学习日志之并行运算
    Live555 直播源 以及MediaSubsession
    ajax跨域简单请求与复杂请求
    javaScript遍历对象、数组总结
    PHP正则表达式
    语法环境 变量 数据类型 转换 销毁和传值
  • 原文地址:https://www.cnblogs.com/cjj-zyj/p/10186233.html
Copyright © 2011-2022 走看看