对于页面大部分一样,我们可以使用模板布局来简化
可以查看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',
]