模板的继承

来源:互联网 发布:淘宝店晨练服 编辑:程序博客网 时间:2024/05/22 07:46

母版:定义一个html为标准,别的模板继承它

:如下:

{% extends "layout.html" %}
{% block body %}
                <table border="1">
                        <tr>
                            <td>用户名</td>
                            <td>端口号</td>
                        </tr>
                    {% for item in user_list %}
                    <tr>
                            <td>{{ item.hostname }}</td>
                            <td>{{ item.port}}</td>
                    </tr>


                    {% endfor %}
                </table>
{% endblock %}
{% block menu %}
    <li><a href="/web/userinfo" class="active">用户管理</a></li>
    <li><a href="/web/assets">资产管理</a></li>


{% endblock %}
{% block css %}
    <style>




    </style>


{% endblock %}
{% block js %}
    <script></script>


{% endblock %}


“layout.html”:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #pg-header{height: 48px;background-color:cadetblue }
        #pg-body{min-height: 500px}
        #pg-body #body-menu{width: 20%;float: left}
        #pg-body #body-content{width:80%;float: left}
        #pg-footer{height: 100px;background-color: darkcyan}
        .active{background-color: indigo}
    </style>
    {% block css %}{% endblock %}
</head>
<body>
        <div id="pg-header"></div>
         <div id="pg-body">
             <div id="body-menu">
                 <ul>


                     {% block menu %} {% endblock %}
                 </ul>
             </div>
            <div id="body-content">


                {% block body %}
                {% endblock %}
            </div>


         </div>
         <div id="pg-footer"></div>
        <script></script>
        {% block js %}{% endblock %}
</body>
</html>

0 0
原创粉丝点击