Flask 中的导航栏

在 Flask 中添加导航栏是一个常见的需求，本文将为你介绍如何在 Flask 中添加一个简单而美观的导航栏。

步骤

1. 安装依赖

在终端中运行以下命令，安装 Flask-Bootstrap 和 Flask-WTF 依赖:

pip install flask-bootstrap flask-wtf

2. 创建 Flask 应用程序

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key'
bootstrap = Bootstrap(app)

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

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

3. 创建模板

创建 templates 文件夹，在其中创建 base.html 和 index.html 模板。

base.html

{% extends 'bootstrap/base.html' %}

{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Flask 导航栏</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>
{% endblock %}

{% block content %}
{% endblock %}

使用 extends 关键字将 base.html 作为 index.html 的基础模板，覆盖 navbar 和 content 块。

index.html

{% extends 'base.html' %}

{% block content %}
<div class="container">
  <h1>欢迎来到 Flask 导航栏示例</h1>
  <p class="lead">导航栏已经创建完毕，您可以在其中添加页面链接、按钮等。</p>
</div>
{% endblock %}

使用 extends 关键字将 base.html 作为 index.html 的基础模板，覆盖 content 块。

4. 运行应用程序

在终端中运行以下命令，启动应用程序。

python app.py

打开 http://localhost:5000/，查看导航栏效果。

总结

本文介绍了如何在 Flask 中添加一个简单而美观的导航栏。通过这篇文章，您可以掌握以下知识：

1. 安装 Flask-Bootstrap 和 Flask-WTF 依赖；
2. 创建 Flask 应用程序；
3. 创建基础模板 base.html 和索引模板 index.html；
4. 运行应用程序，查看导航栏效果。

** Markdown代码片段：**

# Flask 中的导航栏

在 Flask 中添加导航栏是一个常见的需求，本文将为你介绍如何在 Flask 中添加一个简单而美观的导航栏。

## 步骤

### 1. 安装依赖

在终端中运行以下命令，安装 `Flask-Bootstrap` 和 `Flask-WTF` 依赖:

```python
pip install flask-bootstrap flask-wtf

2. 创建 Flask 应用程序

# 代码略

3. 创建模板

创建 templates 文件夹，在其中创建 base.html 和 index.html 模板。

base.html

# 代码略

index.html

# 代码略

4. 运行应用程序

在终端中运行以下命令，启动应用程序。

python app.py

打开 http://localhost:5000/，查看导航栏效果。

总结

本文介绍了如何在 Flask 中添加一个简单而美观的导航栏。通过这篇文章，您可以掌握以下知识：

1. 安装 Flask-Bootstrap 和 Flask-WTF 依赖；
2. 创建 Flask 应用程序；
3. 创建基础模板 base.html 和索引模板 index.html；
4. 运行应用程序，查看导航栏效果。