模板继承
在前端页面开发中。有些代码是需要重复使用的。这种情况可以使用include标签来实现。也可以使用另外一个比较强大的方式来实现,那就是模板继承。
模版继承类似于Python中的类,在父类中可以先定义好一些变量和方法,然后在子类中实现。模版继承也可以在父模版中先定义好一些子模版需要用到的代码,然后子模版直接继承就可以了。并且因为子模版肯定有自己的不同代码,因此可以在父模版中定义一个block接口,然后子模版再去实现。以下是父模版的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header>
<ul>
<li><a href="/">首页</a></li>
<li><a href="{% url 'company' %}">公司</a></li>
<li><a href="{% url 'school' %}">校园</a></li>
<li>{
{ u }}</li>
</ul>
</header>
<div class="content">
{% block content %}
我是父模板中content的代码
{% endblock %}
</div>
<footer>
这是footer部分
</footer>
</body>
</html>
这个模版,我们取名叫做base.html,定义好一个简单的html骨架,然后定义好两个block接口,让子模版来根据具体需求来实现。子模板然后通过extends标签来实现,示例代码如下:
{% extends 'base.html' %} {
{% block content %}
<p>{
{ block.super }}</p>
这是首页的代码
{% endblock %}
我是block外面的代码
需要注意的是:extends标签必须放在模版的第一行。
子模板中的代码必须放在block中,否则将不会被渲染。
父模板中的参数可以在渲染子模板的视图函数中传递