母版:定义一个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>