一、前言
在 HTML 开发中，尤其是在使用模板引擎（如 Jinja2，常用于 Flask 应用）时，extends 是一个非常有用的指令，它用于实现模板继承，从而达到代码复用的目的。这可以让你定义一个基本模板（通常包含重复使用的布局结构，如头部、底部、导航条等），然后让其他模板继承并重用这个基本结构，同时添加或覆盖某些部分。
例如在我们实战的防火墙查询页面的案例中，几个功能的页面在点击时，需要保持头部导航条相同的样式，此时就可以创建base.html基础模板继承复用到其他功能模块中，起到减少代码重复，提高维护效率，增强一致性的作用。
二、如何使用 extends 指令
1、创建基础模板：
首先，你需要有一个基础模板（通常被称为 base template）。这个模板包含了所有页面都会用到的 HTML 结构。
base.html:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{% block title %}My Website{% endblock %}</title>
</head>
<body><header><h1>Welcome to My Website</h1></header><nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li><li><a href="/contact">Contact</a></li></ul></nav><main>{% block content %}<!-- Default content goes here -->{% endblock %}</main><footer><p>Copyright © 2023</p></footer>
</body>
</html>2、创建子模板： 接下来，你可以创建一个或多个子模板，这些模板将继承基础模板，并可以覆盖基础模板中定义的任何块
about.html
{% extends "base.html" %}{% block title %}About Us - My Website{% endblock %}{% block content %}<h2>About Us</h2><p>This is the about page for my website.</p>
{% endblock %}3、工作原理
当你在子模板中使用 {% extends "base.html" %} 指令时，子模板将继承 base.html 的整个结构。
通过使用 {% block %} 标签，基础模板定义了可以被子模板覆盖的区域。如果子模板提供了相同名称的块内容，则会替换基础模板中的相应内容。
子模板不需要重新定义整个 HTML 结构，而只需要定义或重写它想要改变的那部分内容。
4、优势点
减少代码重复： 通过重用通用的页面布局，你可以减少每个页面的代码量。
提高维护效率： 如果需要修改布局（例如，添加一个新的导航链接），只需要在基础模板中修改一次，所有继承自该模板的页面都会自动更新。
增强一致性： 维持网站的视觉和功能一致性更为简单。
使用模板继承是 Flask 和其他许多现代 Web 框架的一个强大功能，能够显著提高开发效率和网站维护效率
三、防火墙查询页面导航base示例
base.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/bootstrap.4.6.min.css') }}"><link rel="stylesheet" href="{{ url_for('static', filename='css/init.css') }}">{% block head %}{% endblock %}<title>{% block title %}{% endblock %}</title>
</head><style>.container-fluid{width: 1500px;}
</style><body><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container-fluid" ><div id="header" style="background-color:#102b6a;width:1800px"><a class="navbar-brand " style=" text-align:center;color:white;" ><big><font size="6"> 防火墙规则查询页面</font></big></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="/" style="color:white"><b>首页</b><span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" style="color:white" href="{{ url_for('fw.query_netfw')}}"><b>物理防火墙规则查询</b></a></li><li class="nav-item"><a class="nav-link" style="color:white" href="{{ url_for('fw.query_netfwall')}}"><b>物理防火墙规则明细查询</b></a></li> <li class="nav-item"><a class="nav-link" style="color:white" href="{{ url_for('fw.query_hostfw')}}"><b>主机防火墙规则查询</b></a></li> <li class="nav-item"><a class="nav-link" style="color:white" href="{{ url_for('fw.query_hostfwall')}}"><b>主机防火墙规则明细查询</b></a></li> </ul><ul class="navbar-nav">{% if user %}<li class="nav-item"><span class="nav-link" style="color:white;">{{ user.username }}</span></li><li class="nav-item"><a class="nav-link" style="color:white;" href="{{ url_for('auth.logout') }}">退出登录</a></li>{% else %}<li class="nav-item"><a class="nav-link" style="color:white;" href="{{ url_for('auth.login') }}">登录</a></li>{% endif %}</ul></div><div></div></nav><div class="container-fluid">{% block body %}{% endblock %}</div>
</body></html>
