Django_模板之继承(extends)
作用:使用模板继承可以减少Django模板配置中的代码冗余
语法:
为父文件内容加入盒子
{% block content %}
放要修改的内容
{% endblock %}
子文件内容
{% extends "父模板文件名"} #继承父文件的内容,子文件除了盒子以外的其余内容和父文件的一样
{% load static %} #引入其他模板的内容
{% block 块名 %} #块名是自己起的
修改的内容或增加的内容
{% include "其他模板文件名" %}
{% endblock %}
说明:
块越多越好
如果在模板中使用{% extends 要继承的文件名 %},必须在第一行
如果需要访问父模板中的块的内容,使用{{block.super}},然后就可以在上级代码的基础上添加内容,而不是全部重载。
多个模板之间使用相同的代码,可以将其放置到父模板的某个{% block %}中
不允许在同一个模板中定义多个同名的{% block %}
实例:
父模板内容(.html文件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.1.js"></script>
<title>Title</title>
#盒子
{% block styles %}
{% endblock %}
<style>
* {
margin: 0;
padding: 0
}
.nav{
line-height: 40px;
width: 100%;
font-style:italic;">#2459a2;
color: white;
font-size: 20px;
text-align: center;
}
.left{
width: 20%;
min-height: 600px;
overflow: auto;
}
.manage{
text-align: center;
padding: 20px 0;
margin: 20px 0;
font-size: 18px;
}
.left,.content{
float: left;
}
.content{
width: 70%;
min-height: 600px;
}
a{
text-decoration: none;
}
h1,h2{
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="nav">标题</div>
<div class="left">
<div class="student manage"><a href="/student/">学生管理</a></div>
</div>
<div class="content">
#盒子
{% block content%}
<h1>WELCOME TO LOGIN</h1>
{% endblock %}
</div>
</div>
</body>
</html>
子模板内容(.html文件)
{% extends "base.html" %}
{% load static %}
{% block content %}
{{ block.super }}
{% for stu in student %}
<h2>学生{{ stu }}</h2>
{% endfor %}
{% include "test.html" %}
{% endblock %}
其他模板内容(test.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color: cadetblue">这是其他模板的内容</h1>
</body>
</html>