摘要
由于我们以前刚开始学的时候写的HTML文件都是有特定功能的HTML片段。但在实际应用中,我们会使用 Django 创建一个完整的站点,例如一个后台管理主机管理系统,一个人员管理系统等等。 这样的系统,必定就会存在一个大体的样本框架,例如左侧菜单,头部header信息,这样的通用部分在每个页面都会存在。这就带来一个常见的 Web 开发问题: 在整个网站中,如何减少共用页面区域(比如站点导航)所引起的重复和冗余代码?
我们不可能在每一个html中都复制粘贴这样相同的代码,就算你想这样,那么当你想要修改这些公共区域呢?是否也需要到每个html中去修改相同的地方
出现
这样就出现了我们的模板重用的需求,相同的模板,我们在其中的content中提上不同的内容就可以了
实现方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %} {% endblock %}</title>
<link rel="stylesheet" href="/static/commons.css">
<style>
.pg_header{
height: 48px;
background-color: seashell;
color: green;
}
{% block css %} {#在这里写每个页面的自己的css#} {% endblock %}
</style>
</head>
<body>
<h1 class="pg_header">主机管理系统-头部</h1>
<div class="menu">左侧菜单</div>
{% block content %} {#当想使用这个母版框架的html文件会被替换到这个block位置#} {% endblock %}
<script src="/static/jquery-min.js"></script>
<script>
{% block js %} {#在这里写每个页面的自己的js#} {% endblock %}
</script>
</body>
</html>
{% extends 'layout.html' %} {#声明使用那个模板中,内容就会在哪个模板中被替换#}
{% block title %}用户管理{% endblock %}
{#替换模板中的title block#}
{% block content %}
<h1>用户管理tab</h1>
<ul>
{% for user in user_list %}
<li>{{ user }}</li>
{% endfor %}
</ul>
{% endblock %}
- 几个注意的点:
- 一个html文件只可以继承一个模板
- html文件使用模板中定义的block字段来包裹需要放入模板中的部分,并以{% endblock %}结束
- css和js都有每个html自己的,需要放在上面标注出来的位置
如何导入其他html文件中的某个单一的模块
{% include 'tag.html' %} {#导入其他html模板中的某个组件到本模板中的当前位置#}