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>
indexBase.html内容
那么，继承该模板的页⾯格式如下：
1 {% extends 'indexBase.html' %}
2 {% block head %}
3<link rel="stylesheet" href="/static/MyStyle/⾃定义.css">
4 {% endblock %}
5
6    {% block title %}title⾃定义{% endblock %}
html主页7
8 {% block style %}
9<style>
10
11</style>
12 {% endblock %}
13
14
15 {% block content %}
16
17 {% endblock %}
home.html继承页⾯的格式
其中，在indexNav.html 页⾸组件和 indexBottom.html 页脚组件内直接写div，两者相关样式⽂件写在 indexBase.css  内。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。