一、简介
Django使用了”模板继承”的概念。这就是{% extends “base.html” %}所做的事。它意味着”首先载入名为base。在模板继承中，父模板中放置大部分模板共用的且不变的内容，在每一个字模板中可以重写父模板中的内容
- 应用
典型应用就是在网站开通或者网站结尾处
-
说明
- 如果在模板中使用extends标签，它必须是模板中的第一个标签
- 不能在一个模板中定义多个相同名字的block标签
- 子模板不必定义全部父模板中的blocks，如果子模板没有定义block，则使用了父模板中的默认值
- 使用可以获取父模板中block的内容
- 为了更好的可读性，可以给endblock标签一个名字
二、配置
1.配置3个url转发
编辑urls.py文件，配置如下内容：
from django.contrib import admin
from django.urls import path
from app01 import views
from django.conf.urls import url,include
urlpatterns = [
path('admin/', admin.site.urls),
path('new_index/', views.new_index),
path('order/', views.order),
path('shopping/', views.shopping),
]
# 1.首页urlurl为new_index/ 请求url：localhost:8000/new_index
# 2.订单页url为order/ 请求url：localhost:8000/order
# 3.商品也url为shopping/ 请求url：localhost:8000/shopping
2.配置base模板
- 通过先写一个base模板，之后其他页面集成该”base”页面，模板使用到bootstrap页面嵌套功能
在templates目录下创建base.html文件，其中内容为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{% block title %}
<title>Title</title>
{% endblock %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
*{
margin: 0;
padding: 0;
{#background-color: blue;#}
}
.header{
width: 100%;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="row">
<div class="col-md-2">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<p><a href="/new_index/">首页</a></p>
<p><a href="/order/">订单</a></p>
<p><a href="/shopping/">商品</a></p>
</div>
</div>
</div>
<div class="col-md-10">
{% block content %}
{% endblock %}
</div>
</div>
</body>
</html>
3.其它页面应用其模板
- 首页模板
在templates目录下创建new_index.html文件，其中内容为：
{% extends 'base.html' %} {% block content %} <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> {% endblock %} {% block title %} <title>首页</title> {% endblock %} - 订单模板
在templates目录下创建order.html文件，其中内容为：
{% extends 'base.html' %} {% block content %} <h3>订单信息</h3> {% for order in order_list %} <p class="container-fluid">{{ order }}</p> {% endfor %} {% endblock %} - 商品信息模板
在templates目录下创建shopping.html文件，其中内容为：
{% extends 'base.html' %} {% block content %} <h3>商品信息</h3> {% for shopping in shopping_list %} <p class="container-fluid">{{ shopping }}</p> {% endfor %} {% endblock %}
三、配置视图函数
编辑应用目录下的views.py文件
from django.shortcuts import render,HttpResponse,redirect
# Create your views here.
import datetime
def new_index(request):
return render(request,"new_index.html")
def order(request):
order_list=["订单123","订单234","订单345","订单456","订单678","订单789"]
return render(request,"order.html",locals())
def shopping(request):
shopping_list=["商品123","商品234","商品345","商品456","商品567","商品567"]
return render(request,"shopping.html",locals())
四、效果
- 首页效果
-
订单页效果
-
商品页效果
留言