zoukankan      html  css  js  c++  java
  • 模板的继承

    引用自:http://www.pythondoc.com/flask-mega-tutorial/templates.html#id5

    模板继承
    在这一章结束前我们将讨论最后一个话题。
    
    在我们的 microblog 应用程序中,在页面的顶部需要一个导航栏。在导航栏里面有编辑账号,登出等等的链接。
    
    我们可以在 index.html 模板中添加一个导航栏,但是随着应用的扩展,越来越多的模板需要这个导航栏,我们需要在每一个模板中复制这个导航栏。然而你必须要保证每一个导航栏都要同步,如果你有大量的模板,这需要花费很大的力气。
    
    相反,我们可以利用 Jinja2 的模板继承的特点,这允许我们把所有模板公共的部分移除出页面的布局,接着把它们放在一个基础模板中,所有使用它的模板可以导入该基础模板。
    
    所以让我们定义一个基础模板,该模板包含导航栏以及上面谈论的标题(文件 app/templates/base.html):
    
    <html>
      <head>
        {% if title %}
        <title>{{title}} - microblog</title>
        {% else %}
        <title>microblog</title>
        {% endif %}
      </head>
      <body>
        <div>Microblog: <a href="/index">Home</a></div>
        <hr>
        {% block content %}{% endblock %}
      </body>
    </html>
    在这个模板中,我们使用 block 控制语句来定义派生模板可以插入的地方。块被赋予唯一的名字。
    
    接着现在剩下的就是修改我们的 index.html 模板继承自 base.html (文件 app/templates/index.html):
    
    {% extends "base.html" %}
    {% block content %}
    <h1>Hi, {{user.nickname}}!</h1>
    {% for post in posts %}
    <div><p>{{post.author.nickname}} says: <b>{{post.body}}</b></p></div>
    {% endfor %}
    {% endblock %}
    View Code

    通过{%block%}{%endblock%}来控制继承后,可以添加新内容的地方。

  • 相关阅读:
    Android存储方式之SQLite的使用
    Is there a way to add a badge to an application icon in Android?
    Android SDK Manager更新失败的解决办法
    Android中的Handler机制
    解决SDK下载中遇到的“Connection to https://dl-ssl.google.com refused”问题
    Testlink使用心得
    解决Android Toast重复显示等待时间过长的问题
    Unicode和多字符集的区别
    WEB FARM NLB TEST
    win8.1驱动安装
  • 原文地址:https://www.cnblogs.com/superxuezhazha/p/7413616.html
Copyright © 2011-2022 走看看