对于页面大部分一样，我们可以使用模板布局来简化
可以查看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; 20%; } .page-content .content{ height: 500px; background-color: cornflowerblue; float: left; 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', ]