zoukankan      html  css  js  c++  java
  • jinja语法

    <!--base.html-->
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <!--html中的包含关系-->
        {% block head %}
            {% include ['includes/_head.html', 'include/_metas.html'] %}
        {% endblock head %}
    </head>
    <body>
    
        <!--页头-->
        <header>{% block header %}{% endblock header %}</header>
    
        <!--block作用域问题,内层block调用外面的item-->
        {% for item in items %}
            <li>{% block loop_item scoped %}{{ item }}{% endblock loop_item %}</li>
        {% endfor %}
    
        <!--页体-->
        <div>{% block content %}{% endblock content %}</div>
    
        <!--页脚-->
        <footer>
            {% block footer %}
                Copyright 2018 by <a href="www.baidu.com">Baidu</a>
            {% endblock footer %}
        </footer>
    
    </body>
    </html>
    
    
    <!--index.html-->
    
    <!--继承父页面-->
    {% extends 'base.html' %}
    
    <!--宏-->
    {% macro input(name, value='', type='text', size=20) %}
        <input type="{{ type }}" name="{{ name }}" value="{{ value }}" size="{{ size }}"/>
    {% endmacro %}
    
    <!--宏引入-->
    {% import '_marcos.html' as ui %}
    
    <!--title-->
    {% block title %}{{ title }}{% endblock title %}
    
    <!--content-->
    {% block content %}
    {% set links=[
        ("home", url_for(".index")),
        ("about", url_for(".about")),
        ("service", url_for(".service")),
        ("project", url_for(".project")),
        ] %}
    
    <nav>
        {% for label, href in links %}
            {% if not loop.first %} | {% endif %}
            <a href="{{ href }}">{{ label }}</a>
        {% endfor %}
    </nav>
    
        <!--重复使用变量-->
        <h1>{{ self.title() }}</h1>
        {{ input('username') }}
        {{ input('password', type='password') }}
    
    {% endblock content %}
    
    
    <!--footer-->
    {% block footer %}
        <hr>
        <!--改写父类方法,且不覆盖父类-->
        {{ super() }}
    {% endblock footer %}
  • 相关阅读:
    面向对象-对象的内存图
    面向对象-类与对象的关系
    部署Ambari Server实战案例
    面向对象介绍
    基础语法-二维数组的基本使用
    基础语法-无序/有序数组中元素的查找
    常见数据结构与算法-冒泡排序
    常见数据结构与算法-选择排序
    基础语法-数组的常见问题及常见操作
    基础语法-数组的内存分配
  • 原文地址:https://www.cnblogs.com/themost/p/9027534.html
Copyright © 2011-2022 走看看