在html页面中使用模板继承,HTML5下的模板继承

标签：

应用背景：

在web项目中，我们的网站主页面除了正文是由导航条，底栏。也就是nav.html，bottom.html，在构建页面的时候，应当使用HTML的模板继承，避免代码重复和以便于代码的维护。可以写一个indexBase.html来包含(include)这些通用文件，如下：

涉及文件举例：

home.html 　　　　 主页

indexBase.html 　　继承用的页面

indexNav.html　　　页首组件

indexBottom.html 　页脚组件

相关样式文件：

home.css 页面自定义样式　　　　indexBase.css 需要继承页面的相关样式

1

2

3

4

5

6

7

8 {% block head %}

9 {% endblock %}

10

11

{% block title %}默认标题{% endblock %}

12

13 {% block style %}

14 {% endblock %}

15

16

17

18

19

20

21

22

23 {% include 'indexNav.html' %}

24 {% block content %}

25

26 这里是默认内容,所有继承自这个模板的,如果不覆盖就显示这里的默认内容。

27

28 {% endblock %}

29 {% include 'indexBottom.html' %}

30

31

32

indexBase.html内容

那么，继承该模板的页面格式如下：

1 {% extends 'indexBase.html' %}

2 {% block head %}

3

4 {% endblock %}

5

6 {% block title %}title自定义{% endblock %}

7

8 {% block style %}

9

10

11

12 {% endblock %}

13

14

15 {% block content %}

16

17 {% endblock %}

home.html继承页面的格式

其中，在indexNav.html 页首组件 和 indexBottom.html 页脚组件内直接写div，两者相关样式文件写在 indexBase.css  内。

标签：

来源： https://www.cnblogs.com/lixiufeng1994/p/10155145.html