Django HTML模版

暮毅2024-03-19 22:59

一个网站的基本框架（如页面布局、导航栏、页脚栏等）往往是相同的。可以把这个基本框架做成一个模版，其它正式的HTML页面可以直接套用这个模版，可以大减少各HTML文件的代码量。

语法（模版文件中）：

html 复制代码

{% block content1 %}
	<!--创建一个块，其它HTML文件可以些区间填充内容，content1为块的名称，一个模版文件可以创建多个块-->
{% endblock %}

语法（其它HTML文件中）:

html 复制代码

<!--引用layout.html模版-->
{% extends '模版示例/layout.html' %}
{% block content1 %}
	<!-- 这在个区域里填充HTML代码，content1为块的名称，需要和模版文件中的对应 -->
	
{% endblock %}

示例：

1）创建一个模版页面

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模版示例</title>
		<style>
			#nav{
				width: 1280px;
				height: 100px;
				background-color: aqua;
				
			}
			#foot{
				width: 1280px;
				height: 100px;
				background-color: blue;
				
			}
		</style>
		{% block content1 %}
					<!--创建一个块，可用于写一些CSS等-->
		{% endblock %}
	</head>
	<body>
		<div id='nav'>
			<h1>导航区</h1>
		</div>
		<div>
			<h1>内容区</h1>
			{% block content2 %}
						<!--创建一个块，可用于写网页的实际内容-->
			{% endblock %}
		</div>
		<div id='foot'>
			<h1>页脚区</h1>
		</div>
		{% block content3 %}
					<!--创建一个块，可用于写js代码等内容-->
		{% endblock %}
	</body>
</html>

模版页面效果：

2）正式HTML文件引用模版

page1.html

html 复制代码

<!--引用layout.html模版-->
{% extends '模版示例/layout.html' %}
{% block content1 %}
	<!-- 填充第一个block -->
	<style>
		h2{
			color: red;
		}
	</style>
{% endblock %}

{% block content2 %}
	<!-- 填充第二个block -->
	<h2>我是page1,我引入了模版的内容</h2>
{% endblock %}

页面效果：

page2.html

html 复制代码

<!--引用layout.html模版-->
{% extends '模版示例/layout.html' %}
{% block content1 %}
	<!-- 填充第一个block -->
	<style>
		h2{
			color: pink;
		}
	</style>
{% endblock %}

{% block content2 %}
	<!-- 填充第二个block -->
	<h2>我是page2,我引入了模版的内容</h2>
{% endblock %}

页面效果：

这里我们发现，page1和page2的导航区和页脚区的内容都是一样的，是从模版中引入的，只需要写填充内容区即可。代码量大大减少。

而且，如果需要修改导航区和页脚区的内容，只需要修改模版文件即可。