（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)
]

（14）模板的导入和继承

推荐阅读