django extends模板扩展使用场景介绍:
我们在项目开发中,经常会将公共的网页部分抽取出来,比如网页中的header部分,header部分主要是放公共的js,css或者网站导航,而这部分几乎每页面有用到,因此我们可以把它抽取出来。
在javaweb或php中都可以用include来包含header部分,而在python django项目中,我们就会用到django的content内容包含标签,如下。
{% block content %} {% endblock %}
然后在需要引入header部分的页面头部加入header所在的路径,标签如下。
{% extends 'user/header.html' %} {% block content %} 中间是每个页面的代码区 {% endblock %}
下面我们来做如下这个案例,如图所示,仔细看图,我们给页面加入了一个公共的header头部,header里面定义的是网站导航,user列表显示部分我们已经在:django入门8:django静态文件的引入 这篇文章中有写到一个user_list.html的文件,后面的代码我们将修改这个html文件。
我们将把上节中的user_list.html文件代码内容拆分到两个文件中,一个是header.html,另外一个就是user_list.html,header部分只写导航部分的代码,用户table列表部分写在user_list.html中,先看看目录结构,如图所示。
header.html部分的代码如下,{% block content %} {% endblock %}这两个标签之间就是将要包含<table>内容的。
{% load staticfiles %} <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户列表页</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="{% static 'css/myCss.css'%}"> </head> <body> <ul class="nav nav-pills"> <li role="presentation"><a href="#">首页</a></li> <li role="presentation"><a href="#">新闻</a></li> <li role="presentation"><a href="#">视频</a></li> </ul> {% block content %} {% endblock %} </body> </html>
user_list.html文件则只显示table内容,table是用来展示后台数据的,目标页面这里也需要这个{% block content %} {% endblock %}标签,并且头部需要引入django模板扩展标签{% extends 'url' %},代码如下。
{% extends 'user/header.html' %} {% block content %} <table class="table" style="width: 500px;"> <tr id="headcolor"> <td>ID</td> <td>用户名</td> <td>密码</td> <td>电话</td> <td>住址</td> <td>操作</td> </tr> {% for user in users %} <tr> <td>{{ user.id }}</td> <td>{{ user.username }}</td> <td>{{ user.password }}</td> <td>{{ user.phone }}</td> <td>{{ user.address }}</td> <td><a href="{% url 'user_detail' pk=user.id %}">查看</a> <a href="{% url 'user_edit' pk=user.id %}">修改</a></td> </tr> {% endfor %} </table> {% endblock %}
以后写代码就不用重复写公共部分了,只需要使用django extends扩展标签将共用的部分引入进来即可。