四、模板标签及模板的继承与引用

1 模板标签

标签语法: 由 {% 以及 %} 来定义，例如：{%tag%} {%endtag%}

 

2 常用标签

  1. if/elif/else: 可以使用and/or/in/not/==/!=/<=/>= 来进行判断
  2. for...in...: 与python中的for语法一致
  3. for...in...empty...: 如果没有数据，则跳转到empty中
  4. load: 加载第三方标签。最常用的是{% load static %}
  5. url: 返回一个命名了的URL的绝对路径
  6. with: 缓存一个变量
  7. autoescape: 开启和关闭自动转义
forloop含义
forloop.counter 返回当前迭代次数，下标从1开始，1,2,3
forloop.counter0 返回当前迭代次数，下标从0开始，0,1,2
forloop.recounter 返回反向迭代次数，下标从大到小，3,2,1
forloop.recounter0 返回反向迭代次数，下标从大到小，2,1,0
forloop.first 若第一次迭代，则返回True，否则返回False
forloop.last 若最后一次迭代，则返回True，否则返回False
forloop.parentloop 若发生多层for循环嵌套，则返回上一层for
 
  • 例子
 1 <tbody>
 2 {% for i in students %}
 3   <tr {% if i.gender == '女' %}style="color: red"{% endif %}>
 4       <th>{{ forloop.counter }}</th>
 5       <th><a href="{% url 'teacher:detail' i.id %}">{{ i.name }}</a></th>
 6       <th>{{ i.gender }}</th>
 7       <th>{{ i.age }}</th>
 8   </tr>
 9 {% endfor %}
10 </tbody>

3 模板继承与引用

Django模版引擎中最强大也是最复杂的部分就是模版继承。

模版继承可以让你创建一个基本的“骨架”模版，它包含你站点中的全部元素，并且可以定义能够被子模板覆盖的 blocks 。

  • 案例
  1. BASE模板
 1 {% load static %}
 2 <!DOCTYPE html>
 3 <html lang="zh-CN">
 4   <head>
 5     <meta charset="utf-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1">
 8     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
 9     <meta name="description" content="">
10     <meta name="author" content="">
11     <title>
12         {% block title %}
13         BASE模板
14         {% endblock %}
15     </title>
16     {% block link %}
17     {% endblock %}
18     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
19   </head>
20 
21   <body>
22   {% block content %}
23     <h1>BASE模板</h1>
24   {% endblock %}
25   </body>
26 </html>

　　2. 登录页

 1 {% extends 'teacher/base.html' %}
 2 {% load static %}
 3 {% block title %}
 4     登录页
 5 {% endblock %}
 6 {% block link %}
 7     <link href="{% static 'student/css/signin.css' %}" rel="stylesheet">
 8 {% endblock %}
 9 {% block content %}
10     <div class="container">
11       <form class="form-signin">
12         <h2 class="form-signin-heading">Please sign in</h2>
13         <label for="inputEmail" class="sr-only">Email address</label>
14         <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
15         <label for="inputPassword" class="sr-only">Password</label>
16         <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
17         <div class="checkbox">
18           <label>
19             <input type="checkbox" value="remember-me"> Remember me
20           </label>
21         </div>
22         <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
23       </form>
24     </div>
25 {% endblock %}

　　3. 系统首页

 1 {% extends 'teacher/base.html' %}
 2 {% load static %}
 3 {% block title %}导师系统首页{% endblock %}
 4 {% block link %}
 5     <link href="{% static 'teacher/css/index.css' %}" rel="stylesheet">
 6 {% endblock %}
 7 {% block content %}
 8     <nav class="navbar navbar-inverse navbar-fixed-top">
 9       <div class="container">
10         <div class="navbar-header">
11           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
12             <span class="sr-only">Toggle navigation</span>
13             <span class="icon-bar"></span>
14             <span class="icon-bar"></span>
15             <span class="icon-bar"></span>
16           </button>
17           <a class="navbar-brand" href="#">学生列表</a>
18         </div>
19         <div id="navbar" class="collapse navbar-collapse">
20           <ul class="nav navbar-nav">
21             <li class="active"><a href="#">首页</a></li>
22             <li><a href="#about">课表</a></li>
23             <li><a href="#contact">作业</a></li>
24           </ul>
25         </div>
26       </div>
27     </nav>
28 
29     <div class="container">
30       <div class="starter-template">
31           <table class="table">
32               <thead>
33                 <tr>
34                     <th>序号</th>
35                     <th>姓名</th>
36                     <th>性别</th>
37                     <th>年龄</th>
38                 </tr>
39               </thead>
40               <tbody>
41               {% for i in students %}
42                 <tr {% if i.gender == '女' %}style="color: red"{% endif %}>
43                     <th>{{ forloop.counter }}</th>
44                     <th><a href="{% url 'teacher:detail' i.id %}">{{ i.name }}</a></th>
45                     <th>{{ i.gender }}</th>
46                     <th>{{ i.age }}</th>
47                 </tr>
48               {% endfor %}
49               </tbody>
50           </table>
51       </div>
52     </div>
53     <div style="position:fixed;bottom: 0">
54         {% include 'teacher/ad.html' %}
55     </div>
56 {% endblock %}

　　4. 视图函数

 1 from django.http import HttpResponse
 2 from django.shortcuts import render, reverse, redirect
 3 
 4 def index(request):
 5     return redirect(reverse('teacher:new'))
 6 
 7 def detail(request, pk):
 8     return render(request, 'teacher/detail.html', context={'id': pk})
 9 
10 def new_index(request):
11     student_table = [
12         {'name': '张三', 'gender': '男', 'age': 21, 'id': 56},
13         {'name': '李四', 'gender': '女', 'age': 18, 'id': 49},
14         {'name': '王五', 'gender': '男', 'age': 25, 'id': 106},
15         {'name': '赵六', 'gender': '女', 'age': 29, 'id': 21},
16     ]
17     return render(request, 'teacher/index.html',
18                   context={
19                       'students': student_table
20                   }
21                   )
22 
23 def students(request, year, month):
24     return HttpResponse('%s年%s月报名的学生' % (year, month))
25 
26 def login(request):
27     return render(request, 'teacher/login.html')

4 总结

模板继承使用extends标签实现。通过使用block来给子模板开放接口。

  1. extends必须是模板中的第一个出现的标签。

  2. 子模板中的所有内容，必须出现在父模板定义好的block中，否则django将不会渲染。

  3. 如果出现重复代码，就应该考虑使用模板。

  4. 尽可能多的定义block，方便子模板实现更细的需求。

  5. 如果在某个block中，要使用父模板的内容，使用block.super获取。

 

posted on 2019-04-15 11:09  他说他是向南可是谁信呢  阅读(136)  评论(0)    收藏  举报

导航