一、什么情况下继承
我们可以看到页面一和二的前端,都有大量的重复代码,实际这样的重复性类似的代码可以统一提取出来,进行模板操作,只能继承一个模板。
二、如何操作
在父类模板操作的主要知识点
#concent 是命名,这里不做限制的
{% block concent %}{% endblock %}
在子类操作
#要继承的模板
{% extends 'master.html' %}
#在子类 加入子类特有的内容,其中concnet要和父类名一致
{% block concent %}{% endblock %}
案例
这里父类叫做master.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/coommons.css">
<style>
.pg-header{
height: 48px;
background-color: salmon;
color: greenyellow;
}
</style>
</head>
<body>
<div class="pg-header">
#为子类做的占位符
{% block title %}{% endblock %}
</div>
#为子类做的占位符
<h1>{% block name %}{% endblock %}</h1>
#为子类做的占位符
{% block concent %}{% endblock %}
<script src="/static/jquery.js"></script>
</body>
子类
#继承父类引入
{% extends 'master.html' %}
#替代父类中的位置
{% block title %}管理系统{% endblock %}
{% block name %}用户管理{% endblock %}
{% block concent %}
<ul>
{% for i in u %}
<li>{{ i }}</li>
{% endfor %}
</ul>
{% endblock %}
三、问题模板只能继承一个,大量重复的怎么办?
#tag.html理解为定制展示,可以见页面单独的功能进项定制展示,重复使用
{%include 'tag.html' %}
四、技巧针对js 和 css
一般页面的js都会放在底部,css放在顶部我们可以在父类的模板中预留位置。