在Flask中，就像在大多数Web开发框架中一样，你可以利用基础模板和模板的扩展来减少重复标记。换句话说，你可以有一个基本的HTML文件，并在每个网页上显示其中的组件。我们可以重构我们在Flask应用程序中已经创建的一些标记，以便利用从其他模板扩展的模板，并使用各种块来获得我们想要的布局。
templates/base.html
要开始使用Flask中的基础模板，我们可以在项目的模板目录下添加一个新的文件，名为base.html。
在base.html文件中，我们要把通常出现在网站每个页面的标记放进去。因此，像DOCTYPE、html标签、head标签、meta标签、title标签和body标签，都应该包括在这里。然后，我们使用特殊的模板语法来指定其他模板的标记将在运行时被动态插入。作为一个例子，这里是base.html文件的一个开始。
flask-tutorial/templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
{% block main %}
{% endblock %}
</body>
</html>
在正文标签的开头和结尾之间，我们有**{% block main %}和{% endblock %}**。这就是我们可以动态插入其他内容的地方。
使用扩展
现在我们可以访问一个不同的模板文件，如home.html，并使用extends关键字。当使用extends关键字时，它告诉Flask在这个页面的**{% block main %}和{% endblock %}之间获取任何内容，并将其插入它所延伸的页面的{% block main %}和{% endblock %}**之间。这意味着home.html中的高亮标记将在运行时被插入base.html中。
flask-tutorial/templates/home.html
{% extends 'base.html' %}
{% block main %}
<h1>Make A Short URL</h1>
{% for message in get_flashed_messages() %}
<h2>{{ message }}</h2>
{% endfor %}
<form action="shortenurl" method="post">
<label for="url">Enter URL</label>
<input type="url" name="url" value="" required>
<label for="shortcode">Enter Name</label>
<input type="text" name="shortcode" value="" required>
<input type="submit" value="Submit">
</form>
{% endblock %}
请确保在'base.html'周围加上单引号，否则你可能会得到一个错误，比如。"jinja2.exceptions.UndefinedError jinja2.exceptions.UndefinedError: 'base' is undefined"
使用include
另一个减少重复代码的好方法是在Flask中使用include语句。让我们建立一个名为flash.html的新html文件，并将负责显示flash信息的标记放在该文件中。
flask-tutorial\templates\flash.html，该文件中包含了从home.html中删除的标记。
{% for message in get_flashed_messages() %}
<h2>{{ message }}</h2>
{% endfor %}
下一步是在我们希望它出现的页面上包含这块代码。这里强调了这一点。
flask-tutorial\templates\home.html
{% extends 'base.html' %}
{% block main %}
<h1>Make A Short URL</h1>
{% include 'flash.html' %}
<form action="shortenurl" method="post">
<label for="url">Enter URL</label>
<input type="url" name="url" value="" required>
<label for="shortcode">Enter Name</label>
<input type="text" name="shortcode" value="" required>
<input type="submit" value="Submit">
</form>
{% endblock %}
动态标题
现在标题标签已经包含在基本模板中。这意味着你不能再对标题的内部HTML进行硬编码，除非你想让每个页面都有相同的标题。我们可以更新主页路线，将标题作为一个变量传递，然后在模板中使用插值来显示这个变量，就像这样。
flask-tutorial/app.py
@app.route('/')
def home():
title = 'Make A Short URL'
return render_template('home.html', title=title)
flask-tutorial\templates\base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
{% block main %}
{% endblock %}
</body>
</html>
如何在Flask中使用Bootstrap模板
到目前为止，这个Flask应用程序完全没有CSS样式。为了让它看起来更好，我们可以在模板中使用Bootstrap。让我们这样来修改base.html文件。
flask-tutorial/base.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<title>{{ title }}</title>
</head>
<body>
{% block main %}
{% endblock %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
</body>
</html>
现在，主页看起来干净了一些。
Bootstrap对Flash信息的提醒
现在Bootstrap已经安装在项目中了，我们可以让Flash信息对终端用户来说更有吸引力。在flash.html中添加一个简单的类定义就可以了。
flask-tutorial/templates/flash.html
{% for message in get_flashed_messages() %}
<h2 class="alert alert-info">{{ message }}</h2>
{% endfor %}
看起来效果还不错。
