如何为Flask网站制作通用导航栏（Navbar）与页脚（Footer）

嘿，我来帮你搞定Flask里复用导航栏和页脚的事儿！这在Flask里用Jinja2的模板继承就能轻松实现，步骤超清晰：

1. 先搞一个基础模板（base.html），把导航栏、页脚都放这里 #

这个模板是所有页面的“骨架”，我们把重复的导航栏、页脚写在这里，中间留个空位让其他页面填充专属内容。我把你给的导航栏补全了（假设下拉菜单的完整逻辑），你可以直接用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}SpiritUs{% endblock %}</title>
    <!-- 引入Bootstrap样式（如果用了的话） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <!-- Brand -->
        <a class="navbar-brand" href="{{ url_for('index') }}">SpiritUs</a>
        <!-- Links -->
        <ul class="navbar-nav">
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    功能菜单
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="{{ url_for('feature1') }}">功能1</a>
                    <a class="dropdown-item" href="{{ url_for('feature2') }}">功能2</a>
                </div>
            </li>
            <!-- 其他导航链接 -->
            <li class="nav-item">
                <a class="nav-link" href="{{ url_for('about') }}">关于我们</a>
            </li>
        </ul>
    </nav>

    <!-- 内容占位区：子页面会替换这里的内容 -->
    <div class="container mt-4">
        {% block content %}{% endblock %}
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white mt-5 p-4 text-center">
        <p>&copy; 2024 SpiritUs. 保留所有权利。</p>
        <p><a href="{{ url_for('privacy') }}" class="text-white">隐私政策</a> | <a href="{{ url_for('terms') }}" class="text-white">服务条款</a></p>
    </footer>

    <!-- 引入Bootstrap JS（如果需要下拉菜单等交互） -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

这里用url_for生成链接是个好习惯，以后路由改了不用挨个页面改路径，Flask会自动帮你生成正确地址。

2. 子页面直接继承基础模板就行 #

比如首页index.html，只需要写自己的专属内容，导航栏和页脚会自动从base.html加载：

{% extends "base.html" %}

{% block title %}首页 - SpiritUs{% endblock %}

{% block content %}
    <h1>欢迎来到SpiritUs！</h1>
    <p>这是网站的首页内容，导航栏和页脚已经自动加载啦~</p>
{% endblock %}

• {% extends "base.html" %}：告诉Jinja2这个页面要继承基础模板
• {% block title %}：可以给每个页面设置专属标题，不写的话就用base里的默认标题
• {% block content %}：这里放当前页面独有的内容就行

3. Flask路由里返回子页面模板 #

在你的app.py里，正常写路由返回对应的模板就好：

from flask import Flask, render_template

app = Flask(__name__)

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

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

# 其他功能路由...

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

小技巧：给当前页面导航项加高亮 #

如果想让当前页面的导航项高亮，可以在base.html的导航链接里加个判断：

<li class="nav-item {% if request.endpoint == 'index' %}active{% endif %}">
    <a class="nav-link" href="{{ url_for('index') }}">首页</a>
</li>

这样访问首页时，这个导航项会自动加上Bootstrap的active类，高亮显示。

内容的提问来源于stack exchange，提问作者user7477875