Django HTML模版-编程知识

Django HTML模版

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

语法（模版文件中）：

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

语法（其它HTML文件中）:

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

示例：

1）创建一个模版页面

<!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

<!--引用layout.html模版-->
{% extends '模版示例/layout.html' %}
{% block content1 %}<!-- 填充第一个block --><style>h2{color: red;}</style>
{% endblock %}{% block content2 %}<!-- 填充第二个block --><h2>我是page1,我引入了模版的内容</h2>
{% endblock %}

页面效果：

page2.html

<!--引用layout.html模版-->
{% extends '模版示例/layout.html' %}
{% block content1 %}<!-- 填充第一个block --><style>h2{color: pink;}</style>
{% endblock %}{% block content2 %}<!-- 填充第二个block --><h2>我是page2,我引入了模版的内容</h2>
{% endblock %}

页面效果：