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这个基础模板中留下位置，给子模板，子模板可以在指定未知添加我们需要的内容。
原文地址：https://www.cnblogs.com/jackadam/p/8129246.html
时间： 2024-08-04 19:04:08