Project name ：Flask_Plan
templates：templates
static：static
继续上一篇文章。
我们不希望每个页面都写一遍引入js，css，导航条………………
那么我们使用模板继承的方法。
首先修改templates/plan.html 为 templates/base.base
再创建一个plan.html
{% extends ‘base.html‘ %}
代码真的只有这一行，别找了。
重新访问我们的页面。
你会发现和没改之前一样。
这个时候模板plan.html就继承了base.html当中的所有内容。
下面修改base.html,给基础模板留下位置标识，让继承这个模板的子模板，知道要修改什么地方内容。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Title</title> 8 <!-- Bootstrap --> 9 <link href="{{ url_for(‘static‘, filename=‘css/bootstrap.css‘)}}" rel="stylesheet"> 10 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 11 <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// --> 12 <!--[if lt IE 9]> 13 <script src="{{ url_for(‘static‘, filename=‘js/html5shiv.min.js‘) }}"></script> 14 <script src="{{ url_for(‘static‘, filename=‘js/respond.min.js‘) }}"></script> 15 <![endif]--> 16 <!-- jQuery (necessary for Bootstrap‘s javascript plugins) --> 17 <script src="{{ url_for(‘static‘, filename=‘js/jquery-3.2.1.min.js‘) }}"></script> 18 <!-- Include all compiled plugins (below), or include individual files as needed --> 19 <script src="{{ url_for(‘static‘, filename=‘js/bootstrap.js‘) }}"></script> 20 </head> 21 <body> 22 <h1>这是计划页面</h1> 23 <img src="{{ url_for(‘static‘, filename=‘test.png‘) }}"> 24 <!--以下两行为新增加--> 25 {% block main1 %}{% endblock %} 26 {% block main2 %}{% endblock %} 27 <!--以上两行为新增加--> 28 </body> 29 </html>
再修改plan.html
{% extends ‘base.html‘ %} {% block main1 %} <h1>这是main1提交的新内容</h1> {% endblock %} {% block main2 %} <h3>这是main2提交的新内容</h3> {% endblock %}
好了，可以看到，我们可以在base这个基础模板中留下位置，给子模板，子模板可以在指定未知添加我们需要的内容。