模板继承
我们在制作Web程序时,一般会定义一个基模板,把网页上的导航栏、页脚等通用内容放在基模板里,而每一个继承基模板的子模板在被渲染时都会自动包含这些部分。用这种方式可以避免在多个模板中编写重复代码。
编写基模板
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta charset="UTF-8">
<title>{% block title %}Template - HelloFlask{% endblock %}</title>
{% block styles %}{% endblock %}
{% endblock %}
</head>
<body>
<nav>
<ul><li><a href="{{ url_for('hello') }}">Home</a></li></ul>
</nav>
<main>
{% block content %}{% endblock %}
</main>
<footer>
{% block footer %}
...
{% endblock %}
</footer>
{% block scripts %}{% endblock %}
</body>
</html>
这就是一个基模板,它包含了程序页面的固定部分、HTML的基本结构。
子模板在基础基模板后会自动包含基模板的内容和结构。为了能让子模板方便地覆盖或插入内容到基模板中,我们在模板中定义了很多个块(block),在子模板中可以通过定义同名的块来执行继承操作。例如上面代码中的content块表示页面主体内容,footer表示页脚部分等等。块名可以随意指定。
子模板在继承时,只需要在子模板里定义同名块,再写上自己的内容即可。例如继承content
{% block content %}
<子模板内容>
{% endblock %}
块的结束标签也可以加上块名
{% block content %}
.....
{% endblock content %}
编写子模板
因为基模板已经定义了HTML基本结构,而且包含了固定信息,在子模板中我们只需要对特定的块进行修改。
{% extends 'base.html' %}
{% from 'macros.html' import qux %}
{% block content %}
{% set name='baz' %}
<h1>Template</h1>
<ul>
<li><a href="{{ url_for('watchlist') }}">Watchlist</a></li>
<li>Filter: {{ foo|musical }}</li>
<li>Global: {{ bar() }}</li>
<li>TestL: {% if name is baz %}I am baz.{% endif %}</li>
<li>Macro:{{ qux(amount=5) }}</li>
</ul>
{% endblock %}
在开头一定要记住使用extends标签声明拓展基模板,它告诉模板引擎当前模板派生自base.html。一定要在开头!!