Python Flask中通过单标签在多HTML文件复用导航栏模板

Flask基于Jinja2模板引擎，有两种实用方式可以让你复用nav.html导航栏，彻底告别重复代码：

方法一：直接引入模板片段（include） #

这是最简单直接的复用方式，适合单独复用某个组件：

1. 确保nav.html放在Flask默认的templates目录下（如果放在子目录，比如templates/partials，后续路径要对应调整）。
2. 在需要添加导航栏的HTML文件里，用Jinja2的include标签插入导航栏：

<!DOCTYPE html>
<html>
<head>
    <title>你的页面标题</title>
</head>
<body>
    <!-- 插入导航栏模板 -->
    {% include 'nav.html' %}
    
    <!-- 页面自定义内容 -->
    <div class="main-content">
        <h1>欢迎访问</h1>
        <p>这是页面的核心内容</p>
    </div>
</body>
</html>

如果nav.html在子目录（比如templates/components/nav.html），就写成{% include 'components/nav.html' %}。

方法二：模板继承（更适合整体布局复用） #

如果你的页面有统一的布局框架（比如头部导航、底部版权栏），用模板继承能大幅降低后续维护成本：

1. 创建基础模板base.html，把导航栏整合进去，同时预留出子页面可自定义的区块：

<!DOCTYPE html>
<html>
<head>
    <!-- 可自定义的页面标题 -->
    <title>{% block title %}默认标题{% endblock %}</title>
</head>
<body>
    <!-- 复用导航栏 -->
    {% include 'nav.html' %}
    
    <!-- 子页面填充内容的区块 -->
    <div class="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

2. 其他页面直接继承这个基础模板，只需要填充对应的区块内容即可，比如index.html：

{% extends 'base.html' %}

<!-- 自定义页面标题 -->
{% block title %}首页{% endblock %}

<!-- 填充页面核心内容 -->
{% block content %}
<h1>首页</h1>
<p>这是首页的专属内容</p>
{% endblock %}

这种方式的优势在于，后续要修改导航栏或整体布局，只需要改动base.html或nav.html，所有子页面都会自动同步更新。

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