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,给基础模板留下位置标识，让继承这个模板的子模板，知道要修改什么地方内容。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>Title</title>

     <!-- Bootstrap -->

     <link href="{{ url_for('static', filename='css/bootstrap.css')}}" rel="stylesheet">

     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

     <!--[if lt IE 9]>

      <script src="{{ url_for('static', filename='js/html5shiv.min.js') }}"></script>

      <script src="{{ url_for('static', filename='js/respond.min.js') }}"></script>

     <![endif]-->

     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

     <script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>

     <!-- Include all compiled plugins (below), or include individual files as needed -->

     <script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>

 </head>

 <body>

 <h1>这是计划页面</h1>

 <img src="{{ url_for('static', filename='test.png') }}">

 <!--以下两行为新增加-->

 {% block main1 %}{% endblock %}

 {% block main2 %}{% endblock %}

 <!--以上两行为新增加-->

 </body>

 </html>

再修改plan.html

{%  extends 'base.html' %}

{% block main1 %}

    <h1>这是main1提交的新内容</h1>

{% endblock %}

{% block main2 %}

    <h3>这是main2提交的新内容</h3>

{% endblock %}

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

Flask初级（五）flash在模板中使用继承，模板的模板的更多相关文章

  1. Win10系列：JavaScript 项目模板中的文件和项模板文件

    通过上面内容的学习,相信读者已经对各种项目模板和项模板有了大致的了解,本节将进一步介绍项目模板中默认包含的项目文件以及项模板文件,首先讲解这些文件中的初始内容以及作用,然后介绍在一个页面中如何添加控件 ...

  2. JAVA笔记整理（五），JAVA中的继承

    1.继承的概念 继承是类与类的一种关系,是一种“is a”的关系 2.继承的好处 子类拥有父类的所有属性和方法,从而实现代码复用 4.方法的重写(Overridding) 如果子类对于继承自父类的方法 ...

  3. thinkPHP 模板中的语法

    一.导入CSS和JS文件   1.css link       js  scr        <link rel='stylesheet' type='text/css' href='__PUB ...

  4. Flask08 包含（include）、继承（extends）、宏？？？、模板中变量的来源、利用bootstrap构建自己的网页结构

    1 包含 直接把另一个文件的内容,复制粘贴过来 {% include "模板路径" %} 注意:模板都是放在 templates 这个文件夹下面的,可以在里面新建文件夹来进行分离: ...

  5. 模板中的 TemplateBinding 问题

    昨天一个朋友向我求助一个自定义水印控件绑定的问题,问题出在文本框中输入的文本,不能绑定到 相应的依赖属性上(自定义的依赖属性 PassText),他纠结了很久找不出问题所在.问题帮他解决后,这里稍 做 ...

  6. django模板中的extends和include使用方法

    一.extends使用方法 首先extends也就是继承,子类继承父类的一些特性.在django模板中通过继承可以减少重复代码. 首先我们建立一个app,名字叫做hello.别忘了在settings. ...

  7. Django模板自定义标签和过滤器，模板继承（extend），Django的模型层

    上回精彩回顾 视图函数: request对象 request.path 请求路径 request.GET GET请求数据 QueryDict {} request.POST POST请求数据 Quer ...

  8. Flask初级（七）flash模板循环，判断

    Project name :Flask_Plan templates:templates static:static 继续前面的代码 修改Flask_Plan.py @app.route('/') d ...

  9. Flask初级（六）flash模板渲染

    Project name :Flask_Plan templates:templates static:static 继续上篇的模板 我们已经可以静态调用模板,包括继承模板,保证了页面的一致性,但是我 ...

随机推荐

  1. Git 同时与多个远程库互相同步

    情形:有两个git服务器,比如github,gitosc,有个项目同时在两个服务器上,要互相同步 其实命令还是比较简单的,比如一个现有的git项目,在github,gitosc中分别创建好对应的项目. ...

  2. sql 题目

    1.自增列 通用: ) from table b where b.sid<a.sid) ,* from table a; ,),* from ... 第二个已经有主键自增列的就不可以用了 还有就 ...

  3. Trailing Zeroes (III) （二分）题解

    You task is to find minimal natural number N, so that N! contains exactly Q zeroes on the trail in d ...

  4. 【安装】Mysql在Linux上安装

    1.下载 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本:mysql-5.6.37-linux-glibc2.12- ...

  5. 【jdk源码分析】jdk8的ArrayList初始化长度为0

    先看结果 用的是反射获取elementData底层数组的长度 查看源码 无参构造函数没有了this.size = 10; 图1 图2 图3 图4 java的基本数据类型默认值 所以无参构造时长度为0 ...

  6. [TODO]The way to Go(9): 基本类型和运算符

    参考: Github: Go Github: The way to Go 基本类型和运算符 表达式是一种特定的类型的值,它可以由其它的值以及运算符组合而成. 每个类型都定义了可以和自己结合的运算符集合 ...

  7. 文件查找：locate、find

    文件查找:在文件系统上查找符合条件的文件: locate, find 非实时查找(数据库查找):locate  //不是遍历系统文件,把当前系统目录下的所有文件抽取出来制作成一个索引(或者叫数据库), ...

  8. 关于xargs cp中，如何确定拷贝的源和目的 （copied）

    Seker: find . -name "*" |xargs cp ???? 这里 xargs cp 怎么区分cp源 和 cp目的 例如:想把 查询到的文件 都copy到/home ...

  9. React Native 之 定义的组件 （跨文件使用）

    哈哈的~~~今天介绍的是自定义组件 然后去使用这个组件,让这个组件传递这各种文件之间  哈哈  下面开始吧!!!! 我们所要创建的是一个自定义的Button,先创建一个js文件起名为MyButton, ...

  10. iBatis的CRUD操作详细总结

    昨天晚上看了一下关于iBatis的一个讲解的视频,讲的和我的这个简单的总结差不多.... 思考了一下还是把主要操作都总结一下吧,当然这里也不是全的,知识简单的CRUD... 首先我觉得持久层的操作主要 ...