网站项目中可能有很多界面具有相同的代码组成，使用继承功能可以有效的减少代码冗余
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 {% block styles %} 7 8 9 10 {% endblock %} 11 <style> 12 *{margin: 0; 13 padding: 0 14 ; 15 } 16 .nav{ 17 line-height: 40px; 18 width: 100%; 19 background-color: cornflowerblue; 20 counter-reset: white; 21 font-size: 22px; 22 text-align: center; 23 } 24 .left{ 25 width: 20%; 26 min-height: 600px; 27 overflow: auto; 28 background-color: lightgray; 29 30 } 31 .manage{ 32 text-align: center; 33 padding: 20px 0px; 34 margin: 20px 0px; 35 font-size: 18px; 36 37 } 38 .left, .content{ 39 float: left; 40 } 41 .content{ 42 width: 70%; 43 min-height: 600px; 44 45 } 46 47 a{ 48 text-decoration: none; 49 } 50 h1,h2{ 51 text-align: center; 52 } 53 </style> 54 </head> 55 <body> 56 57 <div class="outer"> 58 <div class="nav">标题 59 60 </div> 61 <div class="left"> 62 <div class="student manage"><a href="/student/">学生管理</a></div> 63 <div class="teacher manage"><a href="">老师管理</a></div> 64 <div class="course manage"><a href="">课程管理</a></div> 65 <div class="classes manage"><a href="">班级管理</a></div> 66 67 </div> 68 <div class="content"> 69 70 {% block contant %} 71 <h1>WELCOME TO VISIT US</h1> 72 {% endblock %} 73 74 75 </div> 76 77 </div> 78 79 </body> 80 </html>
students.html
1 {% extends 'base.html' %} 2 {% load staticfiles %} 3 4 {% block styles %} 5 <style> 6 h2{ 7 color: red; 8 } 9 </style> 10 11 12 {% endblock %} 13 14 {% block contant %} 15 16 {{ block.super }} #父类内容 17 {% for student in student_list %} 18 <h2>学生信息:{{ student }}</h2> 19 {% endfor %} 20 {% include 'test.html' %} 21 22 {% endblock %}
test.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>TEST</title> 6 </head> 7 <body> 8 9 <H1 style="color:red;">HEllo WOrld</H1> 10 11 </body> 12 </html>
使用
{% extends 'base.html' %}实现继承
使用
{% include 'test.html' %}包含其他界面
使用
{{ block.super }} 调用父类内容
使用
{% block contant %}
<h1>WELCOME TO VISIT US</h1>
{% endblock %}
进行自定制内容