模板的继承

最新推荐文章于 2024-01-14 15:52:39 发布

douyunqian668

最新推荐文章于 2024-01-14 15:52:39 发布

阅读量436

点赞数

分类专栏： Javascript Python自动化开发

本文链接：https://blog.csdn.net/douyunqian668/article/details/52915697

版权

Python自动化开发同时被 2 个专栏收录

208 篇文章 0 订阅

订阅专栏

Javascript

28 篇文章 0 订阅

订阅专栏

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