Foreword: everybody can take a website casually, for example: Taobao. Take a look at the different pages and use your big, shiny eyes to find the differences and similarities. At some point, you’ll find that there are different pages on the site, and some of their data is exactly the same; And some data is not the same part, their front end typesetting format is exactly the same oh! You may be wondering why all these pages need to be coded individually. This is too desperate!! But — don’t forget! One rule of programming is: Never do the same thing! So for the above phenomenon, it involves a knowledge point – template inheritance and reference!!
1. Template inheritance and reference
One of the most powerful and complex parts of Django’s template engine is template inheritance. Template inheritance lets you create a basic “skeleton” template that contains all the elements in your site and defines blocks that can be covered by the template.
(1) The first part: the general idea — each front-end page is a separate code: (below demonstrate three front-end pages, corresponding to the three HTML template files and their effect display!)
The first HTML template:
A_first. HTML file:
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.top{
height: 200px;
background: darkgoldenrod;
}
.con{
height: 500px;
background: aqua;
}
.but{
height: 150px;
background: sandybrown;
}
</style>
</head>
<body>
<div>
<div class="top"> < head /div>
<div class="con"> < span style = "max-width: 100%div>
<div class="butThe bottom "> < /div>
</div>
</body>
</html>
Copy the codeEffect display:
② Second HTML template:
A_second. HTML file:
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.top{
height: 200px;
background: darkgoldenrod;
}
.con{
height: 500px;
background: aqua;
}
.but{
height: 150px;
background: sandybrown;
}
.con .left{
width: 70%;
float: left;
height: 100%;
background: red;
}
.con .right{
width: 30%;
float: left;
height: 100%;
background: #352fff;
}
</style>
</head>
<body>
<div>
<div class="top"> < head /div>
<div class="con">
<div class="left"> < span style = "max-width: 100%div>
<div class="right< / "> advertisingdiv>
</div>
<div class="butThe bottom "> < /div>
</div>
</body>
</html>
Copy the codeEffect display:
③ The third HTML template:
A_third. HTML file:
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.top{
height: 200px;
background: darkgoldenrod;
}
.con{
height: 500px;
background: aqua;
}
.but{
height: 150px;
background: sandybrown;
}
.con .left{
width: 70%;
float: left;
height: 100%;
background: #f338ff;
}
.con .right{
width: 30%;
float: left;
height: 100%;
background: #24ff44;
}
</style>
</head>
<body>
<div>
<div class="top"> < head /div>
<div class="con">
<div class="left"> < span style = "max-width: 100%div>
<div class="right< / "> advertisingdiv>
</div>
<div class="butThe bottom "> < /div>
</div>
</body>
</html>
Copy the code