（14）模板的导入和继承
什么是模板的导入：
当我在模板中写了一个很好看的组件，我想在多个页面用，就需要模板的导入
简单的导入实例：
views.py #这个视图一定要有一个程序返回我要显示页面
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
li = 1
return render(request,'index.html',{'li':li})
def order(request):
return render(request,'order.html')
left.html #这个是一个组件
<div>
<h1>我是好看的组件</h1>
<h4>我是好看组件的内容</h4>
</div>
order.html #这个页面我需要显示我的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>订单</title>
</head>
<body>
{% include 'left.html' %}
</body>
</html>
urls.py #路由分发
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'index/', views.index),
url(r'order/', views.order)
]
引入项目中自己写的css和js
1、首先需要在项目主文件夹下创建一个文件夹 static
2、在settings.py 的最底部有一个 STATIC_URL = '/static/'
在这个的后面加一个STATICFILES_DIRS=[ #注意这里是一个列表，列表中拼接路径
os.path.join(BASE_DIR,'static')
]
PS:BASE_DIR是项目的根路径，将根路径和static拼接了一个路径，然后把这个路径赋值给变量STATICFILES_DIRS，这个路劲就是根路径下的static文件夹
3、在我们需要引用的页面 <link rel="stylesheet" href="/static/mycss.css"> #这里就是导入这个文件夹下的样式文件，后续可以调用文件下的样式
样式的引入实例
views.py
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
li = 1
return render(request,'index.html',{'li':li})
def order(request):
return render(request,'order.html')
urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'index/', views.index),
url(r'order/', views.order)
]
settings.py #这里为什么是列表，因为设置好路径的时候，导入组件时程序会根据列表中的地址去查找，后面可以 写多个地址，这样第一个没有回去第二个，以此类推直到所有地址都没找到则报错
left.html
<div>
<h1 class="left">我是好看的组件</h1>
<h4>我是好看组件的内容</h4>
</div>
order.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/mycss.css">
<title>订单</title>
</head>
<body>
<h1 class="'order">我是红色的h1标签</h1>
{% include 'left.html' %}
</body>
</html>
mycss.css
.order {
color: red;
}
.left {
color: yellow;
}
模板的导入:只要setings的最后和上面一样做好路径就不用再做了
order.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
<title>订单</title>
<style>
.head {
margin-bottom: 20px;
background: #0f0f0f;
height: 60px;
}
</style>
</head>
<body>
{#container-fluid 这个代表流式布局，将整个页面分成12份，可以自由布局页面的分配#}
{#是用流式布局快速完成顶部长条，下部左侧三份，中间6份，右侧三份的页面布局 #}
<div class="container-fluid">
<div class="head"></div>
<div class="row">
<div class="col-md-3">
{#这里从bootstricp网站黏贴入合适的面板，快速创建布局#}
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">我是左侧广告位1</h3>
</div>
<div class="panel-body">
真诚交友：<a href="http://www.baidu.com">点我交友</a>
</div>
</div>
{#这里从bootstricp网站黏贴入合适的面板，快速创建布局#}
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">我是左侧广告位1</h3>
</div>
<div class="panel-body">
真诚交友：<a href="http://www.baidu.com">点我交友</a>
</div>
</div>
</div>
<div class="col-md-6">我是中间六个</div>
<div class="col-md-3">
{#这里从bootstricp网站黏贴入合适的面板，快速创建布局#}
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">我是右侧广告位1</h3>
</div>
<div class="panel-body">
真诚交友：<a href="http://www.baidu.com">点我交友</a>
</div>
</div>
{#这里从bootstricp网站黏贴入合适的面板，快速创建布局#}
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">我是右侧广告位1</h3>
</div>
<div class="panel-body">
真诚交友：<a href="http://www.baidu.com">点我交友</a>
</div>
</div>
{#在布局下引入组件 #}
{% include 'left.html' %}
</div>
</div>
</div>
</body>
</html>
left.html
<div>
<h1 class="left">我是好看的组件</h1>
<h4>我是好看组件的内容</h4>
</div>
views.py
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
li = 1
return render(request,'index.html',{'li':li})
def order(request):
return render(request,'order.html')
urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'index/', views.index),
url(r'order/', views.order)
]
