Loading

Flask初级（五）flash在模板中使用继承，模板的模板

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>
View Code

再修改plan.html

{%  extends 'base.html' %}
{% block main1 %}
    <h1>这是main1提交的新内容</h1>
{% endblock %}
{% block main2 %}
    <h3>这是main2提交的新内容</h3>
{% endblock %}
View Code

好了，可以看到，我们可以在base这个基础模板中留下位置，给子模板，子模板可以在指定未知添加我们需要的内容。

 

posted @ 2017-12-28 00:58  上官飞鸿  阅读(457)  评论(0)  编辑  收藏  举报