python---django中模板布局

时间:2024-10-11 09:07:56

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

可以查看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: %;
}
.page-content .content{
height: 500px;
background-color: cornflowerblue;
float: left;
width: %;
}
.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等。导致页面无法正常显示