zoukankan      html  css  js  c++  java
  • flask中jinjia2模板引擎详解3

    接上文

    模板继承

    Jinji2中的模板继承是jinjia2比较强大的功能之一。

    模板继承可以定义一个父级公共的模板,把同一类的模板框架定义出来共享。

    这样做一方面可以提取共享代码,减少代码冗余和重复的工作量

    另一方面,对于后期的维护和管理也非常方便。

    一个根模板(或叫基模板)主要有三部分组成:

      一是公共的js,css等资源文件的引用,

      二是定义好一个布局框架,

      三是定义子模板可以重写的部分(block)

    下面我们以一个例子来说明模板继承的使用方法

    1. 创建一个基模板

    选中templates文件夹,右键选择新建->HTML文件

     

    在弹出的窗口中输入要创建的文件名:base.html,

     

    点击确定

    然后把下面的代码copy到base.html中

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    
    <html lang="en">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
        <link rel="stylesheet" href="{{ url_for('static',filename='style.css') }}" />
    
        {% block head %}
    
        <title>{% block title %}{% endblock %} - My Webpage</title>
    
        {% endblock %}
    
    </head>
    
    <body>
    
        <div id="content">{% block content %}{% endblock %}</div>
    
        <div id="footer">
    
            {% block footer %}
    
            &copy;Copyright 2018
    
            {% endblock %}
    
        </div>
    
    </body>

     

    在这个基模板中,可以看到定义了4个block,每个个block就是告诉子模板,可以重写这些block中的内容

    在同一个模板中不能定义同名的block

    注意在static文件夹中添加style.css文件:

    Style.css文件中只有一行代码:

    body{
    
        background-color:red;
    
    }

    1. 创建一个子模板

    用同样的方法在template下面创建一个sub.html文件,代码如下

    {% extends "base.html" %}
    
    {% block title %}Index{% endblock %}
    
    {% block head %}
    
        {{ super() }}
    
        <style type="text/css">
    
            .important { color: #336699; }
    
        </style>
    
    {% endblock %}
    
    {% block content %}
    
        <h1>Index</h1>
    
        <p class="important">
    
          Welcome on my awesome homepage.
    
        </p>
    
    {% endblock %}

     

    可以看到这个子模板用extends方法继承了base.html模板,然后又重写了 title, head, content三个block中的内容

    一个模板中不能出现重复名称的block块

    其中的supper()用来调用父级模板中的block块内容,在本例中,supper()会把父级的head块内容写到子模板中

    1. 定义route

    在code.py文件中添加sub.html的route定义

    @app.route("/tmpl/sub")
    
    def renderSub():
    
        return render_template("sub.html")
    

     

    运行效果

     

    如果想多次调用一个block块,可以使用self.block块名称进行调用,比如,我们把<h1>Index</h1>这里替换成<h1>{{self.title()}}</h1>

     

    运行效果:

     

  • 相关阅读:
    12864多级菜单实现,可方便实现无限级菜单(转)
    一起来学习PID
    STM32探秘 之FSMC
    RAD Studio (Delphi) Firemonkey 教程
    POS终端MAC算法-C语言实现
    STM32的PWM输入模式设置并用DMA接收数据
    AVR web server
    Linux 查看服务状态(服务与进程)
    linux设置开机自启动
    科目三靠边停车难度升级,超过50cm不合格怎么破?
  • 原文地址:https://www.cnblogs.com/itxb/p/8511380.html
Copyright © 2011-2022 走看看