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

  • 相关阅读:
    Docker安装MySQL&Redis
    使用VirtualBox+Vagrant快速搭建Linux虚拟机环境
    Java集合工具类的一些坑,Arrays.asList()、Collection.toArray()...
    1.docker常用命令
    4. 带有延迟时间的Queue(DelayQueue)
    3. 基于优先级的Queue(PriorityBlockingQueue)
    2. 常见的Queue
    1. 模拟Queue
    14. 线程调度
    13. 线程池
  • 原文地址:https://www.cnblogs.com/jackadam/p/8129246.html
Copyright © 2020-2023  润新知