Template of Django template inheritance (extends / block)

Django template engine is the most powerful and most complex part of the template is inherited. Template inheritance allows you to create a basic " skeleton " template that contains all the elements of your site, and you can define templates can quilt cover Block .

Template inheritance:

1. New muban.html template file, add in different locations overwhelmed by the need to replace the different names of block tags

{% block content %}

Template content

{% endblock %}或者{% endblock content %}

2. In the new html beginning of the file write:

{% extends "muban.html" %}

3. Next to rewrite the template block label content:

Note: Each block tag is not the same name, there may be a plurality (typically css / js / content can have)

{% block content %}

……

{% endblock %}或者{% endblock content %}

4. To retain the inherited template block content, plus when rewriting

{{ block.super }}

Template inheritance Demo:

　　muban.html　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style>
 6         * {margin: 0; padding: 0; }
 7         .c1, .nav {margin: 0 auto; width: 1200px; background-color: #d6d6d6; color: white; }
 8         .fixed:after {content: "";display: block; clear: both; }
 9         .navleft {float: left; }
10 .navright {float: right; }
11         ul, li {list-style: none; display: inline; }
12         .contentleft {float: left; width: 300px; background-color: red; height: 100px; }
13         .contentright {float: left; width: 900px; height: 100px;            background-color: green; }
14         .c2 {margin: auto auto; text-align: center;vertical-align: middle; }
15     </style>
16     <title>模板继承测试</title>
17 </head>
18 <body>
19 <div class="c1">
20     <div class="nav fixed">
21         <div class="navleft ">
22             <ul>
23                 <>liAncient </ Li > 
24                  < Li > Quatrains </ Li > 
25                  < Li > Songs </ Li > 
26 is              </ UL > 
27          </ div > 
28          < div class = "navright" > 
29              < UL > 
30                  < Li > Log </ Li > 
31 is                  < Li > Register </ Li > 
32              </ ul>
33         </div>
34     </div>
35  
36     <div class="content fixed">
37         <div class="contentleft">
38             <div class="c2">
39                 <a href="http://127.0.0.1:8888/muban/">简介</a><br>
40                 <a href="http://127.0.0.1:8888/muban_1/">br> <A</Poetry. 1>
41                 <a href="http://127.0.0.1:8888/muban_2/">古诗2</a></div>
42         </div>
43         <div class="contentright">
44             <div class="c2">
45                 {% block content %}
46                     模板内容---简介
47                 {% endblock %}
48             </div>
49         </div>
50     </div>
51  
52 </div>
53 </body>
54 </html>

　　muban_1.thml

1 {% extends "muban.html" %}
2 {% block content %}
3     <h2>You never fail just when you give up!</h2>
4 {% endblock %}

　　muban_2.thml

. 1  {the extends% "muban.html"%}
 2  {Block Content%%}
 . 3      {{}} block.super <-! Inheritance reservation label template corresponding to content -> 
. 4      < H2 > the Do you want Whatever and Smile veryday! </ H2 > 
. 5 {%}% endblock

views.py

1 def muban(request):
2     return render(request,"muban.html")
3 def muban_1(request):
4     return render(request,"muban_1.html")
5 def muban_2(request):
6     return render(request,"muban_2.html")

　　Rendering

Template of Django template inheritance (extends / block)

Guess you like