### 实现跨多页面的通用导航栏 为了实现在多个页面中都能使用的公共导航栏，在Flask项目里可以通过模板继承来完成这一功能。具体来说，就是创建一个基础模板文件（base.html），在这个文件内定义好整个网站共有的布局结构以及放置搜索框的位置。 #### 创建Base Template (base.html) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}Default Title{% endblock %}</title> </head> <body> <header> <!-- 将搜索框放在顶部 --> <form action="{{ url_for('search') }}" method="get"> <input type="text" name="q" placeholder="Search..."> <button type="submit">Go</button> </form> </header> <div class="container"> {% block content %} <!-- 页面主体内容将在这里被替换 --> {% endblock %} </div> <footer> Footer Content Here... </footer> </body> </html> ``` 此段代码展示了如何构建一个包含搜索表单的基础HTML文档[^1]。注意这里的`<form>`标签指向了一个名为'search' 的路由，并且使用GET请求提交数据；这允许用户输入查询字符串并触发相应的操作。 对于其他具体的页面，则只需要扩展上述提到的基础模板即可： #### 扩展Base Template (child_page.html) ```html {% extends "base.html" %} {% block title %}Child Page Title{% endblock %} {% block content %} <h1>Welcome to Child Page!</h1> <p>This is some text on the child page.</p> {% endblock %} ``` 通过这种方式，所有的子页面都会自动拥有相同的头部区域，其中包括了统一风格的导航条和搜索框。 另外，如果希望进一步增强用户体验，还可以考虑利用JavaScript库如jQuery或前端框架Vue.js/AngularJS等动态加载更多组件至导航栏中，但这超出了当前讨论范围。