模板继承
[TOC]
语法
将模板公用的代码放在父模板base.html中，其他html页面通过继承父模板的方式避免重复的代码
语法：
父模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{% block head %}{% endblock %}
</head>
<div>
<h1>模板的内容</h1>
</div>
{% block MainContainer %}{% endblock %}
<body>
</body>
</html>
子模板
<!-- 表示继承'base.html'-->
{% extends 'base.html' %}
{% block title %}
<!-- 替换父模板{% block title %}{% endblock %}部分-->
{% endblock %}
<!-- 替换父模板{% block head %}{% endblock %}部分-->
{% block head %}
<style>不同的风格文件</style>
<link rel="stylesheet" href="">
<script>不同的脚本文件</script>
{% endblock %}
<!-- 替换父模板 {% block MainContainer %}{% endblock %}部分-->
{% block MainContainer %}
<h1>这里是写具体内容的地方</h1>
{% endblock %}
例子
Flask代码: main.py
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/login')
def login():
return render_template('login.html')
if __name__ == '__main__':
app.run(debug=True)
父模板: base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav-header {
background: #3a3a3a;
height: 65px;
}
ul{
overflow: hidden;
}
ul li{
float: left;
list-style: none;
padding: 0 10px;
line-height: 65px;
}
ul li a{
color: #ffffff;
}
</style>
</head>
<body>
<div class="nav-header">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">论坛</a> </li>
</ul>
</div>
{% block MainContainer %}{% endblock %}
</body>
</html>
子模板: index.html
{% extends 'base.html' %}
{% block MainContainer %}
<p>这里是首页</p>
{% endblock %}
子模板: login.html
{% extends 'base.html' %}
{% block MainContainer %}
<p>这里是注册页面</p>
{% endblock %}
