【Flask开发实战】HTML模板代码复用之extends使用

2024-05-01 14:34
11人已看

一、前言

在 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 &copy; 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>