后台管理布局之模板继承

后台管理布局中分

-----上-------

左 ====

= 右=

====

默认的管理界面左侧跟上方的区域不做任何变动

对于右侧区域支持滚动 css添加

overflow: scroll;

对于右侧区域的内容  进行继承

父级的base.html添加模板语言

{% block content %}
    {% endblock %}

子文件使用extends直接继承

{% extends "base.html" %}


{% block content %}

    <form action="">
    <p><input type="text">账号</p>
    </form>

{% endblock %}

如果父级base.html有文件内容 则会被覆盖掉

完整代码内容如下:

urls.py

"""s17day17 URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
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'^addArticle/', views.addArticle),
]

views.py文件内容

from django.shortcuts import render,HttpResponse
import datetime
# Create your views here.

def index(request):
    t=datetime.datetime.now()
    a='<a href="baidu.                                                                                                                                                                                                                                                                              com">asd</a>'
    word="I come from a"
    l=[1,1,2,3]
    # return HttpResponse("HELLO")
    return render(request,"后台管理布局.html",locals())
def addArticle(request):

    return render(request,"addArticle.html")

base.html文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .header {
        width: 100%;
        height: 48px;
        background-color: darkgrey;
        position: fixed;
        top: 0;
        left: 0;
    }

    .left {
        width: 200px;
        position: absolute;
        top: 48px;
        left: 0;
        bottom: 0;
        background-color: greenyellow;
    }

    .right {
        position: absolute;
        top: 48px;
        bottom: 0;
        left: 200px;
        right: 0;
        overflow: scroll;
        background-color: beige;
    }

    .left a {
        display: inline-block;
        width: 100%;
        padding: 20px;
        background-color: lightskyblue;
        color: black;
    }
</style>
<body>
<div class="header"></div>
<div class="box">
    <div class="left">
        <a href="/addArticle/">添加文章</a>
    </div>
    <div class="right">
    {% block content %}
        {% endblock %}
    </div>

</div>
</body>
</html>

addArticle.html内容

{% extends "base.html" %}


{% block content %}

    <form action="">
    <p><input type="text">账号</p>
    </form>

{% endblock %}

后台管理布局.html 即index文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .header {
        width: 100%;
        height: 48px;
        background-color: darkgrey;
        position: fixed;
        top: 0;
        left: 0;
    }

    .left {
        width: 200px;
        position: absolute;
        top: 48px;
        left: 0;
        bottom: 0;
        background-color: greenyellow;
    }

    .right {
        position: absolute;
        top: 48px;
        bottom: 0;
        left: 200px;
        right: 0;
        overflow: scroll;
        background-color: beige;
    }

    .left a {
        display: inline-block;
        width: 100%;
        padding: 20px;
        background-color: lightskyblue;
        color: black;
    }
</style>
<body>
<div class="header"></div>
<div class="box">
    <div class="left">
        <a href="/addArticle/">添加文章</a>
    </div>
    <div class="right">
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1>
        <h1>xp</h1></div>

</div>
</body>
</html>

后台管理布局之模板继承

猜你喜欢