Template Inheritance Scenario
Case 1: Usually the writing page has a template to frame the header LOGO page, the navigation menu on the left, and only the content on the right is different. A lot of duplication of work without the use of templates.
Especially if the header or left navigation needs to be modified or added, all pages need to be modified. django solves it through template inheritance.
Case 2: If a page has a lot of content, it is impossible to write the same page together. For example, the homepage of Jingdong has a lot of content. How to solve it? django imports other pages via include.
One: Template inheritance
1) Inheritance use
Step 1: Write block in the motherboard, it can be inherited, content is the name
{% block title %}
{% endblock%}
{% block “content“ %}
{% endblock%}
Step 2: The child page inherits that template by specifying extends
{% extends 'master.html'%} #Inherit that template
{% block "content" %} This place is to replace the template block "content"
<ul>
{% for i in u%}
<li>{{i}}</li>
{%endfor%}
{% endblock%}
2) If the sub page has its own css, how to use js?
A) If you write CSS and JS on the sub page, the CSS is not in the head, and the JS is not before the <body>. If you want to refer to jquery, the JS written in the sub page will be in front of the jquery reference, and it will not take effect.
B) Inheriting CSS and JS are common.
Solution:
Write a block in the css and js positions in the template. Then introduce it in the block, write your own js and css in this block
Note: block has nothing to do with the order
Two: Template introduction and use
3) A page can only inherit one template, how to solve it? How to use multiple templates, or bring in other pages
<% include "a.html" %> can be referenced multiple times
4) How to render templates, include, and sub-pages?
First render yourself into a string, and then render it with the template and include, so there is no rendering problem (you can treat the sub-page inheriting include as a whole page)
Three: Example
#url.py
url(r'^tpl1$',views.tpl1),
url(r'^tpl2$',views.tpl2),
url(r'^tpl3$',views.tpl3),
#views.py
def tpl1(request):
u = [1,2,3]
return render(request,"tp1.html",{"u":u})
def tpl2(request):
name="alex"
return render(request,"tp2.html",{"name":name})
def tpl3(request):
status="modified"
return render(request,"tp3.html",{"status":status})
#Module: master.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
{% block title %}{% endblock %} <!--This is used to set the title-->
</title>
<link rel="stylesheet" href="/static/common.css">
{% block css %}<!--This is used to set the subpage's own css-->
{% endblock %}
</head>
<body>
{% block content %}<!--This is used to set the content of the sub-page itself-->
{% endblock %}
<script src="/static/js/jquery-1.12.4.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
{% block js %}<!--This is used to set the subpage's own js-->
{% endblock %}
</body>
</html>
#Subpage: tp1.html
{% extends "master.html" %} <!-- inherit from that template-->
{% block title %}
User Management
{% endblock %}
{% block css %}
<style>
body{
background-color: aqua;
}
</style>
{% endblock %}
{% block content %}
<h1>User management</h1>
<ul>
{% for i in u %}
<li>{{ i }}</li>
{% endfor %}
</ul>
{% endblock %}
#Subpage: tp2.html
{% extends "master.html" %}
{% block content %}
<h1>Change password{{ name }}</h1>
{% include "tp3.html" %} <!-- Introduce other pages-->
{% endblock %}
#include page: tp3.html
<div>
<input type="text">
<input type="button" value="++">
</div>