python---django中模板布局

对于页面大部分一样，我们可以使用模板布局来简化

可以查看tornado中的模板引擎，基本一致

python---tornado模板引擎

对于相同代码部分，我们可以提取出来，放在布局文件layout.py中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .page-nav{
            height: 50px;
            background-color: rebeccapurple;
        }

        .page-content .menu{
            height: 500px;
            background-color: antiquewhite;
            float: left;
            width: 20%;
        }
        .page-content .content{
            height: 500px;
            background-color: cornflowerblue;
            float: left;
            width: 80%;
        }
        .page-bottom{
            height: 30px;
            background-color: blueviolet;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="page-nav"></div>
    <div class="page-content">
        <div class="menu">
            <p><a href="/blog/order/">订单</a></p>
            <p><a href="/blog/shop/">购物车</a></p>
        </div>
        {% block content %}
            #此处是不同的地方，需要对应每个功能来显示
        {% endblock %}
    </div>
    <div class="page-bottom">

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

调用布局文件，进行使用：

{% extends "base.html" %}

{% block content %}
    <div class="content">
        订单
    </div>
{%  endblock %}
{%  extends "base.html" %}

{% block content %}
<div class="content">
    购物车
</div>
{% endblock %}

对于其他js,css等文件也可以这样进行修改

补充：可以继承父类的代码

父类：

        {% block content %}
            <div>hahahha</div>
        {% endblock %}

子类：

{% extends "base.html" %}

{% block content %}
    <div class="content">
        订单
    </div>
{%  endblock %}

其中订单会覆盖父类的div，要想两者不相互冲突，需要加上：

{% extends "base.html" %}

{% block content %}
    <div class="content">
        {{ block.super }}
        订单
    </div>
{%  endblock %} 

 

注意点：对于每个APP，我们应该将其添加到settings文件中

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'repository',
    'web',
]

若是未添加，那么在APP下的视图中调用的模板中的一些功能将消失，例如block等。导致页面无法正常显示

 

posted @ 2018-03-25 15:51  山上有风景  阅读(437)  评论(0)  编辑  收藏  举报