HTML5下的模板继承
应用背景：
在web项目中，我们的网站主页面除了正文是由导航条，底栏。也就是nav.html，bottom.html，在构建页面的时候，应当使用HTML的模板继承，避免代码重复和以便于代码的维护。可以写一个indexBase.html来包含（include）这些通用文件，如下：
涉及文件举例：
home.html 主页
indexBase.html 继承用的页面
indexNav.html 页首组件
indexBottom.html 页脚组件
相关样式文件：
home.css 页面自定义样式 indexBase.css 需要继承页面的相关样式
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
6 <link rel="stylesheet" href="/static/MyStyle/indexBase.css">
7
8 {% block head %}
9 {% endblock %}
10
11 <title>{% block title %}默认标题{% endblock %}</title>
12
13 {% block style %}
14 {% endblock %}
15
16
17 </head>
18 <body>
19
20 <script src="/static/plugins/jquery-3.3.1.js"></script>
21 <script src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
22
23 {% include 'indexNav.html' %}
24 {% block content %}
25 <div>
26 这里是默认内容,所有继承自这个模板的,如果不覆盖就显示这里的默认内容。
27 </div>
28 {% endblock %}
29 {% include 'indexBottom.html' %}
30
31 </body>
32 </html>
那么，继承该模板的页面格式如下：
1 {% extends 'indexBase.html' %}
2 {% block head %}
3 <link rel="stylesheet" href="/static/MyStyle/自定义.css">
4 {% endblock %}
5
6 {% block title %}title自定义{% endblock %}
7
8 {% block style %}
9 <style>
10
11 </style>
12 {% endblock %}
13
14
15 {% block content %}
16
17 {% endblock %}
其中，在indexNav.html 页首组件 和 indexBottom.html 页脚组件内直接写div，两者相关样式文件写在 indexBase.css 内。