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 中兴财富金融信息服务股份有限公司 来源:<a
href="http://www.mycodes/" 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 中兴财富金融信息服务股份有限公司 来源:<a
href="http://www.mycodes/" 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>
还是要多多练习才能运用的更加熟练!
更多推荐
模板的继承
发布评论