模板的继承

1.模板的继承举例

有一个base.html模板如下:

<p>
   这是一个继承模板
</p>
{% block content %}
{% endblock  %}

以下test.html的代码如下

{% extends 'base.html' %}  #引用上面的base.html模板

{% block content %}

    <a href="11111">just a test</a>

{% endblock %}

test.html返回的页面内容:

这是一个继承模板

just a test

2.模板的实际使用

以下方法相当于给网页整一个模型,后面所有的网页继承这个模型.继承以下代码的网页的头部个底部将会统一.

{% load static %}
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>王富与贵</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <script type="text/javascript" src="{% static 'js/jquery-1.7.2.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/all.js' %}"></script>
    {% block CSS %}

    {% endblock %}

</head>
<body>


{% block header %}
    <div class="zxcf_menu_wper">
    <div class="zxcf_menu px1000">
        <a href="index.html" class="zm_cura">首页</a>
        <a href="{% url 'app:my_rent' %}">我要租房</a>
        <a href="borrow.html">我要买房</a>
        <a href="#">实时看房</a>
        <a href="noticelist.html">辉煌业绩</a>
        <a href="#" style="margin-right:0;">关于我们</a>
    </div>
    </div>
{% endblock %}


{% block content %}

{% endblock %}



{% block foot %}
                <ul class="fl clearfix">
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">我要融资</a></li>
                    <li><a href="problem.html">帮助中心</a></li>
                    <li><a href="#">友情链接</a></li>
                    <li><a href="#">招贤纳士</a></li>
                    <li><a href="#">收益计算器</a></li>
                </ul>

    <div class="zscf_bottom_wper">
        <div class="zscf_bottom px1000 clearfix">
            <p class="fl">© 2014 zhongxincaifu &nbsp; &nbsp;&nbsp; 中兴财富金融信息服务股份有限公司 &nbsp;&nbsp;&nbsp; 来源:<a
                    href="http://www.mycodes.net/" target="_blank">源码之家</a></p
        </div>
    </div>
{% endblock %}

{% block JS %}
{% endblock %}
</body>
</html>

也可以把上面代码中的header和footer部分的代码单独放在一个base_min.html的文件中,这样更方便后面不同模板之间的复用.

base_min.html页面中的代码如下:

#base.html相当于一个空架子了(模型),其它想用其模型进行复制的就可以直接extends该模板即可.
{% extends base.html %} 
{% load static %}
{% block header %}
    <div class="zxcf_menu_wper">
    <div class="zxcf_menu px1000">
        <a href="index.html" class="zm_cura">首页</a>
        <a href="{% url 'app:my_rent' %}">我要租房</a>
        <a href="borrow.html">我要买房</a>
        <a href="#">实时看房</a>
        <a href="noticelist.html">辉煌业绩</a>
        <a href="#" style="margin-right:0;">关于我们</a>
    </div>
    </div>
{% endblock %}
{% block foot %}
                <ul class="fl clearfix">
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">我要融资</a></li>
                    <li><a href="problem.html">帮助中心</a></li>
                    <li><a href="#">友情链接</a></li>
                    <li><a href="#">招贤纳士</a></li>
                    <li><a href="#">收益计算器</a></li>
                </ul>

    <div class="zscf_bottom_wper">
        <div class="zscf_bottom px1000 clearfix">
            <p class="fl">© 2014 zhongxincaifu &nbsp; &nbsp;&nbsp; 中兴财富金融信息服务股份有限公司 &nbsp;&nbsp;&nbsp; 来源:<a
                    href="http://www.mycodes.net/" target="_blank">源码之家</a></p
        </div>
    </div>
{% endblock %}

这样,base.html这个空架子(模型)中的代码如下:

{% load static %}
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>王富与贵</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <script type="text/javascript" src="{% static 'js/jquery-1.7.2.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/all.js' %}"></script>
    {% block CSS %}

    {% endblock %}

</head>
<body>


{% block header %}

{% endblock %}


{% block content %}

{% endblock %}



{% block foot %}

{% endblock %}

{% block JS %}
{% endblock %}
</body>
</html>

还是要多多练习才能运用的更加熟练!

1.模板的继承举例

2.模板的实际使用

猜你喜欢