目的:当多个页面有不少相同部分的代码(前端代码)时,为了不屡次反复的拷贝代码,django提供了模板继承的概念。即:咱们把共同的页面代码只需写一次后面须要用到直接使用django的继承属性便可,就不用写重复代码了。
步骤:a.建立母板(也叫基础模板),在其中定义站点的主要页面(就是相同的部分),这些都是不常修改甚至不修改的部分;
b.在母板中定义可变的block,定义方法为:{% block blockname %} 可变部分代码(可省略) {% endblock %},母板中的block必需要考虑到全部的子模板继承的现象,若是母板中没有在对应的代码区域增长block,则在子母板中没法实现其特有的功能;其中一个母板不可重复;
C.写可扩展部分的页面,经过继承部分来实现其特有的部分的代码,也就是重写母板中对应的block;
模板代码以下:html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; padding: 0px; } .nav{ width: 100%; line-height: 50px; background-color: #37a4e0; color: white; font-size: 25px; text-align: center; } .leftmenu{ width: 10%; height: 588px; background-color: darkgray; color: blue; font-size: 15px; text-align: left; float: left; } .menu{ margin: 0px 10px; padding:10px 5px; } .context{ width: 100%; height: 588px; } .context h1{ text-align: center; } {% block styles %} {% endblock %} </style> </head> <body> <div class="outer"> <div class="nav">标题</div> <div class="leftmenu"> <div class="menu python"><a href="{% url 'querypython' %}">Python相关</a></div> <div class="menu java"><a href="{% url 'queryjava' %}">Java相关</a></div> <div class="menu git"><a href="{% url 'querygit' %}">Git相关</a></div> <div class="menu javas"><a href="{% url 'queryjs' %}">JavaScript相关</a></div> </div> <div class="context"> {% block list %} <h1>欢迎来到个人博客!</h1> {% endblock %} </div> </div> </body> </html>
子模板1代码以下:前端
{% extends "mainpage.html" %} {% block styles %} .pylist{ color: red; font-size: 23px; } {% endblock %} {% block list %} {% for articleobj in pylist %} <div class="pylist"><a href="{{ articleobj.1 }}">{{ articleobj.0 }}</a></div> {% endfor %} {% endblock %}
子模板2代码以下:java
{% extends "mainpage.html" %} {% block list %} {{ block.super }} #使用母板的list block代码 {% for articleobj in javalist %} <div class="contextlist"><a href="{{ articleobj.1 }}">{{ articleobj.0 }}</a></div> {% endfor %} {% endblock %}
母板效果图:
子模板1的效果图:
子模板2的效果图:
总结:
<1>若是在模板中使用{% extends ‘base.html’%}的方式来继续母板,则必须保证放在首行,若是放在最后则继承将不起做用;
<2>通常来讲,基础模板(母板)中{% block blockname%}标签越多越好,基础模板中的block越多意味着其扩展性越强(子模板中能够重写母板中的block来实现特有的功能)。可是当子模板中须要访问并使用基础模板中block中已有的内容,则使用{{ blcok.super }}变量的方式来实现。
<3>当你发现若是须要在多个模板直接进行代码的复制粘贴,此时应该考虑将该部分的代码放进基础模板中的对应的{% block %}中,这样后面的子模板直接继承便可,不用反复拷贝代码。
<4>不能在同一个基础模板中定义多个同名的{% block %},由于当基础模板中有多个相同的block时,子模板将没法肯定从基础模板中使用哪个block。
9.模板include添加标签
目的:include标签和extends标签的用做有些相似,extends标签是将其余模板(基础模板)直接复制过来使用,而include标签是将两个模板内容安装须要合并在一块儿使用(部分页面须要,不是所有须要,因此不能将其放进基础模板中)。
例如,下面图中后者须要将前者合并在一块儿,为了免费在后者的前端代码上重复制拷贝前者的代码,此时能够考虑使用include标签。
最终的效果图:
实现的代码过程:
python
欢迎关注做者公众号平台
git