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这个基础模板中留下位置，给子模板，子模板可以在指定未知添加我们需要的内容。

作者：上官飞鸿

出处：https://www.cnblogs.com/jackadam/p/8129246.html

版权：本作品采用「知识共享-署名-非商业性-禁止演绎(CC-BY-NC-ND)」许可协议进行许可。

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

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现

Loading

上官飞鸿

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

公告

搜索

积分与排名

合集 (3)

随笔分类 (603)

阅读排行榜