Flask 给所有模板添加导航栏

在本文中，我们将介绍如何使用Flask框架给所有模板添加导航栏。导航栏是网站中常见的一个组件，用于让用户方便地进行页面之间的导航操作。通过在所有模板中统一添加导航栏，可以提升网站的用户友好性和一致性。

阅读更多：Flask 教程

了解Flask模板

在开始之前，我们需要先了解一下Flask中的模板。Flask使用Jinja2作为默认的模板引擎，它支持使用基本的HTML语法，并提供了一些特殊的语法和标签来处理动态内容。

首先，我们需要在Flask应用中创建一个名为templates的文件夹，用于存放所有的模板文件。

例如，我们创建一个名为base.html的模板文件，它将作为所有其他模板的基础。

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
  {% block content %}{% endblock %}
</body>
</html>

在上述代码中，我们定义了一个导航栏，其中包含了三个链接。这部分将在所有模板中保持不变。

同时，我们通过{% block content %}{% endblock %}语句定义了一个内容块，它将用于在其他模板中插入动态内容。

继承基础模板

在其他模板中，我们可以通过继承基础模板的方式来实现导航栏的添加。

例如，我们创建一个名为home.html的模板文件，用于展示网站的首页。

{% extends "base.html" %}

{% block content %}
  <h1>Welcome to My Website!</h1>
  <p>This is the home page.</p>
{% endblock %}

通过{% extends "base.html" %}语句，我们告诉Flask该模板将会继承自base.html模板。而通过{% block content %}和{% endblock %}语句，我们在基础模板的内容块中插入了一些特定的内容。

这样，当我们访问首页时，基础模板中的导航栏会自动显示出来。

同样地，我们可以创建其他模板文件，并按照上述方法来继承基础模板和插入动态内容。

示例代码

下面是一个完整的示例代码，展示了如何使用Flask给所有模板添加导航栏。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/about')
def about():
    return render_template('about.html')

@app.route('/contact')
def contact():
    return render_template('contact.html')

if __name__ == '__main__':
    app.run()

在上述代码中，我们创建了一个简单的Flask应用，并定义了三个路由函数，分别对应首页、关于页面和联系页面。在每个路由函数中，我们通过render_template函数来渲染对应的模板文件。

自定义导航栏

除了在基础模板中定义固定的导航栏之外，我们还可以通过一些方法来实现自定义的导航栏。

例如，我们可以在每个路由函数中传递一个参数，用于表示当前活动页面的标识。

在基础模板中，我们可以根据这个参数来动态地给当前页面的导航链接添加一个active类，从而实现高亮效果。

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <style>
    .active {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <nav>
    <a href="/" {% if active == 'home' %}class="active"{% endif %}>Home</a>
    <a href="/about" {% if active == 'about' %}class="active"{% endif %}>About</a>
    <a href="/contact" {% if active == 'contact' %}class="active"{% endif %}>Contact</a>
  </nav>
  {% block content %}{% endblock %}
</body>
</html>