模板的继承

发布时间：2023-06-15 作者：admin 来源：文学

模板的继承

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="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="www.mycodes/" target="_blank">源码之家</a></p </div> </div> {% endblock %}

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

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

👁️ 阅读量：0

🔖 本文标签：

🔥 最新发布文章